在Google地圖中放置標記

因此，我正在準備一個包含Google地圖的頁面，並且有兩種形式，即經緯度和提交按鈕。在Google地圖中放置標記

在輸入經度和緯度時，地圖將居中到所需位置並在其中放置標記。

我面臨的問題是，每當我把一個新的經緯度，舊的標記不會去。所以基本上如果輸入第一個緯度/長度：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 2013-04-30 11:27:59

在平移功能添加新的標誌之前，嘗試刪除所有本標記Google Maps API v3: How to remove all markers?

來源

2013-04-30 11:24:17 LS05

在Google地圖中放置標記

回答

相關問題