具有个人信息窗口的多个地图标记

Question

我的关闭技巧并不是很好，我试图保留每个InfoWindows的引用供以后使用，但似乎无法从此位置移动。所发生的只是无论我点击哪个标记，相同的InfoWindow都会打开。不用担心{{}} Django模板代码很好。

 $(document).ready(function() { 

      var map; 
      var myLatlng; 
      var marker = []; 
      var infowindow = []; 
      var map_markers = []; 

      {% for map_marker in map_markers %} 
      map_markers.push({ 
       'lat':{{map_marker.latitude}}, 
       'lng':{{map_marker.longitude}}, 
       'icon':{% if map_marker.icon %}'{{map_marker.icon.url}}'{% else %}''{% endif %}, 
       'info':{% if map_marker.info %}'{{map_marker.info.strip|safe|escapejs}}'{% else %}''{% endif %}, 
      }); 
      {% endfor %} 

      var mapOptions = { 
       zoom: {{map_settings.zoom}}, 
       center: new google.maps.LatLng({{map_settings.latitude}}, {{map_settings.longitude}}) 
      }; 

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      for (i in map_markers){ 

       myLatlng = new google.maps.LatLng(map_markers[i].lat , map_markers[i].lng); 

       marker[i] = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: 'Marker', 
        icon: map_markers[i].icon 
       }); 

       if (map_markers[i].info){ 

        infowindow[i] = new google.maps.InfoWindow({ 
         content: map_markers[i].info 
        }); 

        google.maps.event.addListener(marker[i], 'click', function() { 
         infowindow[i].open(map,marker[i]); 
        }); 

       } 
      } 

     }); 

因为我一直在围绕着这个问题前进，所以从这个问题中继续前进会很好。任何帮助赞赏。

Answer 1

固定它... ...增加了以下功能

  function marker_click(marker,infowindow){ 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map,marker); 
       }); 
      } 

，然后把它称为...

marker_click(marker[i], infowindow[i]); 

Answer 2

一种选择是使用标记的成员变量，而不是功能关闭。一个（自定义）成员加入标记（比如iWcontent）：

marker[i] = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Marker', 
    icon: map_markers[i].icon, 
    iWcontent: map_markers[i].info 
}); 

使用的标记点击功能：

google.maps.event.addListener(marker[i], 'click', function() { 
    infowindow.setContent(this.iWcontent); 
    infowindow.open(map,this); 
}); 

proof of concept fiddle

代码片段：

var geocoder; 
 
var map; 
 
var map_markers = []; 
 
var marker = []; 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
      map_markers.push({ 
 
       'lat':45, 
 
       'lng':-75, 
 
       'icon':null, 
 
       'info':'{{0}}' 
 
      }); 
 
      map_markers.push({ 
 
       'lat':45.5, 
 
       'lng':-75.5, 
 
       'icon':null, 
 
       'info':'{{1}}' 
 
      }); 
 

 
function initialize() { 
 
      var mapOptions = { 
 
       zoom: 5, 
 
       center: new google.maps.LatLng(45, -75) 
 
      }; 
 

 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
      for (i in map_markers){ 
 

 
       myLatlng = new google.maps.LatLng(map_markers[i].lat , map_markers[i].lng); 
 

 
       marker[i] = new google.maps.Marker({ 
 
        position: myLatlng, 
 
        map: map, 
 
        title: 'Marker', 
 
        icon: map_markers[i].icon, 
 
        iWcontent: map_markers[i].info 
 
       }); 
 

 
       if (map_markers[i].info){ 
 

 
        google.maps.event.addListener(marker[i], 'click', function() { 
 
         infowindow.setContent(this.iWcontent); 
 
         infowindow.open(map,this); 
 
        }); 
 

 
       } 
 
      } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, body, #map-canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>