Question

对于我们的一项作业，我们必须使用Google Maps API创建一个网络应用，我们会按位置显示新闻文章

我正在处理代码的javascript，特别是addMarker，我会在地图上添加标记，并在点击此标记时显示信息窗口。

我的代码的相关部分如下：

function addMarker(place)
{

  var marker = new google.maps.Marker({
    position: {lat: place.latitude, lng: place.longitude},
    // {lat: 42.377, lng: -71.1256},
    map: map,
    label: place.place_name + ", " + place.admin_name1,
    icon: {
        labelOrigin: new google.maps.Point(11, 50),
        url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
        size: new google.maps.Size(22, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(11, 40),
      }
  });

  marker.addListener('click', function(){

  var content = "<ul>";

  // pull articles
  var parameters = {geo: place.postal_code}

  $.getJSON("articles.php", parameters)
  .done(function(data, textStatus, jqXHR) {

    for (var i=0; i < articles.length; i++)
    {
        content +='<li> + articles[i].title + </li>';
    }
    content += '</ul>';

    showInfo(marker, content);

  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    // log error to browser's console
    console.log(errorThrown.toString());
  });

  });

}

生成标记好，但是对于我的生活，我无法弄清楚为什么当我点击它时它不会显示infoWindow。

感谢我能得到的任何帮助，非常感谢你们

Answer 1

您的代码中没有信息窗口，也没有尝试打开信息窗口。这基本上是显示地图，标记和信息窗口所需的内容。只需根据自己的喜好自定义它。注意var infowindow，以及触发信息窗显示的marker.addListener到infowindow.open。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

var contentString = '<div id="content">';

var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

此代码及更多信息可在以下网址找到：https://developers.google.com/maps/documentation/javascript/infowindows

Google Maps API InfoWindow＆amp;的getJSON

1 个答案: