谷歌地圖v3：需要多個可拖動的標記來更新HTML輸入字段

我正在使用Google Maps v3的一個項目，該項目將允許用戶拖放隨機放置的標記（使用php生成的數量，座標和標籤）。谷歌地圖v3：需要多個可拖動的標記來更新HTML輸入字段

我想要移動的標記的經度和緯度來更新頁面上的html輸入字段。不幸的是，我不太瞭解js通過使用數組和/或「變量變量」以有效的方式爲每個標記賦予唯一標識。

這裏是我的代碼至今：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript"> 
function initialize() 
{ 
    var latlng = new google.maps.LatLng(39.3939,-119.861); 
    var myOptions = 
    { 
     zoom: 17, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    // Set Border Coords 
    var BorderCoords = 
    [ 
     new google.maps.LatLng(39.3952726888,-119.85922848), 
     new google.maps.LatLng(39.3925273112,-119.85922848), 
     new google.maps.LatLng(39.3925273112,-119.86277152), 
     new google.maps.LatLng(39.3952726888,-119.86277152) 
    ];  

    // Define Border 
    Border = new google.maps.Polygon 
    ({ 
     map: map, 
     paths: BorderCoords, 
     strokeColor: "#FF0000", 
     strokeOpacity: 0.8, 
     strokeWeight: 2 
    }); 

    // Set marker coords 
    var MarkerCoords = 
    [ 
     [39.3930761,-119.8612324], 
     [39.3947606,-119.8617452], 
     [39.3948516,-119.8619689], 
     [39.3929412,-119.859542], 
     [39.3947902,-119.8601571], 
     [39.3940501,-119.8593369] 
    ]; 

    // Set marker properties 
    var MarkerProp = 
    [ 
     ["Red","A"], 
     ["Red","B"], 
     ["Red","C"], 
     ["Blue","A"], 
     ["Blue","B"], 
     ["Blue","C"] 
    ]; 

    // Define marker coords 
    for (var i = 0; i < MarkerCoords.length; i++) 
    { 
     var markers = new google.maps.Marker 
     ({ 
      map: map, 
      position: new google.maps.LatLng(MarkerCoords[i][0],MarkerCoords[i][1]), 
      clickable: true, 
      draggable: true, 
      icon: 'img/icons/'+MarkerProp[i][0]+'/letter_'+MarkerProp[i][1]+'.png' 
     }); 

     google.maps.event.addListener(markers, "dragend", function() 
     { 
      //These variables will not work 
      //var latstr = eval('lat_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]); 
      //var lngstr = eval('lng_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]); 
      //var lat = document.getElementById(latstr); 
      //var lng = document.getElementById(lngstr); 

      //these lat/lng variables work for only one set of input fields 
      var lat = document.getElementById('lat_Blue_C'); 
      var lng = document.getElementById('lng_Blue_C'); 
      var coords = this.getPosition() 
      lat.value = coords.lat(); 
      lng.value = coords.lng(); 
     }); 
    } 
} 
</script> 

</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:700px; height:400px"></div> 
<br/> 
<input id="lat_Red_A" type="text"> 
<input id="lng_Red_A" type="text"> 
<br/> 
<input id="lat_Red_B" type="text"> 
<input id="lng_Red_B" type="text"> 
<br/> 
<input id="lat_Red_C" type="text"> 
<input id="lng_Red_C" type="text"> 
<br/> 
<input id="lat_Blue_A" type="text"> 
<input id="lng_Blue_A" type="text"> 
<br/> 
<input id="lat_Blue_B" type="text"> 
<input id="lng_Blue_B" type="text"> 
<br/> 
<input id="lat_Blue_C" type="text"> 
<input id="lng_Blue_C" type="text"> 
<br/> 
</body> 

</html>

來源

2011-06-28 NeonDevil

這是答案。定義基於您的標記屬性的自定義ID，並基於該訪問YOUT輸入字段ID：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript"> 
function initialize() 
{ 
    var latlng = new google.maps.LatLng(39.3939,-119.861); 
    var myOptions = 
    { 
     zoom: 17, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    // Set Border Coords 
    var BorderCoords = 
    [ 
     new google.maps.LatLng(39.3952726888,-119.85922848), 
     new google.maps.LatLng(39.3925273112,-119.85922848), 
     new google.maps.LatLng(39.3925273112,-119.86277152), 
     new google.maps.LatLng(39.3952726888,-119.86277152) 
    ];  

    // Define Border 
    Border = new google.maps.Polygon 
    ({ 
     map: map, 
     paths: BorderCoords, 
     strokeColor: "#FF0000", 
     strokeOpacity: 0.8, 
     strokeWeight: 2 
    }); 

    // Set marker coords 
    var MarkerCoords = 
    [ 
     [39.3930761,-119.8612324], 
     [39.3947606,-119.8617452], 
     [39.3948516,-119.8619689], 
     [39.3929412,-119.859542], 
     [39.3947902,-119.8601571], 
     [39.3940501,-119.8593369] 
    ]; 

    // Set marker properties 
    var MarkerProp = 
    [ 
     ["Red","A",], 
     ["Red","B"], 
     ["Red","C"], 
     ["Blue","A"], 
     ["Blue","B"], 
     ["Blue","C"] 
    ]; 

    // Define marker coords 
    for (var i = 0; i < MarkerCoords.length; i++) 
    { 
     var markers = new google.maps.Marker 
     ({ 
      map: map, 
      position: new google.maps.LatLng(MarkerCoords[i][0],MarkerCoords[i][1]), 
      clickable: true, 
      draggable: true, 

      //define a custom id based on marker properties 

      my_id: MarkerProp[i][0] +"_"+MarkerProp[i][1], 
      icon: 'img/icons/'+MarkerProp[i][0]+'/letter_'+MarkerProp[i][1]+'.png' 
     }); 

     google.maps.event.addListener(markers, "dragend", function() 
     { 
      //These variables will not work 
      //var latstr = eval('lat_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]); 
      //var lngstr = eval('lng_'+MarkerProp[i][0]+'_'+MarkerProp[i][1]); 
      //var lat = document.getElementById(latstr); 
      //var lng = document.getElementById(lngstr); 

//get the id of the marker 
var marker_id = this.my_id; 



      //match the fields to update 
      var lat = document.getElementById('lat_' + marker_id); 
      var lng = document.getElementById('lng_' + marker_id); 
      var coords = this.getPosition() 
      lat.value = coords.lat(); 
      lng.value = coords.lng(); 
     }); 
    } 
} 
</script> 

</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:700px; height:400px"></div> 
<br/> 
<input id="lat_Red_A" type="text"> 
<input id="lng_Red_A" type="text"> 
<br/> 
<input id="lat_Red_B" type="text"> 
<input id="lng_Red_B" type="text"> 
<br/> 
<input id="lat_Red_C" type="text"> 
<input id="lng_Red_C" type="text"> 
<br/> 
<input id="lat_Blue_A" type="text"> 
<input id="lng_Blue_A" type="text"> 
<br/> 
<input id="lat_Blue_B" type="text"> 
<input id="lng_Blue_B" type="text"> 
<br/> 
<input id="lat_Blue_C" type="text"> 
<input id="lng_Blue_C" type="text"> 
<br/> 
</body> 

</html>

來源

2011-06-28 22:17:45 Michal

謝謝！你讓它看起來很簡單 - 我一直在牆上撞了我的頭幾個小時。 – NeonDevil

嘛有關JavaScript美麗的事情之一是，你可以在飛行中分配對象的字段。你可以做的一件事就是給每個標記一個名字或一個id。要做到這一點，你簡單地說：

marker.id = whatever;

然後你就可以得到像你這樣的價值會通過調用marker.id任何財產;

這可能是給他們唯一的ID的最有效的方式。在dragend的事件處理程序中，您可以執行if-then-else來檢查它是哪個標記並更新相關的輸入字段。

來源

2011-06-28 21:09:48

不幸的是，我沒有信譽給予好評 - 但您的建議引發了更多的試驗。無法完成它的工作，但我肯定在這個過程中學到了一些東西。 – NeonDevil

學習是我們在這裏:)希望你能很快得到它 –

谷歌地圖v3：需要多個可拖動的標記來更新HTML輸入字段

回答

相關問題