Question

我在这个网站上搜索了一个没有运气的答案。我有一个lat和lng标记的数组，我想基于数组索引打开一个信息窗口。我通过用变量而不是数组列表替换标记来实现它，但我想保持我的代码DRY。这是我的代码：

function initMap() {
    var locations = [
        ["blairCountyPA", 40.453132, -78.384223],
        ["scrantonPA", 41.408969, -75.662412],
        ["warringtonTownshipPA", 40.250319, -75.166212],
        ["lancasterCountyPA", 40.046657, -76.178374],
        ["berkeleyCountyWV", 39.488560, -78.065193],
        ["bowieMD", 39.006777, -76.779136],
        ["anneArundelCountyMD", 38.953011, -76.548823],
        ["shenandoahVA", 38.483457, -78.849748],
        ["calvertCountyMD", 38.494950, -76.502574],
        ["salsiburyMD", 38.360674, -75.599369],
        ["berlinMD", 38.322615, -75.217689],
        ["ocMD", 38.336503, -75.084906],
        ["lynchburgVA", 37.413754, -79.142246]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(39.488560, -78.065193)
    }); 

    for(var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            icon: 'images/pin-cloud.png',
            animation: google.maps.Animation.DROP,
            map: map    
        });
    }

    var blairCountyContentString = 
    '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Blair County, PA</h1>'+
    '<div id="bodyContent">'+
    "<p>insert info here</p>" +
    '<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/blair_county_final.pdf" <span>Case Study Blair County, PA</span> </a></p>'+
    '</div>'+
    '</div>';

    var blairCountyInfowindow = new google.maps.InfoWindow({
        content: blairCountyContentString,
        position: locations[0]
    });

    marker.addListener('click', function() {
        blairCountyInfowindow.open(map, marker);
    });

我的问题似乎是“position：locations [0]”对象文字。有时我得到一个错误，说明这需要是lng的数值，lat ...虽然没有运气但尝试过。窗口当前打开，但仅适用于数组的最后一个索引。有什么想法吗？

Answer 1

查看更新的代码。现在自定义信息窗口内容

How to

function initMap() {
  var marker = [];
  var locations = [
    ["blairCountyPA", 40.453132, -78.384223],
    ["scrantonPA", 41.408969, -75.662412],
    ["warringtonTownshipPA", 40.250319, -75.166212],
    ["lancasterCountyPA", 40.046657, -76.178374],
    ["berkeleyCountyWV", 39.488560, -78.065193],
    ["bowieMD", 39.006777, -76.779136],
    ["anneArundelCountyMD", 38.953011, -76.548823],
    ["shenandoahVA", 38.483457, -78.849748],
    ["calvertCountyMD", 38.494950, -76.502574],
    ["salsiburyMD", 38.360674, -75.599369],
    ["berlinMD", 38.322615, -75.217689],
    ["ocMD", 38.336503, -75.084906],
    ["lynchburgVA", 37.413754, -79.142246]
  ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: new google.maps.LatLng(39.488560, -78.065193)
  });

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

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      var ContentString =
        '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<h1 id="firstHeading" class="firstHeading">' + locations[i][0] + '</h1>' +
        '<div id="bodyContent">' +
        "<p>insert info here</p>" +
        '<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/blair_county_final.pdf" <span>Case Study ' + locations[i][0] + '</span> </a></p>' +
        '</div>' +
        '</div>';
      return function() {
        infowindow.setContent(ContentString);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}

Google Maps API。从数组调用多个信息窗口

1 个答案: