在Google地圖中放置標記

Question

因此，我正在准備一個包含Google Map的頁面，它有兩種形式，即緯度和經度，以及一個提交按鈕。

輸入經度和緯度后，地圖便會以所需位置為中心並在其中放置標記。

我面臨的問題是，每當我放置新的經/緯度時，舊標記就不會消失。 因此，基本上，如果輸入第一個緯度/經度：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：如何刪除所有標記？

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 個解決方案

解決方案1
2 2013-04-30 11:22:10

解決方案2
0 2013-04-30 11:24:17

解決方案3
0 已采納 2013-04-30 11:25:47

在Google地圖中放置標記

問題描述

3 個解決方案

解決方案1 2 2013-04-30 11:22:10

解決方案2 0 2013-04-30 11:24:17

解決方案3 0 已采納 2013-04-30 11:25:47

解決方案1
2 2013-04-30 11:22:10

解決方案2
0 2013-04-30 11:24:17

解決方案3
0 已采納 2013-04-30 11:25:47