如何按纬度和经度设置谷歌地图标记并提供信息泡泡

Question

以下示例代码由google maps api提供

          var geocoder;
          var map;
          function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(40.77627, -73.910965);
            var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }

以下仅显示没有标记的位置的谷歌地图.我想知道如何通过给出纬度/经度参数来放置标记？如何将从数据库中提取的自己的信息存储在该标记上？

Answer 1

这是一个JSFiddle演示,向您展示如何通过Lat Lng设置谷歌地图标记,以及点击时会给您一个信息窗口(气泡):

这是我们的基本HTML,点击时有3个超链接,在地图上添加一个标记:

<div id="map_canvas"></div>

<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/>
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/>
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/>

首先,我们设置2个全局变量.一个用于地图,另一个用于保存我们的标记:

var map;
var markers = [];

这是我们初始化创建谷歌地图:

function initialize() {
    var latlng = new google.maps.LatLng(40.77627, -73.910965);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

然后我们创建3个lat lng位置,我们想放置我们的标记:

var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);

在这里,我们创建一个函数,根据传递给它的内容添加我们的标记.myloc将是美国,巴西或阿根廷,然后我们根据传递的参数创建标记.在addMarker函数中,我们检查并确保我们不通过调用for循环在地图上创建重复标记,如果我们已经创建了传递的param,那么我们返回函数并且什么都不做,否则我们创建标记并将其推送到全局标记数组.创建标记后,我们通过执行标记附加信息窗口及其相关标记.markers[markers.length-1]['infowin']长度1基本上是在数组上获得新推标记.在信息窗口中,我们使用html设置内容.这基本上是您放入气泡或信息窗口的信息(它可以是您可以使用天气API等填充的天气信息).在附加信息窗口之后,我们使用Google Map API的addListener附加一个onclick事件监听器,当点击标记时,我们想要打开与之关联的信息窗口,方法是调用this['infowin'].open(map, this)地图是我们的全局地图,这是标记我们目前正在将onclick事件与.

function addMarker(myloc) {
    var current;
    if (myloc == 'usa') current = usa;
    else if (myloc == 'brasil') current = brasil;
    else if (myloc == 'argentina') current = argentina;
    for (var i = 0; i < markers.length; i++)
    if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return;

    markers.push(new google.maps.Marker({
        map: map,
        position: current,
        title: myloc
    }));

    markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({
        content: '<div>This is a marker in ' + myloc + '</div>'
    });

    google.maps.event.addListener(markers[markers.length - 1], 'click', function() {
        this['infowin'].open(map, this);
    });
}

完成所有操作后,我们基本上附加window.onload事件并调用初始化函数:

window.onload = initialize;