首次显示地图后的 Google 地图 API 地理位置答案

【问题标题】：Google map API geolocation after first display of the map首次显示地图后的 Google 地图 API 地理位置
【发布时间】：2014-11-19 17:18:35
【问题描述】：

此代码采用 (400) 个标记的大列表并将其添加到地图中，最后，它显示了包括所有标记在内的整个地图。

我试图实现的是：当地理定位可用时，将地图以位置为中心，缩放到 16 级并刷新地图以显示它，否则，让整个大地图显示...我已阅读并尝试过许多不同的事情，但地理定位必须发生在地图创建之前。我想让它发生在之后。我在这里向您展示我的代码和工作站点的临时链接：http://studioteknik.co/brasseursillimites.com/detaillants/

function initialize()
{
    var map = new google.maps.Map(document.getElementById('map-canvas'));
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    for (var i in locations) {

        var p = locations[i];
        var latlng = new google.maps.LatLng(p[1], p[2]);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[0]
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
    }

    map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

【问题讨论】：

标签： google-maps-api-3 geolocation

【解决方案1】：

这是一个简单的地理定位示例。只需在创建地图对象后的任意位置添加地理位置代码。如果用户不允许地理定位，地图将以默认位置/缩放级别显示。

function initialize() {

    var mapOptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(0,0)
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // Geolocation code
    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function (position) {

            map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
            map.setZoom(16);
        });
    }
}

initialize();

JSFiddle demo

【讨论】：