将Google Maps MarkerClusterer与infowindow集成 [英] Integrate Google Maps MarkerClusterer with infowindow
本文介绍了将Google Maps MarkerClusterer与infowindow集成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将InfoWindow放入与MarkerClusterer分组的多个标记中，但没有成功。我只能使用infowindows或集群生成地图;不是在同一时间。在网上搜索让我更加迷惑......
起点为 google开发者页面：我的需要中，我创建了以下代码：
< div id =map>< / div>
< script>
函数initMap（）{
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：5，
center：{lat：-15.7942357，lng：-47.8821945}
}）;
//在地图上添加一些标记。
//注意：代码使用JavaScript Array.prototype.map（）方法为
//根据给定的locations数组创建一个标记数组。
//这里的map（）方法与Google Maps API无关。
var markers = locations.map（function（location，i）{
return new google.maps.Marker（{
position：location，
}）;
}）;
//添加一个标记聚类器来管理标记。
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 中显示的代码会调用另一个位置对象。不仅仅是我尝试，最糟糕的结果是...
我想为每个标记添加简单的信息：每个标记只有一个标题和一个独特的web链接。
有人可以帮忙吗？ 添加独特信息为每个标记添加到您的位置数组（如此问题的答案：）。
为每个标记添加一个点击侦听器，以便打开带有该独特内容的InfoWindow。
var infoWin = new google.maps.InfoWindow（）;
var marker = 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）;
}）
返回标记;
}）;
代码段：
function initMap（）{var map = new google.maps.Map（document.getElementById（'map'），{zoom：5，中心：{lat：-15.7942357，lng：-47.8821945}}）; var infoWin = new google.maps.InfoWindow（）; //向地图添加一些标记。 //注意：代码使用JavaScript Array.prototype.map（）方法//根据给定的locations数组创建一个标记数组。 //这里的map（）方法与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;}）; //添加一个标记聚类器来管理标记。 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％;宽度：100％; margin：0px; < script src =https：//
b $ b
I'm trying to put InfoWindow in multiple markers grouped with MarkerClusterer, but without sucess. I only can generate maps with infowindows OR with cluster; not both at same time. Searching over web makes me more confuse....
The start point was google developers page: with my needs, I created the following code:
<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>
Then I stoped here. The code shown in InfoWindow calls another objetcs than the "locations". More than I try, worst results are...
I would like to add just simple infos to EACH marker: only a title and a unique weblink per marker.
Can someone help?
解决方案
Add the "unique information" for each marker to your locations array (like the answer to this question: ).
Add a click listener to each marker which opens the InfoWindow with that unique content.
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;
});
code snippet:
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"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
这篇关于将Google Maps MarkerClusterer与infowindow集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
