谷歌地图pin标题从json数组

Google map pin title from json array

本文关键字：json 数组 标题 pin 谷歌地图      更新时间：2023-09-26

我有一个地图，我从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,
        });

我做错了什么?

问题是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闭包内循环

相关文章：