无法将 Google 地图标记对象保存到隐藏的 html 字段中的数组

Question

我按照示例 here 创建了一组标记，这些标记放在我的网页上的 Google 地图上。

在过去的几个小时里，我在开放网络和 SO 上都查看了很多示例，但我没有尝试过任何工作。

我需要：

1) 将 Google 地图标记对象的 Javascript 数组保存在隐藏的输入字段中

2) 然后检索隐藏输入字段的“值”并将其转换回标记对象数组，以便我可以从地图中删除这些标记

这是我的代码，其中一些基于上面的 Google 地图示例：

 theMarkersArray = new Array();
 for(var i = 0; i < 5; i++)
 {
    marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image,
      shape: shape,
      title: "aMarker",
      zIndex: 1000});

      theMarkersArray.push(marker);
 }

 theMarkersArrayField = document.getElementById('markersArray');

 // I'm using Firefox v28.0, the following line of code halts code executing,
 // I'm thinking that 'JSON.stringify()' is not defined for FF 28.0..?)

 //theMarkersArrayField.value = JSON.stringify(theMarkersArray); 

   // this executes, but I don't think it's saving the array of Marker objects 
   // correctly     
 theMarkersArrayField.value = theMarkersArray;

 alert("the theMarkersArray is: "+ theMarkersArray);

当我使用 alert() 显示 MarkersArrayField.value 的内容时，它看起来像这样：

   [object Object],[object Object],[object Object],[object Object],[object Object]

当我尝试使用 eval() 或 JSON.parse() 将 MarkersArrayField.value 转换回 Javascript 数组时，都失败了。

 var theMarkersArrayField = document.getElementById('markersArray');

     // DOES NOT WORK
 //var theMarkersArray = JSON.parse(theMarkersArrayField.value);

       // THIS doesn't work either
 //var theMarkersArray = eval(theMarkersArrayField.value);


    // IS NOT AN ARRAY OF 'Marker' objects, just a text string it seems...?
 var theMarkersArray = document.getElementById('markersArray').value;

    // RETURNS '79' INSTEAD OF 5 (only 5 markers were stored in the array, not 79) --
    // 79 is the count of characters in:
 // [object Object],[object Object],[object Object],[object Object],[object Object] 
 var numMarkers = theMarkersArray.length;

我需要将一个 Marker 对象数组存储在一个数组中，然后将该数组保存在页面上的隐藏字段中，然后从隐藏字段中检索它，将其转换回 Marker 对象数组 - 我是什么不见了？

Answer 1

我用这段代码创建了一个商店定位器

   myData = JSON = $.parseJSON(msg);

                var dist = [];//Array to hold distances


                              var geocoder =  new google.maps.Geocoder();
                                    geocoder.geocode( { 'address': ''+origin2+', us'}, function(results, status) {
                                          if (status == google.maps.GeocoderStatus.OK) {

                                        myLatitud = results[0].geometry.location.lat();
                                        myLongitud = results[0].geometry.location.lng();

                                        origin1 = new google.maps.LatLng(myLatitud, myLongitud);

                                         for (var i = 0; i < myData.length; i++){
                                        var point = new google.maps.LatLng(myData[i].latitud,myData[i].longitud);
                                        var distance = (google.maps.geometry.spherical.computeDistanceBetween(origin1, point)/1000).toFixed(2);
                                        dist.push(distance);
                                       }  


                                   var map = new google.maps.Map(document.getElementById('map-canvas'), {
                                      zoom: 11,
                                      center: new google.maps.LatLng(myLatitud, myLongitud),
                                      mapTypeId: google.maps.MapTypeId.ROADMAP
                                    });



                                  var infowindow = new google.maps.InfoWindow();

                                  var marker;

                                   marker = new google.maps.Marker({
                                        position: new google.maps.LatLng(myLatitud, myLongitud),//25.7889689 -80.22643929999998 
                                        //position: new google.maps.LatLng(25.7889689,-80.22643929999998),
                                        map: map,
                                        icon : originIcon
                                     });

                                   google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                                    return function() {
                                                      // infowindow.setContent(myData[i].store);
                                                      //infowindow.open(map, marker);
                                                        map.setZoom(10);
                                                      map.setCenter(marker.getPosition());
                                                    }
                                                  })(marker, i));



                                    map.setCenter(marker.getPosition());  
                                    map.setZoom(10);

                                    millas = params['millas'];

                                    var result = [];//Array of definitive stores

                                    for ( var i = 0; i < dist.length; i++) {

                                        var kilometro = dist[i];
                                        if (millas == "1" && kilometro < 8) {

                                             marker = new google.maps.Marker({
                                                position: new google.maps.LatLng(myData[i].latitud, myData[i].longitud),
                                                map: map,
                                                 icon : destinationIcon
                                             });

                                              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                                    return function() {
                                                      infowindow.setContent(myData[i].store);
                                                      infowindow.open(map, marker);
                                                      map.setZoom(12);
                                                      map.setCenter(marker.getPosition());

                                                    }
                                                  })(marker, i));

                                        }  

Answer 2

• 演示： http://jsfiddle.net/drA5k/

        function addMarker(location) {
        for(var i = 0; i < 5; i++) {
            var marker = new google.maps.Marker({
                position: location,
                map: map
            });
            // of course if you need only the position you can avoid looping and just get 
            // marker.position.k and marker.position.A , this example dimostrate 
            // how to iterate and get data from the object and build a custom array...
            for (var o in marker) {
                if (typeof marker[o] === 'object') {
                    if (o === 'position') {
                        var position = marker[o];
                        markers.push({'k' : position.k, 'A' : position.A});
                    }
                }
            }
        }
        document.getElementById('markersArray').value = JSON.stringify(markers);
        }