Javascript GoogleMapsV3：需要多个可拖动的标记来更新HTML输入字段_Javascript_Google Maps_Google Maps Api 3_Google Maps Markers

Javascript GoogleMapsV3：需要多个可拖动的标记来更新HTML输入字段

javascript google-maps google-maps-api-3

Javascript GoogleMapsV3：需要多个可拖动的标记来更新HTML输入字段,javascript,google-maps,google-maps-api-3,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,我正在使用GoogleMapsV3开发一个项目，它允许用户拖放随机放置的标记（数量、坐标和用php生成的标签）我想移动标记的纬度和经度来更新页面上的html输入字段。不幸的是，我对js了解不够，无法通过使用数组和/或“变量”以有效的方式为每个标记赋予唯一的标识以下是我迄今为止的代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, use

我正在使用GoogleMapsV3开发一个项目，它允许用户拖放随机放置的标记（数量、坐标和用php生成的标签）

我想移动标记的纬度和经度来更新页面上的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>


html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
函数初始化（）
{
var-latlng=newgoogle.maps.latlng（39.3939，-119.861）；
变量myOptions=
{
缩放：17，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
//设置边界坐标
var BorderCoords=
[
新google.maps.LatLng（39.3952726888，-119.85922848），
新google.maps.LatLng（39.3925273112，-119.85922848），
新google.maps.LatLng（39.3925273112，-119.86277152），
新google.maps.LatLng（39.3952726888，-119.86277152）
];      
//界定边界
Border=新建google.maps.Polygon
({
地图：地图，
路径：边界坐标，
strokeColor:#FF0000“，
笔划不透明度：0.8，
冲程重量：2
});
//设置标记坐标
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]
];
//设置标记属性
var MarkerProp=
[
[“红色”、“A”]，
[“红色”、“B”]，
[“红色”、“C”]，
[“蓝色”、“A”]，
[“蓝色”、“B”]，
[“蓝色”、“C”]
];
//定义标记坐标
对于（变量i=0；i

JavaScript的一个优点是，您可以动态地分配对象字段。您可以做的一件事是给每个标记一个名称或id。要做到这一点，您只需说：

marker.id = whatever;

然后，通过调用marker.id，您可以像获取任何属性一样获取该属性的值

这可能是给他们唯一id的最有效的方法。在dragend的eventhandler中，您只需执行和if-then-else来检查它是哪个标记，并更新相关的输入字段。

以下是答案。基于标记属性和访问输入字段id定义自定义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>


html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
函数初始化（）
{
var-latlng=newgoogle.maps.latlng（39.3939，-119.861）；
变量myOptions=
{
缩放：17，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.SATELLITE
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
//设置边界坐标
var BorderCoords=
[
新google.maps.LatLng（39.3952726888，-119.85922848），
新google.maps.LatLng（39.3925273112，-119.85922848），
新google.maps.LatLng（39.3925273112，-119.86277152），
新google.maps.LatLng（39.3952726888，-119.86277152）
];      
//界定边界
Border=新建google.maps.Polygon
({
地图：地图，
路径：边界坐标，
strokeColor:#FF0000“，
笔划不透明度：0.8，
冲程重量：2
});
//设置标记坐标
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]
];
//设置标记属性
var MarkerProp=
[
[“红色”、“A”和]，
[“红色”、“B”]，
[“红色”、“C”]，
[“蓝色”、“A”]，
[“蓝色”、“B”]，
[“蓝色”、“C”]
];
//定义标记坐标
对于（变量i=0；i