Question

我有一张我从json数组中填充的地图。

我传递一个多维数组并转换为json：

public List<string[]> locationList { get; set; }

var locs = @Html.Raw(Json.Encode(Model.locationList));

使用邮政编码映射代码：

var map;
var elevator;
var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(53.90, -3.00),
    mapTypeId: 'roadmap'
};

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

var latlng;   

for (var i = 0; i < locs.length; i++) {
    var name = locs[i][1];
    var markerdata = $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + locs[i][0] + '&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        latlng = new google.maps.LatLng(p.lat, p.lng);

        new google.maps.Marker({
            position: latlng,
            map: map,
            title: name,
        });           
    });
};

问题似乎与标题有关。如果我尝试直接使用json值，则没有引脚显示：

new google.maps.Marker({
            position: latlng,
            map: map,
            title: locs[i][1],
        });

如果我尝试将值赋给var，我会得到所有的地图引脚，但它们都有最后一个条目的标题：

var name = locs[i][1];    

new google.maps.Marker({
            position: latlng,
            map: map,
            title: name,
        });

我做错了什么？

Answer 1

问题是google.maps.Marker的选项包含在句子{}

中

所以你最终传递了对i的引用，最终作为最后一个值

使用forEach代替传统的for循环

function的存在应该允许name保持其值

locs.forEach(function (name) {
    var markerdata = $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + locs[i][0] + '&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        latlng = new google.maps.LatLng(p.lat, p.lng);

        new google.maps.Marker({
            position: latlng,
            map: map,
            title: name
        });
    });
});

更多，这是真正的答案...
JavaScript closure inside loops

来自json数组的Google地图图钉标题

1 个答案: