标记群集，Google Maps API
<h1>Explore Ireland with me!</h1>
<div id="map"></div>
<script>
function initMap(){
// map options
var options = {
zoom:7,
center:{lat:53.3938131, lng:-7.858913}
var map = new google.maps.Map(document.getElementById('map'),options);
// Add a marker clusterer to manage the markers.
//Add marker
var markers = [
//Dublin
{
coords:{lat:53.338741, lng:-6.261563},
iconImage:'assets/img/places/stparkdublin.png',
content:'<h1>St Stephen’s Green</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
},
{
coords:{lat:53.3755012,lng:-6.2735677},
iconImage:'assets/img/places/botanic garden.png',
content:'<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
},
{
coords:{lat:53.355998576, lng:-6.32166538},
iconImage:'assets/img/places/stparkdublin.png',////////////////////add picture
content:'<h1>Phoenix Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://phoenixpark.ie/</a>'
},
{
coords:{lat:53.460259, lng:-6.219985},
iconImage:'assets/img/places/swordscastle.png',
content:'<h1>Swords Castle</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://swordscastle.events/</a>'
},
{
coords:{lat:53.37923, lng:-6.07201},
iconImage:'assets/img/places/Howth.png',
content:'<h1>Howth</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.visithowth.ie/</a>'
},
{
coords:{lat:55.1364, lng:-7.456},
iconImage:'assets/img/places/buncrana1.png',
content:'<h1>Buncrana</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Buncrana</a>'
},
{
coords:{lat:53.152999388, lng:-6.1499994},
iconImage:'assets/img/places/sugarloaf_icon.png',
content:'<h1>Great sugar loaf</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/the-sugarloaf-trail/</a>'
},
{
coords:{lat:52.0058, lng:-9.5562},
iconImage:'assets/img/places/killarney.png',
content:'<h1>Killarney National Park </h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.killarneynationalpark.ie/</a>'
},
{
coords:{lat:51.942662896, lng:-9.917162998},
iconImage:'assets/img/places/clifs.png',
content:'<h1>Ring of Kerry</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://ringofkerrytourism.com/</a>'
},
{
coords:{lat:52.679, lng:-7.814},
iconImage:'assets/img/places/clifs.png',//add picture!!!!!!!!!!!!!!!
content:'<h1>Thurles</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.tipperary.com/thurles</a>'
},
{
coords:{lat:52.348, lng:-6.517},
iconImage:'assets/img/places/wexford museum.png',
content:'<h1>Irish National Heritage Park</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.irishheritage.ie/</a>'
},
{
coords:{lat:53.018, lng:-6.398},
iconImage:'assets/img/places/wicklow.png',
content:'<h1> Wicklow Mountains National Park</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.wicklowmountainsnationalpark.ie/</a>'
},
{
coords:{lat:53.011299, lng: -6.326156},
iconImage:'assets/img/places/glendalough.png',
content:'<h1> Glendalough </h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.glendalough.ie/</a>'
},
{
coords:{lat:53.1876492494, lng:-6.083832998},
iconImage:'assets/img/places/Bray.png',
content:'<h1> Bray</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://www.bray.ie/</a>'
},
{
coords:{lat:53.144, lng: -6.072},
iconImage:'assets/img/places/greystones.png',
content:'<h1>Greystones</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/greystones/</a>'
},
{
coords:{lat:52.518664592, lng:-7.887329784},
iconImage:'assets/img/places/Cashel.png',
content:'<h1>Rock of Cashel</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://www.cashel.ie/</a>'
},
{
coords:{lat:52.6477, lng: -7.2561},
iconImage:'assets/img/places/kilkenny.png',
content:'<h1>Killenny</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>https://visitkilkenny.ie/</a>'
},
//cork
{
coords:{lat:51.902694, lng:-8.4767},
iconImage:'assets/img/places/butterCork.png',
content:'<h1>Museum of Butter</h1>'+ '<br>' + '<h2>Learn More</h2>' + '<a>http://thebuttermuseum.com/</a>'
},
{
coords:{lat:51.89953, lng:-8.499022},
iconImage:'assets/img/places/prisoncork.png',
content:'<h1>Cork City Gaol</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://corkcitygaol.com/</a>'
},
{
coords:{lat:53.4513204, lng:-6.140871},
iconImage:'assets/img/places/malahideB.png',
content:'<h1>Malahide</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.malahide.ie/</a>'
},
{
coords:{lat:53.2839577, lng:-9.0837658},
iconImage:'assets/img/places/galway.png',
content:'<h1>Galway</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.galwaytourism.ie/</a>'
},
{
coords:{lat:53.470580, lng:-6.122405},
iconImage:'assets/img/places/galway.png',
content:'<h1>Donabate Beach</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Donabate</a>'
},
{
coords:{lat:52.9713299, lng:-9.4300415},
iconImage:'assets/img/places/clifsofmoher.png',
content:'<h1>Donabate Beach</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.cliffsofmoher.ie/</a>'
},
{
coords:{lat:51.8960528, lng:-8.4980693},
iconImage:'assets/img/places/Cork.png',
content:'<h1>Cork</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://purecork.ie/</a>'
},
{
coords:{lat:53.3667776, lng:-6.5064198},
iconImage:'assets/img/places/Leixlip.png',
content:'<h1>Leixlip</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://pl.wikipedia.org/wiki/Leixlip</a>'
},
{
coords:{lat:53.1654628, lng:-6.125499},
iconImage:'assets/img/places/littlesugarloaf.png',
content:'<h1>Little Sugar Loaf</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.greystonesguide.ie/little-sugar-loafs-big-day/</a>'
},
{
coords:{lat:53.5474019, lng:-6.0933048},
iconImage:'assets/img/places/rockabill view.png',
content:'<h1>Rockabill View</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>http://www.skerriesseatours.ie/trips.html</a>'
},
{
coords:{lat:52.3337499, lng:-6.4906996},
iconImage:'assets/img/places/wexford.png',
content:'<h1>Wexford</h1>'+'<br>' + '<h2>Learn More</h2>' + '<a>https://www.visitwexford.ie/</a>'
},
];
// Loop through markers
for(var i = 0; i < markers.length; i++){
addMarker(markers[i]);
}
//Add MArker function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
});
if(props.iconImage){
marker.setIcon(props.iconImage);
}
//Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click',function(){
infoWindow.open(map,marker);
});
}
}
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: });
}
</script>
我想在我的代码中添加标记聚类。我有几个自定义标记和信息窗口。但是我不知道如何实现标记聚类。我的代码一切正常。但是为了更好的外观，我想添加此选项。我在此网站上查看如何将它们添加到代码https://developers.google.com/maps/documentation/javascript/marker-clustering中。我将标记聚类文件放入了代码中，并将链接添加到了代码中，但是现在我很难在哪里放置var markerClusterer = new MarkerClusterer（...），因此它可以正常工作。
1 个答案:
答案 0 :(得分：0)
发布的代码中明显存在语法错误。
-
Uncaught SyntaxError: Unexpected token var在这些行上：
// map options
var options = {
zoom:7,
center:{lat:53.3938131, lng:-7.858913}
var map = new google.maps.Map(document.getElementById('map'),options);
应为：
// map options
var options = {
zoom:7,
center:{lat:53.3938131, lng:-7.858913}
} // <===================================================================== missing "}"
var map = new google.maps.Map(document.getElementById('map'),options);
-
Uncaught SyntaxError: Unexpected token }在此行：
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: });
删除imagePath:或为其添加一个值：
var markerCluster = new MarkerClusterer(map, markers,
{
imagePath:
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
- 传递到
MarkerClusterer的markers数组必须是google.maps.Marker对象的数组，创建一个。
// Loop through markers
var gmarkers = [];
for(var i = 0; i < markers.length; i++){
gmarkers.push(addMarker(markers[i]));
}
//Add MArker function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
});
if(props.iconImage){
marker.setIcon(props.iconImage);
}
//Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click',function(){
infoWindow.open(map,marker);
});
}
return marker;
}
var markerCluster = new MarkerClusterer(map, gmarkers, {
imagePath:
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
proof of concept/working fiddle
代码段：
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
<script>
function initMap() {
// map options
var options = {
zoom: 7,
center: {
lat: 53.3938131,
lng: -7.858913
}
}
var map = new google.maps.Map(document.getElementById('map'), options);
// Add a marker clusterer to manage the markers.
//Add marker
var markers = [
//Dublin
{
coords: {
lat: 53.338741,
lng: -6.261563
},
iconImage: 'assets/img/places/stparkdublin.png',
content: '<h1>St Stephen’s Green</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://ststephensgreenpark.ie/</a>'
},
{
coords: {
lat: 53.3755012,
lng: -6.2735677
},
iconImage: 'assets/img/places/botanic garden.png',
content: '<h1>Botanic Garden</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://botanicgardens.ie/</a>'
},
{
coords: {
lat: 53.355998576,
lng: -6.32166538
},
iconImage: 'assets/img/places/stparkdublin.png', ////////////////////add picture
content: '<h1>Phoenix Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://phoenixpark.ie/</a>'
},
{
coords: {
lat: 53.460259,
lng: -6.219985
},
iconImage: 'assets/img/places/swordscastle.png',
content: '<h1>Swords Castle</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://swordscastle.events/</a>'
},
{
coords: {
lat: 53.37923,
lng: -6.07201
},
iconImage: 'assets/img/places/Howth.png',
content: '<h1>Howth</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.visithowth.ie/</a>'
},
{
coords: {
lat: 55.1364,
lng: -7.456
},
iconImage: 'assets/img/places/buncrana1.png',
content: '<h1>Buncrana</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Buncrana</a>'
},
{
coords: {
lat: 53.152999388,
lng: -6.1499994
},
iconImage: 'assets/img/places/sugarloaf_icon.png',
content: '<h1>Great sugar loaf</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/the-sugarloaf-trail/</a>'
},
{
coords: {
lat: 52.0058,
lng: -9.5562
},
iconImage: 'assets/img/places/killarney.png',
content: '<h1>Killarney National Park </h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.killarneynationalpark.ie/</a>'
},
{
coords: {
lat: 51.942662896,
lng: -9.917162998
},
iconImage: 'assets/img/places/clifs.png',
content: '<h1>Ring of Kerry</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://ringofkerrytourism.com/</a>'
},
{
coords: {
lat: 52.679,
lng: -7.814
},
iconImage: 'assets/img/places/clifs.png', //add picture!!!!!!!!!!!!!!!
content: '<h1>Thurles</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.tipperary.com/thurles</a>'
},
{
coords: {
lat: 52.348,
lng: -6.517
},
iconImage: 'assets/img/places/wexford museum.png',
content: '<h1>Irish National Heritage Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.irishheritage.ie/</a>'
},
{
coords: {
lat: 53.018,
lng: -6.398
},
iconImage: 'assets/img/places/wicklow.png',
content: '<h1> Wicklow Mountains National Park</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.wicklowmountainsnationalpark.ie/</a>'
},
{
coords: {
lat: 53.011299,
lng: -6.326156
},
iconImage: 'assets/img/places/glendalough.png',
content: '<h1> Glendalough </h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.glendalough.ie/</a>'
},
{
coords: {
lat: 53.1876492494,
lng: -6.083832998
},
iconImage: 'assets/img/places/Bray.png',
content: '<h1> Bray</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.bray.ie/</a>'
},
{
coords: {
lat: 53.144,
lng: -6.072
},
iconImage: 'assets/img/places/greystones.png',
content: '<h1>Greystones</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://visitwicklow.ie/item/greystones/</a>'
},
{
coords: {
lat: 52.518664592,
lng: -7.887329784
},
iconImage: 'assets/img/places/Cashel.png',
content: '<h1>Rock of Cashel</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.cashel.ie/</a>'
},
{
coords: {
lat: 52.6477,
lng: -7.2561
},
iconImage: 'assets/img/places/kilkenny.png',
content: '<h1>Killenny</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://visitkilkenny.ie/</a>'
},
//cork
{
coords: {
lat: 51.902694,
lng: -8.4767
},
iconImage: 'assets/img/places/butterCork.png',
content: '<h1>Museum of Butter</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://thebuttermuseum.com/</a>'
},
{
coords: {
lat: 51.89953,
lng: -8.499022
},
iconImage: 'assets/img/places/prisoncork.png',
content: '<h1>Cork City Gaol</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://corkcitygaol.com/</a>'
},
{
coords: {
lat: 53.4513204,
lng: -6.140871
},
iconImage: 'assets/img/places/malahideB.png',
content: '<h1>Malahide</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.malahide.ie/</a>'
},
{
coords: {
lat: 53.2839577,
lng: -9.0837658
},
iconImage: 'assets/img/places/galway.png',
content: '<h1>Galway</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.galwaytourism.ie/</a>'
},
{
coords: {
lat: 53.470580,
lng: -6.122405
},
iconImage: 'assets/img/places/galway.png',
content: '<h1>Donabate Beach</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://en.wikipedia.org/wiki/Donabate</a>'
},
{
coords: {
lat: 52.9713299,
lng: -9.4300415
},
iconImage: 'assets/img/places/clifsofmoher.png',
content: '<h1>Donabate Beach</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.cliffsofmoher.ie/</a>'
},
{
coords: {
lat: 51.8960528,
lng: -8.4980693
},
iconImage: 'assets/img/places/Cork.png',
content: '<h1>Cork</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://purecork.ie/</a>'
},
{
coords: {
lat: 53.3667776,
lng: -6.5064198
},
iconImage: 'assets/img/places/Leixlip.png',
content: '<h1>Leixlip</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://pl.wikipedia.org/wiki/Leixlip</a>'
},
{
coords: {
lat: 53.1654628,
lng: -6.125499
},
iconImage: 'assets/img/places/littlesugarloaf.png',
content: '<h1>Little Sugar Loaf</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.greystonesguide.ie/little-sugar-loafs-big-day/</a>'
},
{
coords: {
lat: 53.5474019,
lng: -6.0933048
},
iconImage: 'assets/img/places/rockabill view.png',
content: '<h1>Rockabill View</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>http://www.skerriesseatours.ie/trips.html</a>'
},
{
coords: {
lat: 52.3337499,
lng: -6.4906996
},
iconImage: 'assets/img/places/wexford.png',
content: '<h1>Wexford</h1>' + '<br>' + '<h2>Learn More</h2>' + '<a>https://www.visitwexford.ie/</a>'
},
];
// Loop through markers
var gmarkers = [];
for (var i = 0; i < markers.length; i++) {
gmarkers.push(addMarker(markers[i]));
}
//Add MArker function
function addMarker(props) {
var marker = new google.maps.Marker({
position: props.coords,
map: map,
});
/* if(props.iconImage){
marker.setIcon(props.iconImage);
} */
//Check content
if (props.content) {
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
return marker;
}
var markerCluster = new MarkerClusterer(map, gmarkers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
google.maps.event.addDomListener(window, 'load', initMap)
</script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？