Google maps api V3 - 从查询结果中动态添加多个标记答案

【问题标题】：Google maps api V3 - Adding multiple markers dynamically from query resultsGoogle maps api V3 - 从查询结果中动态添加多个标记
【发布时间】：2011-03-09 03:06:14
【问题描述】：

我正在尝试在页面上设置一个地图，并在其下方设置几个链接，当单击这些链接时，将动态查询我的数据库和地图上的结果集输出。我花了很多时间在谷歌上搜索，但找不到我要找的东西。我已经使用 AJAX 来返回纬度和经度坐标 OK，但是尝试在地图上创建标记时出错了，虽然我没有产生任何错误，但什么也没出现。

【问题讨论】：

你能告诉我们你到目前为止有什么 - 可能是通过 pastebin 吗？
当然，这是链接。谢谢您的帮助。 pastebin.com/u7FUz7v0
好的，所以首先要检查的是 - Firebug 向您展示了什么？它允许您自省从服务器返回的数据以进行 AJAX 调用。
Firebug 显示我有 2 行返回且没有错误 {"COLUMNS":["ID","LOC_NAME","POINT"],"DATA":[[2,"Mr Joe Bloggs" ,"54.016893,-0.970721"],[3,"Mrs Josephine Bloggs","53.866675,-1.912890"]]}
我觉得不错。所以我会在 outputMarkers 中添加一些 console.log 消息。作为一种简单调试的方法。有意义吗？

标签： ajax google-maps google-maps-api-3

【解决方案1】：

代码未经测试，但你可以这样做

声明地图、标记

var map;
var markersArray = [];
var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),  myOptions);

下面的函数会在地图上添加一个点

function plotPoint(srcLat,srcLon,title,popUpContent,markerIcon)
{
    var myLatlng = new google.maps.LatLng(srcLat, srcLon);            
    var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map, 
          title:title,
          icon: markerIcon
      });
    markersArray.push(marker);
    var infowindow = new google.maps.InfoWindow({
        content: popUpContent
    });
      google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });                                          
}

获取您的积分并添加它们

var lat = 44.856051;
var lng = -93.242539;
plotPoint(lat,lng,'Mall of America','<span class="gBubble"><b>Mall of America</b><br>60 East Brodway<br>Bloomington, MN 55425</span>');

【讨论】：

【解决方案2】：

你有这个来创建新的标记：

var marker = new google.maps.Marker({
    position: results.DATA[i][2],
    map: map,
    title:"New marker"
});
marker.setMap(map);

results.DATA[i][2] 的值类似于“54.016893,-0.970721”。但是位置必须是一个 LatLng 对象：

// turn "54.016893,-0.970721" into [54.016893,-0.970721"]
var latLng = results.DATA[i][2].split(",");

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latLng[0], latLng[1]),
    map: map,
    title:"New marker"
});

PS：另外，如果你在markerOptions中指定了地图，你就不需要再调用setMap()函数了。

【讨论】：