Question

所以我正在准备一个包含Google Map的页面，有两种形式，即纬度和经度，以及一个提交按钮。

在输入经度和纬度时，地图将居中于所需位置，并在此处放置标记。

我面临的问题是每当我换上一个新的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>

一些帮助会很有用

Answer 1

每次都需要清除标记才能执行此操作。清除标记保持标记为全局变量，例如

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,
        });

 }

这应该可以解决问题。

Answer 2

在添加新标记之前的平移功能中，尝试删除所有当前标记Google Maps API v3: How to remove all markers?

Answer 3

使用此代码

<!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>

在Google地图中放置标记

3 个答案: