javascript - 具有 infoWindowContent 和用户地理位置的多个制作者

Question

我想在 Google map 中添加用户的地理位置以及我的其他标记。我已成功添加我的多个标记，但我无法居中/平移到带有用户位置的标记...

加载 map 时，我希望显示所有标记，但它应该关注用户的地理位置。这是我到目前为止所做的。

jQuery(function ($) {
    // Asynchronously Load the map API
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    // Multiple Markers
    var markers = [
        ["Alpha Game One", 33.8008, -84.3894],
        ["Alpha Game Two", 33.8008, -84.3894]
    ];
    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content"><h3>Alpha Game One</h3><pThis is alpha Game one location here : <a href="#">View Locaion</a></div>'],
        ['<div class="info_content"><h3>Alpha Game Two</h3><p>This is alpha Game two location here : <a href="#">View Location</a></p></div>']
    ];
    var icons = [
        "https://cdn.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png",
        "https://cdn.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png"]
    var icons_length = icons.length;
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(),
        marker, i;
    var iconCounter = 0;
    // Loop through our array of markers & place each one on the map
    for (i = 0; i < icons_length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: icons[iconCounter]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
        this.setZoom(3);
        google.maps.event.removeListener(boundsListener);
    });
}

#map_wrapper {
    height: 500px;
}
#map_canvas {
    width: 100%;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="map_wrapper">
  <div id="map_canvas" class="mapping"></div>
</div>

您可以看到，它工作正常。但我想添加用户的地理位置并关注用户的地理位置。

谢谢

Answer 1

这里是HTML5 GeoLocation API集成到您的代码中。除了添加地理定位函数之外，对代码的唯一更改是将 map 变量置于 initialize 函数之外，以便它在 handleNoGeolocation 中可用> 功能。

jQuery(function ($) {
    // Asynchronously Load the map API
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

var map;

function initialize() {

    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    // Multiple Markers
    var markers = [
        ["Alpha Game One", 33, -84],
        ["Alpha Game Two", 32, -85]
    ];
    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content"><h3>Alpha Game One</h3><pThis is alpha Game one location here : <a href="#">View Locaion</a></div>'],
        ['<div class="info_content"><h3>Alpha Game Two</h3><p>This is alpha Game two location here : <a href="#">View Location</a></p></div>']
    ];
    var icons = [
        "https://cdn.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png",
        "https://cdn.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png"]
    var icons_length = icons.length;
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(),
        marker, i;
    var iconCounter = 0;
    // Loop through our array of markers & place each one on the map
    for (i = 0; i < icons_length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: icons[iconCounter]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
        this.setZoom(3);
        google.maps.event.removeListener(boundsListener);
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            new google.maps.Marker({
                map: map,
                position: pos,
                title: 'User location'
            });

            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }

    var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
}