在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地图中放置标记

回答

相关问题