显示标题的Google API多个标记(地址NOT latlong)(工具提示)

时间:2015-04-17 03:38:26

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

我正在尝试使用用户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]
        });

    });
}

2 个答案:

答案 0 :(得分:2)

这个答案假设你只是在工具提示之后,而不是信息窗口。

变量addressesx无法在回调中使用,因为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

答案 1 :(得分:0)

使用此代码:

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

});