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

时间:2010-06-28 12:50:00

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

我正在尝试在页面上设置一个地图,其中设置了几个链接,当点击它时,将动态查询我的数据库和地图上的结果集输出。我花了很多时间在Google上搜索,但找不到我正在寻找的东西。我已经使用AJAX来返回lat和lon坐标了,但是当我在地图上创建标记时我出错了,虽然我没有出现任何错误但没有出现。

2 个答案:

答案 0 :(得分:1)

你有这个用于创建新标记:

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()函数。

答案 1 :(得分: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>');