标记聚类器
Marker clusterer
请问是我代码错误还是代码排列错误。
显示侧边栏和信息窗口。但是标记还是不能聚类。(为什么?)
<!DOCTYPE html >
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</head>
<body >
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<script type="text/javascript">
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 43.907787,-79.359741), 8);
// add the points
var point = new GLatLng(43.65654,-79.90138);
var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.91892,-78.89231);
var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.82589,-78.89231);
var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
map.addOverlay(marker);
var markers = [];
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m2.png',
gridSize: 10,
minimumClusterSize: 2
});
var mc = new MarkerClusterer(map, markers);
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
</script>
</body>
</html>
希望有人能看看这个,你的帮助将不胜感激。谢谢。
你那里有一些问题。
第一题:
您不应该使用 gMap2
,因为它自 2013 年以来已被弃用。Google 已经重写了它的地图 javascript 库,使其更轻巧并与移动设备兼容,并且这是版本 3.
V3 示例:
var map = new google.maps.Map(document.getElementById("map"),
{
zoom: 6,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
第二题:
数组 markers
为空。您正在正确创建 MarkerClusterer
对象,但它已被输入一个空数组。它应该是您希望聚类器对象考虑进行聚类的标记数组。
var markers = [];
...
var mc = new MarkerClusterer(map, markers);
第三题:
您正在一遍又一遍地重新实例化变量 marker
。尝试给它们起不同的名称,例如 marker1
、marker2
... 这样您就可以稍后在代码中引用这些标记。
var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
...
第四题
这是最重要的一个。你不应该 EXPOSE 你的 Google 映射 API 键到 public!!!这让我有机会对其进行恶意操作,我相信您可能违反了许可协议。请不要再这样做了。我将修改您的 post 以审查该部分。
这是我之前在 JSFiddle 中制作的集群器示例。
请问是我代码错误还是代码排列错误。 显示侧边栏和信息窗口。但是标记还是不能聚类。(为什么?)
<!DOCTYPE html >
<html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</head>
<body >
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<script type="text/javascript">
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 43.907787,-79.359741), 8);
// add the points
var point = new GLatLng(43.65654,-79.90138);
var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.91892,-78.89231);
var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.82589,-78.89231);
var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
map.addOverlay(marker);
var markers = [];
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m2.png',
gridSize: 10,
minimumClusterSize: 2
});
var mc = new MarkerClusterer(map, markers);
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
</script>
</body>
</html>
希望有人能看看这个,你的帮助将不胜感激。谢谢。
你那里有一些问题。
第一题:
您不应该使用 gMap2
,因为它自 2013 年以来已被弃用。Google 已经重写了它的地图 javascript 库,使其更轻巧并与移动设备兼容,并且这是版本 3.
V3 示例:
var map = new google.maps.Map(document.getElementById("map"),
{
zoom: 6,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
第二题:
数组 markers
为空。您正在正确创建 MarkerClusterer
对象,但它已被输入一个空数组。它应该是您希望聚类器对象考虑进行聚类的标记数组。
var markers = [];
...
var mc = new MarkerClusterer(map, markers);
第三题:
您正在一遍又一遍地重新实例化变量 marker
。尝试给它们起不同的名称,例如 marker1
、marker2
... 这样您就可以稍后在代码中引用这些标记。
var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
...
第四题
这是最重要的一个。你不应该 EXPOSE 你的 Google 映射 API 键到 public!!!这让我有机会对其进行恶意操作,我相信您可能违反了许可协议。请不要再这样做了。我将修改您的 post 以审查该部分。
这是我之前在 JSFiddle 中制作的集群器示例。