Question

我试图在同一个html页面中创建地理编码功能并反转地理编码功能。我只需要为这些功能使用一个标记。下面的代码有效，但每次调用函数时，我都会创建一个新标记。我需要的只是在整个地图中控制的一个标记

<!DOCTYPE html>
 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
     html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
  }
</style>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.042145, -4.997128);
 var mapOptions = {
zoom: 5,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      marker = new google.maps.Marker({
      map: map,
      position: latlng,
      draggable : true
  });
google.maps.event.addListener(marker,"dragend",function(){

lat = marker.getPosition().lat();
 document.getElementById("latitude").value = lat ;
lg= marker.getPosition().lng();
 document.getElementById("longitude").value = lg ;
});
   }

function codeAddress() {
var address = document.getElementById('address').value;
var lg;
var lat;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
  map.setCenter(results[0].geometry.location);

  map.setZoom(16);

   var lat = results[0].geometry.location.lat();
   document.getElementById('latitude').value = lat;  

   var lg = results[0].geometry.location.lng();
   document.getElementById('longitude').value = lg;


      marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location,
      draggable : true
  });
google.maps.event.addListener(marker,"dragend",function(){

lat = marker.getPosition().lat();
document.getElementById("latitude").value = lat ;
lg= marker.getPosition().lng();
document.getElementById("longitude").value = lg ;

});
} 

  else {
  alert('Geocode was not successful for the following reason: ' + status);
}
});
}

function codeLatLng() {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
  if (results[1]) {
    map.setCenter(latlng);
    map.setZoom(11);
     marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    document.getElementById("adresse").value =  results[1].formatted_address;

  } else {
    alert('No results found');
  }
} else {
  alert('Geocoder failed due to: ' + status);
}
});
}


google.maps.event.addDomListener(window, 'load', initialize);

 </script>
 </head>
 <body>
 <div id="panel">
  <input id="address" type="textbox">
  <input id="latitude" type="textbox" >
  <input id="longitude" type="textbox" >
  <input type="button" value="Geocode" onclick="codeAddress()">
  <input id="latlng" type "textbox" > 
        <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
  <input id="adresse" type "textbox" > 

</div>
<div id="map-canvas"></div>
</body>
</html>

Answer 1

不是每次都创建一个标记，而是创建一次，将其存储在全局变量中，然后检查该变量以查看标记是否已存在。

如果没有，则创建它，如果是，则只需在全局变量上调用setPosition(lat,lng)。

编辑：此答案故意不包含任何代码，但准确描述了如何解决问题

Answer 2

在codeAddress()函数中，您需要检查marker是否存在，如果不存在则创建它，如果不存在，则只需设置它的位置。

为此，您首先需要为marker声明一个全局变量，方法与目前geocoder和map的方式相同。

然后将创建marker的代码块修改为以下内容：

if(marker){
    marker.setPosition(results[0].geometry.location);
}else{
    marker=new google.maps.Marker({
        map:map,
        position:results[0].geometry.location,
        draggable:true
    });
    google.maps.event.addListener(marker,"dragend",function(){
        lat=marker.getPosition().lat();
        document.getElementById("latitude").value=lat;
        lg=marker.getPosition().lng();
        document.getElementById("longitude").value=lg ;
    });
}

编辑：您还需要在codeLatLng()函数中执行类似操作。

ASIDE：顺便提一句，您应该删除dragend功能中标记的initialize功能。

如何将一个标记用于多个功能

2 个答案: