Блог

У меня есть карта Google с сотнями маркеров. Я бы хотел, чтобы карта была сосредоточена на местоположении пользователя — желательно с помощью нажатия кнопки. В настоящее время он центрируется при загрузке страницы, но с одной проблемой — он удаляет все маркеры, когда он центрируется по местоположению. Я предполагаю, что это из-за того, как я вызываю скрипт. Идентификатор контейнера карты — ‘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>
  

Если я вас правильно понимаю, кажется, вы уже создали карту, заполненную маркерами, А ЗАТЕМ хотите центрировать ТУ ЖЕ САМУЮ карту. Если это так, ваша ShowLocation() функция должна быть изменена. Причина в том, что эта строка

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

создает новый новый экземпляр map (заменяя любую существующую карту в этом контейнере, если предоставленный контейнер 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 , вам нужна ссылка на нее.