谷歌地图JS API V3，添加了多个标记来映射来自远程json源的信息窗口

Google maps JS API V3,add multiple markers to map with infowindows from remote json source

本文关键字：映射 json 窗口 信息窗 信息 V3 API JS 添加 谷歌地图      更新时间：2023-09-26

我想在谷歌地图上放置多个标记，每个标记都有自己的信息窗口。我需要放置这些标记的数据是动态的，并且是从提供json输出的远程api获得的。json的格式为

{0 : {lat:"", lng:"", description:"", .....}, 1 : {lat: "", .....}}

等等。它可以包含任意数量的值集。然而，每个集合的格式都已定义。此外，键是这样的，它们可以很容易地迭代。我写的代码如下：

var map;
var initPos;
var marker;
var pins;
var infowindow = null;
function count(obj) {
  var i = 0;
  for (var x in obj)
    if (obj.hasOwnProperty(x))
      i++;
  return i;
};
function initialize() {
    var myOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    infowindow = new google.maps.InfoWindow();
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
        initPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(initPos);
        }, function() {
            initPos = new google.maps.LatLng(19.074448,72.872314);
            map.setCenter(initPos);
        });
    }
    else {
        initPos = new google.maps.LatLng(19.074448,72.872314);
        map.setCenter(initPos);
    }
    var i, pins, html, pinLatLng, pinMarkers, contentString;
    $.getJSON('/user/map/', function (data) {
        for (i = 0; i < count(data); i++) {
            pins = data[i];
            html = '<h4>'+pins['title']+'</h4>'+'<p>'+pins['description']+'</p>'+'<p><a href="'+pins['url']+'">Read More</a>'
            pinLatLng = new google.maps.LatLng(parseFloat(pins['lat']), parseFloat(pins['lng']));
            pinMarkers = new google.maps.Marker({position: pinLatLng, map: map, animation: google.maps.Animation.Drop});
            contentString = "Some content";
            google.maps.event.addListener(pinMarkers, "click", (function(pinMarkers, i) {
                return function() {
                    infowindow.setContent(html);
                    infowindow.open(map, pinMarkers);
                }
            })(pinMarkers, i));
        }
    });
};

不要注意导航器的定位部分，而是要注意其他方面。现在这个脚本所做的是，它只标记映射上json中的最后一个标记，其余的都不显示。我做错了什么？编辑：所以我在json格式上犯了一个错误，现在我已经修复了。现在的问题是，所有的信息窗口都显示相同的数据，而不是每个窗口显示不同的数据。不过现在它确实显示了不同的标记。EDIT2：现在可以工作了。遵循此处给出的步骤http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

您是否检查过jQuery是否以正确的格式获取JSON数据？jQuery的JS检查可能非常严格，在这种情况下，我建议使用以下格式：

[{object},{object},{object}]

而不是：

{0:{object},1:{object},2:{object}}

这可能还需要您引用标识符：

{"0":{object},"1":{object},"2":{object}}

因此，在标记函数的第一行之前添加：

console.log(data);

看看结果如何。一旦你确认了数据是正确的，我还建议用jQuery的$.each操作符循环：

$.each(data,function(key,val){
 //stuff
});
相关文章：