Question

我有一个包含数百个标记的谷歌地图。我希望地图以用户位置为中心 - 最好是点击按钮。目前，我以页面加载为中心，但有一个问题 - 当它以位置为中心时清除所有标记。我认为这是因为我正在调用脚本。地图容器的id是'map4'。

如何在不清除现有标记的情况下使此脚本正常工作？任何帮助将不胜感激。

<script>
var map;    // Google map object

// Initialize and display a google map
function Init()
{
    // HTML5/W3C Geolocation
    if ( navigator.geolocation )
        navigator.geolocation.getCurrentPosition( UserLocation );
    // Default to Sherman Oaks
    else
        ShowLocation( 38.8951, -77.0367, "Sherman Oaks, CA" );
}

// Callback function for asynchronous call to HTML5 geolocation
function UserLocation( position )
{
    ShowLocation( position.coords.latitude, position.coords.longitude, "This is your Location" );
}

// Display a map centered at the specified coordinate with a marker and InfoWindow.
function ShowLocation( lat, lng, title )
{
    // Create a Google coordinate object for where to center the map
    var latlng = new google.maps.LatLng( lat, lng );    

    // Map options for how to display the Google map
    var mapOptions = { zoom: 12, center: latlng  };

    // Show the Google map in the div with the attribute id 'map-canvas'.
    map = new google.maps.Map(document.getElementById('map4'), mapOptions);

    // Place a Google Marker at the same location as the map center 
    // When you hover over the marker, it will display the title
    var marker = new google.maps.Marker( { 
        position: latlng,     
        map: map,      
        title: title
    });

    // Create an InfoWindow for the marker
    var contentString = "<b>" + title + "</b>"; // HTML text to display in the InfoWindow
    var infowindow = new google.maps.InfoWindow( { content: contentString } );

    // Set event to display the InfoWindow anchored to the marker when the marker is clicked.
    google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
}

// Call the method 'Init()' to display the google map when the web page is displayed ( load event )
google.maps.event.addDomListener( window, 'load', Init );

</script>

Answer 1

如果我理解正确，您似乎已经创建了一个地图，填充了标记，然后您想要将VERY SAME地图居中。如果是这种情况，则需要修改ShowLocation()函数。原因是这一行

map = new google.maps.Map(document.getElementById('map4'), mapOptions);

创建一个全新的map实例（如果提供的地图容器相同，则替换该容器中的任何现有地图）。

所以你的问题是你正在创建一个新地图并使其居中，而不只是将旧地图居中。

只需修改居中功能即可使用现有地图：

function ShowLocation( lat, lng, title , map)
{
    // Create a Google coordinate object for where to center the map
    var latlng = new google.maps.LatLng( lat, lng);    

    //Working with existing map instead of creating a new one
    map.setCenter(latlng);
    map.setZoom(12);

    // Place a Google Marker at the same location as the map center 
    // When you hover over the marker, it will display the title
    var marker = new google.maps.Marker( { 
        position: latlng,     
        map: map,      
        title: title
    });

    // Create an InfoWindow for the marker
    var contentString = "<b>" + title + "</b>"; // HTML text to display in the InfoWindow
    var infowindow = new google.maps.InfoWindow( { content: contentString } );

    // Set event to display the InfoWindow anchored to the marker when the marker is clicked.
    google.maps.event.addListener( marker, 'click', function() { infowindow.open( map, marker ); });
}

调用ShowLocation函数时，第4个参数是添加标记时创建的google.maps.Map对象。你只能通过知道它包含元素的id来引用地图，你需要它的参考。

谷歌地图 - 以用户位置为中心

1 个答案: