我正在尝试将InfoWindow放在与MarkerClusterer分组在一起的多个标记中,但是没有成功。我只能通过信息窗口或集群来生成地图;不能同时使用。通过网络搜索使我更加困惑。...
起点是google developers page:根据我的需要,我创建了以下代码:
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -15.7942357, lng: -47.8821945}
});
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: -19.9286, lng: -43.93888},
{lat: -19.85758, lng: -43.9668},
{lat: -18.24587, lng: -43.59613},
{lat: -20.46427, lng: -45.42629},
{lat: -20.37817, lng: -43.41641},
{lat: -20.09749, lng: -43.48831},
{lat: -21.13594, lng: -44.26132},
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
然后我在这里停了下来。 InfoWindow中显示的代码调用了除“位置”之外的其他对象。比我尝试的还要糟糕的结果是...
我想向每个标记添加简单的信息:每个标记仅包含标题和唯一的网络链接。
有人可以帮忙吗?
将每个标记的“唯一信息”添加到您的位置数组(例如该问题的答案:Google Maps JS API v3 - Simple Multiple Marker Example)。
向每个标记添加单击侦听器,这将打开具有该唯一内容的信息窗口。
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
代码段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: -15.7942357,
lng: -47.8821945
}
});
var infoWin = new google.maps.InfoWindow();
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: -19.9286,
lng: -43.93888,
info: "marker 1"
}, {
lat: -19.85758,
lng: -43.9668,
info: "marker 2"
}, {
lat: -18.24587,
lng: -43.59613,
info: "marker 3"
}, {
lat: -20.46427,
lng: -45.42629,
info: "marker 4"
}, {
lat: -20.37817,
lng: -43.41641,
info: "marker 5"
}, {
lat: -20.09749,
lng: -43.48831,
info: "marker 6"
}, {
lat: -21.13594,
lng: -44.26132,
info: "marker 7"
}, ];
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>