Question

我正在构建自己的自定义gooogle地图，我想在地图上使用2个功能;显示/隐藏标记和显示信息窗口（单击标记时）

但是，我一次只能做一个。如果我想显示/隐藏标记我必须按下数组，但是它不能显示单个标记的信息窗口，所以我现在处于catch-22状态...希望你们中的一个人能够朝着正确的方向推动我：）

这是我到目前为止的代码（显示/隐藏标记）：

var map;
var otherMarker = [];
var other = [{lat: 52.5001054,lng: 5.0578416,name: 'Volendam',content: 'Fishing village',icon: '../css/images/marker1.png'},{}];

function initialize() {

    var myOptions = {
        backgroundColor: '#FFFFF',
        zoom: 7,
        center: new google.maps.LatLng(52.2129919 , 5.2793703),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false
    };

    var map_canvas = document.getElementById("map_canvas");

    map = new google.maps.Map(map_canvas, myOptions);
    var infowindow = new google.maps.InfoWindow();

       for (var i = 0; i < other.length; i++) { 

          otherMarker.push(new google.maps.Marker({
            position: new google.maps.LatLng(other[i].lat, other[i].lng),
            map: map,
            icon: other[i].icon


          }));

          google.maps.event.addListener(otherMarker, 'click', (function(otherMarker, i) {
          return function() {
          infowindow.setContent('<div id="content">'+
          '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">'+other[i].name+'</h1>'+
              '<div id="bodyContent">'+
              '<p>'+other[i].content+'</p>'+
              '</div>'+
          '</div>');
              infowindow.open(map, otherMarker);

            }
          })(otherMarker, i));
       }
}

   function hideOther(){
        for(var i=0; i<otherMarker.length; i++){
            otherMarker[i].setVisible(false);
        }
    }

window.onload = initialize;

要显示信息窗口，我不会推送数组并使用以下代码替换for循环：

       for (var i = 0; i < other.length; i++) { 

          otherMarker= new google.maps.Marker({
            position: new google.maps.LatLng(other[i].lat, other[i].lng),
            map: map,
            icon: other[i].icon


          });

Answer 1

otherMarker只是一个数组，而不是google.maps元素。因此，它本身没有听众。

在第二位，与任何js元素一样，您可以将自己的一些属性添加到google.maps.Marker中，以便稍后在打开infoWindow时阅读它们。

要让每个标记在单击时显示infoWindow，您应该

for (var i = 0; i < other.length; i++) { 
   var newMarker=new google.maps.Marker({
       position: new google.maps.LatLng(other[i].lat, other[i].lng),
       map: map,
       icon: other[i].icon,
       name: other[i].name,
       content: other[i].content
   });

   google.maps.event.addListener(newMarker, 'click', function() {
      infowindow.setContent('<div id="content">'+
      '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">'+newMarker.name+'</h1>'+
          '<div id="bodyContent">'+
          '<p>'+newMarker.content+'</p>'+
          '</div>'+
      '</div>');
      infowindow.open(map, newMarker);
   });

   otherMarker.push(newMarker);
}

换句话说，

：

声明标记
声明其侦听器
将其推送到数组

请注意，我简化了click事件的匿名功能。它应该可以工作，但是如果infowindow变空了，也许你可以使用getter来获取名称和内容，而不是直接访问该属性。

Answer 2

谢谢Amenadiel！信息窗口不会在正确的位置弹出，但是在你的帮助下我稍微调整了一下代码，现在就可以了！:)这是工作代码;

var otherMarker = [];
var newMarker = [];
var other = [{lat: 52.5001054,lng: 5.0578416,name: 'Volendam',content: 'Fishing village',icon: '../css/images/marker1.png'},{}];

function initialize() {

    var myOptions = {
        backgroundColor: '#FFFFF',
        zoom: 7,
        center: new google.maps.LatLng(52.2129919 , 5.2793703),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        mapTypeControl: false
    };

    var map_canvas = document.getElementById("map_canvas");

    map = new google.maps.Map(map_canvas, myOptions);
    var infowindow = new google.maps.InfoWindow();

   for (var i = 0; i < other.length; i++) { 

      otherMarker = new google.maps.Marker({
        position: new google.maps.LatLng(other[i].lat, other[i].lng),
        map: map,
        icon: other[i].icon


      });
      google.maps.event.addListener(otherMarker, 'click', (function(otherMarker, i) {
      return function() {
      infowindow.setContent('<div id="content">'+
      '<div id="siteNotice" style="width:300px;">'+
          '</div>'+
          '<h1  id="firstHeading" class="firstHeading">'+other[i].name+'</h1>'+
          '<div id="bodyContent">'+
          '<p style="width:300px;margin-top:5px;">'+other[i].content+'</p>'+
          '</div>'+
      '</div>');
          infowindow.open(map, otherMarker);


        }
      })(otherMarker, i));
      newMarker.push(otherMarker);
   }
 }

function hideOther(){
    for(var i=0; i<newMarker.length; i++){
        newMarker[i].setVisible(false);
    }
}
function showOther(){
    for(var i=0; i<newMarker.length; i++){
        newMarker[i].setVisible(true);
    }
}

window.onload = initialize;

显示/隐藏标记并使用信息窗口google maps API v3

2 个答案: