在 Google 地图中放置标记答案

【问题标题】：Placing a marker in Google maps在 Google 地图中放置标记
【发布时间】：2013-04-24 06:58:32
【问题描述】：

所以我正在准备一个页面，该页面有一个谷歌地图，有两种形式，即 latitude 和 longitude ，以及一个提交按钮。

输入经度和纬度后，地图会以所需位置为中心，并在那里放置一个标记。

我面临的问题是，每当我放置新的 lat/long 时，旧的标记都不会消失。所以基本上如果输入第一个 lat/long : 10/12 ，它会居中并在那里放置一个标记，但是当我输入第二个 lat/long （比如）： 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>

一些帮助会很有用

【问题讨论】：

标签： javascript html google-maps

【解决方案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,
        });

 }

这应该可以解决问题。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：