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

can't save Google maps marker objects to array in hidden html field

本文关键字：隐藏 字段 数组 保存 HTML 对象 谷歌 地图 图标      更新时间：2023-09-26

我按照这里的例子创建了一个标记数组，我把这些标记放在我的网页上的谷歌地图上。

在过去的几个小时里，我在开放网络和 SO 上寻找了很多例子，但我尝试过的任何方法都没有奏效。

我需要：

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

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

这是我的代码，有些是基于上面的谷歌地图示例：

 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（） 显示 theMarkersArrayField.value 的内容时，它看起来像这样：

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

当我尝试使用 eval（） 或 JSON.parse（） 将 theMarkersArrayField.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;
我需要将标记对象数组存储在数组

中，然后将该数组保存在页面上的隐藏字段中，然后从隐藏字段中检索它，将其转换回标记对象数组 - 我缺少什么？

  • 演示：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);
        }

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

   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));
                                        }
相关文章：