Question

我正在尝试使用Google Map API完成类似的工作：

http://www.alphamediausa.com/our-stations/

因此每个标记都会有一堆与该位置相关的URL。我有一个解析的外部JSON文件，它看起来像这样：

{
  "Market Counts" : "",
  "Market" : "North Dallas",
  "Call Letters" : "KLAK-FM",
  "Location" : "33.2156628,-96.7235993",
  "Website" : "http://www.975klak.com",
},
{
  "Market Counts" : "1",
  "Market" : "North Dallas",
  "Call Letters" : "KMKT-FM",
  "Location" : "33.619403,-96.77182",
  "Website" : "http://www.931kmkt.com",
 },
{
  "Market Counts" : "",
  "Market" : "North Dallas",
  "Call Letters" : "KMAD-FM",
  "Location" : "33.619403,-96.77182",,
  "Website" : "http://www.madrock1025.com",
 },
{
  "Market Counts" : "",
  "Market" : "Palm Springs",
  "Call Letters" : "KKUU-FM",
  "Location" : "33.771553,-116.7043751",
  "Website" : "http://www.u927.com",    
},
{
  "Market Counts" : "",
  "Market" : "Palm Springs",
  "Call Letters" : "KDGL-FM",    
  "Location" : "33.771553,-116.7043751",
  "Website" : "http://www.theeagle1069.com",
},
{
  "Market Counts" : "",
  "Market" : "Palm Springs",
  "Call Letters" : "KDES-FM",
  "Location" : "33.771553,-116.7043751",
  "Website" : "http://www.985thebull.com",
 }

这样有263种不同的JSON对象。它有市场，致电信（站），位置和网站。

我想将这个Call Letters（电台）归类为如何 http://www.alphamediausa.com/our-stations/。因此，我根据“市场”值圈选JSON，以根据“市场价值”存储所有致电快报（站点）。我一直在寻找是否有任何解决方案，但我找不到它。这就是我到目前为止所做的：

function initMap()
{
    //Reading the json file
    var request = new XMLHttpRequest();
    request.open("GET", "../../station-database.json", false);
    request.send(null)
    //creating the json object
    var my_JSON_object = JSON.parse(request.responseText);
    //Setting up the map for USA
    var uluru = {
        lat: 37.090240,
        lng: -95.712891
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: uluru,                 
    });

    var num_markers = my_JSON_object.length;

    var temp_arr = [];
    //getting the copy of my obj
    temp_arr = my_JSON_object.slice();

    var lat_lang = [];
    var hovertitle = [];
    var markers = [];
    //Looping json object for markers
    for (var i = 0; i < num_markers; i++)
    {
        var htmlAll = '';
        lat_lang = my_JSON_object[i].Location.split(',');
        hovertitle[i] = my_JSON_object[i].Market + ',' + my_JSON_object[i].State;

        var websites = [];
        var stations = [];
        var market = my_JSON_object[i];

        //looping to categorize Markets and push all relative
        // data into the arrays that will hold the url and Call Letters 
        for(var j=0; j < temp_arr.length; j++)
        {
            //if markets are matching push into array and discard that array key   
            if( market.Market ==  temp_arr[j].Market)
            {
                websites.push(temp_arr[j].Website);
                stations.push(temp_arr[j]['Call Letters']);
                temp_arr.splice(j,1);
            }
        }
        //Store html content that needs to be displayed in the InfoWindow


       for(var site=0; site < websites.length; site++){
            htmlAll =+ '<div><a href="'+websites[site]+' target="_blank">'+stations[site]+'</a></div>';
        }
        //Looping latitude and langtitude
        myLatlng = new google.maps.LatLng(parseFloat(lat_lang[0]), parseFloat(lat_lang[1]));

        var infowindow = new google.maps.InfoWindow();

        markers.push(new google.maps.Marker({
            position: myLatlng,
            map: map,
            content: htmlAll,
            title: hovertitle[i]
        }));

        google.maps.event.addListener(markers[i], 'click', function(i) {
            return function() {
                infowindow.setContent(this.title + this.content);
                infowindow.open(map, this);
            }
        }(i));
    }
}

我能够为每个位置正确显示标记和标题，但我无法在InfoWindow中显示内容。当我在此之后执行console.log（htmlAll）时：

for(var site=0; site < websites.length; site++){
    htmlAll =+ '<div><a href="'+websites[site]+' target="_blank">'+stations[site]+'</a></div>';
}

我可以看到一些相对结果，但InfoWindow中没有显示任何内容。我不确定我是否在使用IF语句检查市场或分类市场或FOR循环时出现逻辑错误？

Answer 1

问题似乎来自您的addListener实施。

首先，为什么要在侦听器的回调中返回一个函数？您应该直接在infowindow.setContent(this.title + this.content);中执行infowindow.open(map, this);和function (i) {...}语句，而不是返回一个函数。

除此之外，我将更改以下代码行：

markers.push(new google.maps.Marker({
    position: myLatlng,
    map: map,
    content: htmlAll,
    title: hovertitle[i]
}));

google.maps.event.addListener(markers[i], 'click', function(i) {
    return function() {
        infowindow.setContent(this.title + this.content);
        infowindow.open(map, this);
    }
}(i));

通过以下方式：

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    content: htmlAll,
    title: hovertitle[i]
});
markers.push(marker);

marker.addListener('click', function() {
    infowindow.setContent(this.title + this.content);
    infowindow.open(map, this);
});

如Google地图文档中所述：https://developers.google.com/maps/documentation/javascript/events

对外部json文件进行排序并将其传递给InfoWindow以用于谷歌地图

1 个答案: