如何从地图中获取所有坐标?

时间:2011-05-22 05:55:25

标签: google-maps google-maps-api-3 google-maps-markers

这是我的google maps api项目:

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var rio = new google.maps.LatLng(-22.894125,-43.199358);
  var map;

  function initialize() {
    var myOptions = {
      zoom: 10,
      center: rio,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(marker, 'click', toggleBounce);
    }

    function addMarkerAtCenter() {
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        draggable:true,
        animation: google.maps.Animation.DROP,
        map: map
    });
    }

  function toggleBounce() {

    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0px;">
  <center><input type="button" value="Adicionar Marcador" onclick="addMarkerAtCenter()"/></center>
  <center><div id="map_canvas" style="width:100%; height:100%"></div></center>
</body>

如何在添加多个标记后获取它们并保存到xml中?

感谢

2 个答案:

答案 0 :(得分:0)

我很确定它不会那样工作。标记知道它们属于哪个地图,但不是相反。通常这样做的方法是使用数组,每次向地图添加标记时,也会将其添加到数组中。每当你想操纵你的标记时,你就会运行那个数组并完成需要做的事情:)

答案 1 :(得分:0)

你可能追求的(如果你输出的东西是XML)只是添加的每个标记的坐标,而不是下面的整个google标记对象是如何获取坐标并将它们(严重)序列化为XML的示例。

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var rio = new google.maps.LatLng(-22.894125,-43.199358);
  var map;

//you probably just want to store coordinates of markers
var coords = []

  function initialize() {
    var myOptions = {
      zoom: 10,
      center: rio,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   // google.maps.event.addListener(marker, 'click', toggleBounce);
    }

    function addMarkerAtCenter() {
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        draggable:true,
        animation: google.maps.Animation.DROP,
        map: map
    });

    //get the coordinates of the marker
    pos = marker.getPosition();
    //save the coordinates
    coords.push({lat:pos.lat(), lng:pos.lng()})
    }


  function toggleBounce() {

    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
  //a primitive serialize function - add something more sophisticated
function serialize(arr) {
xml = "<markers>";
for (i=0;i<arr.length;i++) {
xml += "<marker>";
for(var prop in arr[i]) {
    if(arr[i].hasOwnProperty(prop))
       xml += "<" + prop +">" + arr[i][prop] + "</" + prop +">";
}
xml += "</marker>";
}


xml +="</markers>";
//do something with the result
alert(xml);
}
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0px;">
  <center><input type="button" value="Adicionar Marcador" onclick="addMarkerAtCenter()"/>  <input type=button onClick="javascript:serialize(coords)" value="To XML"></center>
  <center><div id="map_canvas" style="width:100%; height:100%"></div></center>

</body>