Google Maps v3：HTML入力フィールドを更新するために複数のドラッグ可能なマーカーが必要

Google Map v3を使用して、ランダムに配置されたマーカー（量、座標、およびphpで生成されたラベル）をドラッグ＆ドロップできるプロジェクトに取り掛かりました。Google Maps v3：HTML入力フィールドを更新するために複数のドラッグ可能なマーカーが必要

移動したマーカーの緯度と経度で、ページのhtml入力フィールドを更新したいと思います。残念ながら、配列や変数変数を使って効率的に各マーカーに一意のIDを与えるために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の程度美しいものの一つは、あなたがその場でオブジェクトフィールドを割り当てることができるということです。あなたができることの1つは、各マーカーに名前またはIDを与えることです。あなたは、単に言うことを実行します。

marker.id = whatever;

が、あなたはあなたのようなことの価値を得ることができるだろうmarker.idを呼び出すことにより、任意のプロパティ。

これは、おそらく一意のIDを与える最も効率的な方法です。 dragendのイベントハンドラーでは、ifとthen-then-elseを実行して、それがどのマーカーであるかを確認し、関連する入力フィールドを更新することができます。

出典

2011-06-28 21:09:48

残念ながら、私はupvoteするの評判を持っていない - しかし、あなたの提案は、より多くの実験につながりました。それはうまく動作しませんでしたが、私は確かにその過程でいくつかのことを学びました。 – NeonDevil

学習は私たちがここにいるのです:)あなたはすぐにそれを稼ぐことを望みます –

Google Maps v3：HTML入力フィールドを更新するために複数のドラッグ可能なマーカーが必要

答えて

関連する問題