Google API 多个标记（地址不是很长）显示标题（工具提示）答案

【问题标题】：Google API multiple markers (addresses NOT latlong) displaying title (tool tip)Google API 多个标记（地址不是很长）显示标题（工具提示）
【发布时间】：2015-04-17 03:38:26
【问题描述】：

我正在尝试使用用户 netbrain 制作的脚本（在 stackoverflow 上找到 here），以便在用户单击标记时也显示地址标题。它应该相对简单，但我迷路了。

有什么想法吗？我尝试了很多选择，但似乎没有任何效果。 netbrain的代码如下：

var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: 'roadmap'
};

map = new google.maps.Map($('#map_canvas')[0], myOptions);


var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
            position: latlng,
            map: map
            title: addresses[0]
        });

    });
}

【问题讨论】：

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

【解决方案1】：

此答案假定您只关注工具提示而不是信息窗口。

变量addresses 和x 不能在回调中使用，因为x 的值将始终为5（在此示例中，请参见addresses 数组的长度）。而是像这样查看data 对象：

var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: 'roadmap'
};

map = new google.maps.Map($('#map_canvas')[0], myOptions);


var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
            position: latlng,
            map: map
            title: data.results[0].formatted_address
        });

    });
}

编辑

为了完整起见，data 对象是地理编码 API 调用的结果。 formatted_address 是结果中匹配项的属性，请参阅 https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses

【讨论】：

太棒了！非常感谢:)

【解决方案2】：

使用此代码：

$(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            }); 
            google.maps.event.addListener(marker, 'click', function(evt) {
               var info_window = new     google.maps.InfoWindow({maxWidth: 500}); 
                info_window.setContent('Content here');
                info_window.setPosition(latlng);
                info_window.open(map, marker);
            });
        });
    }

});

【讨论】：