点击侧边栏元素上的 Google 集群地图打开特定信息窗口
Posted
技术标签:
【中文标题】点击侧边栏元素上的 Google 集群地图打开特定信息窗口【英文标题】：Google Cluster map on click sidebar elements open particular info window 【发布时间】：2019-03-14 08:36:05 【问题描述】：我试图在单击侧边栏元素时使用侧边栏实现集群谷歌地图，它需要在选择特定侧边栏元素时显示特定的信息窗口。我找到了一个教程，但它正在使用外部 API。但我想要实现的是获得自定义值。我正在添加我在此处添加的代码。
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBFLmEBCM9NFv4yDK6oXwDKX3FZjmvVqUk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
</head>
<body>
<div style="width:50%;float:left;">
<div id="map"></div>
<div style="width:50%; float:left;">
<a href="#" onclick="myClick(0);">Hello 1</a>
<a href="#" onclick="myClick(1);">Hello 2</a>
<a href="#" onclick="myClick(2);">Hello 3</a>
<a href="#" onclick="myClick(2);">Hello 4</a>
</div>
</div>
<script>
function initMap()
var map = new google.maps.Map(document.getElementById('map'),
zoom: 8,
center:
lat: 35.1264,
lng: 33.4299
);
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,
icon:'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
);
google.maps.event.addListener(marker, 'mouseover', function(evt)
infoWin.setContent(location.info);
infoWin.open(map, marker);
)
return marker;
);
// markerCluster.setMarkers(markers);
// 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: 35.1218939381583,
lng: 33.42075903167722,
info: " Hello 1"
,
lat: 35.11596152729056,
lng: 33.42702467193601,
info: " Hello 2"
,
lat: 35.116312569544064,
lng: 33.43535024871824,
info: " Hello 3"
,
lat: 35.11497860093425,
lng: 33.430372068786596,
info: " Hello 4"
,
];
google.maps.event.addDomListener(window, "load", initMap);
//on click function
function myClick(id)
google.maps.event.trigger(markers[id], 'click');
</script>
<style>
#map
height: 950px;
.map-imgfloat:left;
.map-titlewidth:100%; float:left;
</style>
</body>
</html>
Google Cluster 工作正常，但单击时侧边栏元素没有弹出信息窗口。
【问题讨论】：
【参考方案1】：“聚集”的标记不会添加到地图中。在您的 myClick 函数中，将它们添加到地图中或放大，以便聚类器“取消聚类”它们。
function myClick(id)
map.setCenter(markers[id].getPosition());
map.setZoom(16);
google.maps.event.trigger(markers[id], 'mouseover'); // to display InfoWindow
proof of concept fiddle
代码 sn-p：
html,
body
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
#map
height: 100%;
width: 50%;
float: right;
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
<div style="width:100%;height:100%;">
<div id="map"></div>
<div style="width:50%; float:left;">
<a href="#" onclick="myClick(0);">Hello 1</a><br>
<a href="#" onclick="myClick(1);">Hello 2</a><br>
<a href="#" onclick="myClick(2);">Hello 3</a><br>
<a href="#" onclick="myClick(3);">Hello 4</a><br>
</div>
</div>
<script>
var markers;
var map;
function initMap()
map = new google.maps.Map(document.getElementById('map'),
zoom: 8,
center:
lat: 35.1264,
lng: 33.4299
);
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.
markers = locations.map(function(location, i)
var marker = new google.maps.Marker(
position: location,
icon: 'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
);
google.maps.event.addListener(marker, 'mouseover', function(evt)
infoWin.setContent(location.info);
infoWin.open(map, marker);
)
return marker;
);
// markerCluster.setMarkers(markers);
// 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: 35.1218939381583,
lng: 33.42075903167722,
info: " Hello 1"
,
lat: 35.11596152729056,
lng: 33.42702467193601,
info: " Hello 2"
,
lat: 35.116312569544064,
lng: 33.43535024871824,
info: " Hello 3"
,
lat: 35.11497860093425,
lng: 33.430372068786596,
info: " Hello 4"
,
];
google.maps.event.addDomListener(window, "load", initMap);
//on click function
function myClick(id)
map.setCenter(markers[id].getPosition());
map.setZoom(16);
google.maps.event.trigger(markers[id], 'mouseover');
</script>【讨论】：
以上是关于点击侧边栏元素上的 Google 集群地图打开特定信息窗口的主要内容，如果未能解决你的问题，请参考以下文章