我怎样才能使用一个标记多个功能 [英] How can I use one marker for multiple functions

问题描述

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

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> 
< meta charset =utf-8> 
< title>地理编码服务< / title> 
< style> 
 html，body，＃map-canvas {
 height：100％; 
 margin：0px; 
 padding：0px 
} 
 #panel {
 position：absolute; 
 top：5px; 
剩下：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; 
函数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（）{
 $ b $ lat = marker.getPosition（）。lat（）; 
 document.getElementById（ latitude）。value = lat; 
 lg = marker.getPosition（）。lng（）; 
 document.getElementById（longitude）.value = lg; 
}）; 
} 
 
函数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; 
 
}）; 
} 
 
其他{
 alert（'由于以下原因，Geocode不成功：'' + sta tus）; 
} 
}）; 
 
 
函数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（ '未找到结果'）; 
} 
} else {
 alert（'Geocoder failed because：'+ status）; 
} 
}）; 
} 
 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script> 
< / head> 
< body> 
< div id =panel> 
< input id =addresstype =textbox> 
< input id =latitudetype =textbox> 
< input id =longitudetype =textbox> 
< input type =buttonvalue =Geocodeonclick =codeAddress（）> 
< input id =latlngtypetextbox> 
< input type =buttonvalue =Reverse Geocodeonclick =codeLatLng（）> 
< input id =adressetypetextbox> 
 
< / div> 
< div id =map-canvas>< / div> 
< / body> 
< / html> 
  

解决方案

在 codeAddress 函数，您需要检查 marker 是否存在，然后在不存在的情况下创建它，或者如果不存在，则简单地设置它的位置。

要做到这一点，您首先需要用与当前相同的方式为 marker 声明一个全局变量为 geocoder 和 map 。

然后修改

  if（标记） marker）{
 marker.setPosition（results [0] .geometry.location）; 
} else {
 marker = new google.maps.Marker（{
 map：map，
 position：results [0] .geometry.location，
 draggable：真
}）; 
 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 函数。

I'm trying to make a geocoding function and reverse geocoding function in the same html page. I need to use just one marker for these functions. The code below works but every time I call a function, I create a new marker. What I need is just one marker to control in the whole map

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

解决方案

Within your codeAddress() function you'll need to check if marker exists and then create it if it doesn't or simply set it's position if it doesn't.

To do this, you'll first need to declare a global variable for marker in the same way you currently do for geocoder and map.

Then modify the block of code that creates the marker to the following:

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

EDIT: You'll also need to do something similar within your codeLatLng() function.

ASIDE: Incidentally, you should remove the marker's dragend function within your initialize function.

这篇关于我怎样才能使用一个标记多个功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！