我试图创建一个带有多个标记的google地图，一次只允许一个信息窗口。标记是IP摄像机的位置，它们是通过红宝石获取的。我已经阅读了类似问题的答案，其中的解决方案是仅创建一个信息窗口并重新使用它。
我试图通过其他一些问题来实施解决方案，但是我无法使其正常工作。
$(document).ready(function () {
// execute
(function () {
// map options
var options = {
zoom: 2,
center: new google.maps.LatLng(25, 10), // centered US
mapTypeControl: false,
streetViewControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map-canvas'), options);
// set multiple marker
<% @cameras.each do |c| %>
// init markers
<% if c.deep_fetch(:location) {} != nil %>
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<%= c.deep_fetch(:location, :lat) {} %>, <%= c.deep_fetch(:location, :lng) {} %>),
map: map,
title: 'Click Me '
});
// process multiple info windows
(function (marker) {
// add click event
google.maps.event.addListener(marker, 'click', function () {
infowindow = new google.maps.InfoWindow({
content: "<%= preview(c, true) %>"+
'<h5><%= c["name"] %></h5>'+
'<p><a href="/publiccam/<%= c['id'] %>">View Camera</a></p>'
});
infowindow.open(map, marker, this);
});
})(marker);
<% end %>
<% end %>
})();
});
由于我使用<％@ cameras.each为每个摄像机创建一个信息窗口的方式，是否可以仅创建一个信息窗口？％>？
您应该只创建一个infowindow对象的实例并使用该setContent()方法。
首先创建infowindow对象：
var infowindow = new google.maps.InfoWindow();
然后在创建标记的位置并添加click事件监听器：
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('set the infowindow content here');
infowindow.open(map, marker);
});
希望这可以帮助。
var map = null;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
createMarker(point, 'This is point 1');
point = new google.maps.LatLng(43.91892, -78.89231);
createMarker(point, 'This is point 2');
point = new google.maps.LatLng(43.82589, -79.10040);
createMarker(point, 'This is point 3');
}
function createMarker(latlng, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
initialize();#map_canvas {
height: 200px;
}<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk
"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句