Вопросы Теги

Google Maps v3: потребни се повеќе обележувачи што можат да се влечат за ажурирање на полињата за внесување на HTML

Работам на проект користејќи Google Maps v3 што ќе им овозможи на корисниците да влечат и испуштаат случајно поставени маркери (количина, координати и етикети генерирани со php).

I би сакале ширината и должината на поместените маркери да ги ажурираат полињата за внесување 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>
5
задан NeonDevil 28 June 2011 в 17:42
поделиться