谷歌地图API V3 - 动态地添加多个标记的查询结果多个、查询结果、标记、地图

2023-09-10 15:53:22 作者:西城诀丶转身一世琉璃白

我想建立一个网页上的地图与一对夫妇的设置下,单击时链接,将动态查询我的数据库和地图上的结果集输出。我花了相当多的时间谷歌搜索这一点,但无法找到我要找相当的东西。我得尽可能使用AJAX返回的纬度和经度坐标确定,但我会错试图在地图上创建标记时,没有出现虽然我不产生任何错误。

I'm trying to set up a map on a page with a couple of links set up underneath that when clicked, will dynamically query my database and the result set output on the map. I've spent quite a lot of time googling this but can't find quite what I'm looking for. I've got as far as using AJAX to return the lat and lon coordinates OK, but I'm going wrong when trying to create markers on the map, nothing appears though I don't generate any errors.

推荐答案

code未经测试,但你可以做这样的事情

Code not tested, but you can do something like this

声明地图,标记

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);

下面的功能将增加一个点地图

Below function would add a point to map

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);
    });                                          
}

取你的观点,并将其添加像

Fetch your points and add them like

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>');
 
精彩推荐
图片推荐