具有 infoWindowContent 和用户地理位置的多个 Maker

Question

我想在 Google 地图中添加用户的地理位置以及我的其他标记。我已成功添加我的多个标记，但我无法 Center/pan 到用户位置 ...

的标记

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

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.setCenter(marker.getPosition()) or map.panTo(marker.getPosition())

所以您要做的是使用 GeoLocation API 创建一个标记并使用上述函数。

请记住，用户的位置准确性取决于用户的设备，并且用户始终需要向您的网站授予权限。因此，请确保您在用户未向您的网站授予其位置权限时建立异常。

Answer 2

这里 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);
}

Answer 3

试试这个代码片段，可能对你有点帮助... 详情请阅读this...

var map;

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(-2.548926, 118.0148634),
        content: content
    };

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

$(document).ready(function () {
    var mapOptions = {
        zoom: 6
    };
    map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

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

            var marker = new google.maps.Marker({
                map: map,
                title: 'Your location !!!',
                animation: google.maps.Animation.BOUNCE
            });
            marker.setPosition(pos);

            var infowindow = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(marker.getTitle());
                infowindow.open(map, marker);
            });
            map.setCenter(pos);
            map.setZoom(16);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        handleNoGeolocation(false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map" style="width:600px; height:400px"></div>

这是 result... 运行代码的结果没有显示，因为无法找到你的位置，所以我将它包含在我的 jsfiddle 中 here...

具有 infoWindowContent 和用户地理位置的多个 Maker

Multiple Maker with infoWindowContent and User's Geo Location

javascript

html

google-maps

google-maps-api-3