Размещение маркера на картах Google

Итак, я готовлю страницу с картой Google, и есть две формы: широта и долгота, а также кнопка отправки.Размещение маркера на картах Google

При вводе долготы и широты карта центрируется в нужное место и помещает там маркер.

Проблема, с которой я столкнулся, заключается в том, что всякий раз, когда я помещаю новый lat/long, старый маркер не пойдет. Итак, в основном, если введен первый лат/длинный: 10/12, он будет центрировать это и поместить там маркер, но когда я введу второй лат/длинный (скажем): 11/12, он будет центрировать это тоже и место маркер там также, в то время как первый не удаляется.

Я хочу, чтобы страница была всякий раз, когда новый вводил в форму только тот, который в форме не отображает старые маркеры.

Вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<title>Google Maps</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    html, body, #map-canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
    var map; 
    function initialize() { 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(11.6667,76.2667), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    function pan() { 
     var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value); 
     map.setCenter(panPoint) 
     var marker = new google.maps.Marker({ 
       map: map, 
       position: panPoint, 
      }); 

    } 
</script> 
</head> 
<body> 
Latitude:<input type="text" id="lat" > 
Longitude:<input type="text" id="lng"> 
<input type="button" value="updateCenter" onclick="pan()" /> 


<div id="map-canvas"></div> 
</body> 
</html>

Некоторая помощь будет полезна

источник

2013-04-30 rahul888

использовать этот код

<!DOCTYPE html> 
<html> 
<head> 
<title>Google Maps</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
html, body, #map-canvas { 
margin: 0; 
padding: 0; 
height: 100%; 
} 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 
    var map; 
    var markersArray=[]; 
    function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(11.6667,76.2667), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
function pan() { 
deleteOverlays(); 
    var panPoint = new google.maps.LatLng(document.getElementById("lat").value,  document.getElementById("lng").value); 
    map.setCenter(panPoint) 
    var marker = new google.maps.Marker({ 
      map: map, 
      position: panPoint, 
     }); 
     markersArray.push(marker); 

} 

function deleteOverlays() { 
    if (markersArray) { 
     for (i in markersArray) { 
     markersArray[i].setMap(null); 
     } 
    markersArray.length = 0; 
    } 
} 
</script> 
</head> 
<body> 
Latitude:<input type="text" id="lat" > 
Longitude:<input type="text" id="lng"> 
<input type="button" value="updateCenter" onclick="pan()" /> 


<div id="map-canvas"></div> 
</body> 
</html>

источник

2013-04-30 11:25:47

Вам нужно очистить маркеры каждый раз для того, чтобы сделать это. Чтобы очистить маркер, сохраните маркер как глобальную переменную, например.

function pan() { 
    try{ 
     marker.setMap(null);//clear marker 
    } 
    catch(err){ 
    } 

    var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value); 
    map.setCenter(panPoint) 
    //declare marker as global variable 
    marker = new google.maps.Marker({ 
      map: map, 
      position: panPoint, 
     }); 

}

Это должно сделать трюк.

источник

2013-04-30 11:22:10 specialscope

, что сделал трюк спасибо. – rahul888

В сковороду функции перед добавлением новых маркеров, попробуйте удалить все существующие маркера Google Maps API v3: How to remove all markers?

источник

2013-04-30 11:24:17 LS05

Размещение маркера на картах Google

ответ

Смежные вопросы