尝试将值从数组传递到Google Maps Object时出错

时间:2011-07-10 20:37:24

标签: php javascript arrays json google-maps-api-3

我在页面上使用wordpress post数据设置一些json,然后将json传递给某些循环浏览并将标记添加到地图的JS。我很接近它的工作,只需要找出最后一部分。

我的PHP代码从数组创建json:

<script type="text/javascript">
var markers = <?php echo json_encode($pageposts);?>  
</script>

这是我的JS代码:     var infowindow = null;

  $(document).ready(function(){
  initialize();
   });

function initialize() {

var centerMap = new google.maps.LatLng(41.141208, -73.263726);
var options = {
    zoom: 12,
    center: centerMap,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), options);    

setMarkers(map, markers);
  infowindow = new google.maps.InfoWindow({
    content: "loading..."
  });
}

function setMarkers(map, markers) {
  for (var i = 0; i < markers.length; i++) {
  var marker = new google.maps.Marker({
  position:  new google.maps.LatLng(markers[i].meta_value), 
  map: map
});

var contentString = "Some content";

google.maps.event.addListener(marker, "click", function () {
//infowindow.setContent(this.html);
//infowindow.open(map, this);
});

} }

如果你想看到嵌入了json的页面,请查看以下链接: http://www.fairfieldctguide.com/test-map 视图-出处:http://www.fairfieldctguide.com/test-map

任何帮助将不胜感激! 杰克

1 个答案:

答案 0 :(得分:1)

google.maps.LatLng需要两个数字作为参数。目前您传入的字符串将导致错误。因此,您需要将标记[i] .metavalue转换为两个数字,如下所示:

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
    latlng = markers[i].meta_value.split(",")
    lat = parseFloat(latlng[0])
    lng= parseFloat(latlng[1])
        var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(lat, lng),
            map: map
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

如果您不想进行转换,则可以将lat和lng值作为数字存储在不同的属性中。所以你的json看起来像这样:

  var markers = [{
            "ID":"883",
            "post_title":"Tucker's Cafe",
            "meta_key":"meta_geo",
            "lat":41.1674377,
"lng": -73.2236554
        }

你会添加一个这样的标记:

var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(markers[i].lat, markers[i].lng),
            map: map
        });