为什么在自定义Google地图上看不到任何标记簇? [英] Why am I not seeing any marker clusters in my custom Google map?
问题描述
我真的希望您能有所帮助，因为我整天都在梳头！ 我们正在开发房地产经纪人网站，作为该过程的一部分，我希望为主页开发一个集群地图，该地图将具有指向所有房地产的链接.
I really hope you can help because I have been pulling my hair out on this one all day! We are in the process of developing an estate agency website and as part of this I am looking to develop a cluster map for the homepage which will have links to all of the properties.
我从添加的地址中获得了对地图上的几个虚拟位置进行地理编码的信息，但是当我添加了创建集群的代码后，它似乎无法正常工作. 我开始认为我没有添加足够的位置以供单击，但是我所看到的演示中只有2个标记.
I have got the map geocoding a couple of dummy locations from the addresses that I added but when I have added the code to create a cluster it does not appear to be working. I am starting to think I have not added enough locations for this to click in but the demo's I have seen around have as little as 2 markers.
到目前为止，以下是我的代码:
Below is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/data.json"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {center: new google.maps.LatLng(54, -2), zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var addressArray = new Array("3 Ard Na Cluana, Warrenpoint, BT34 3GY","19 Great Georges Street, Warrenpoint","Warrenpoint","BT34 3FS","15 Ard Na Cluana, Warrenpoint, BT34 3GY","10 Carrowmenagh Lane, Maghera","Belfast","49.286955, -123.118479");
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();
var markers = [];
for (var i = 0; i < 100; i++) {
geocoder.geocode( { "address": addressArray[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location});
markers.push(marker);
markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
}
});
}
var markerCluster = new MarkerClusterer(map, markers);
}
</script>
</head>
<body>
<div id="map_canvas" style="width:600px; height: 400px;"> </div>
<script type="text/javascript">
initialize();
</script>
</body>
</html>
如果您可以进行测试以及提供任何帮助或建议，我将不胜感激！
I would really appreciate if you could test and any help or suggestions!
提前谢谢！
推荐答案
geocode()是异步方法，需要一些时间才能完成.在填充markers之前创建markerCluster.一种选择是在for循环之前创建markerCluster并使用
geocode() is asynchronous method and needs some time to finish. markerCluster is created before markers is populated. One option is to create markerCluster before for loop and use
markerCluster.addMarker(marker, true);
在geocode()方法中.例如:
var markerCluster = new MarkerClusterer(map, markers);
for (var i = 0; i < 100; i++) {
geocoder.geocode( { "address": addressArray[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location});
markers.push(marker);
markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
markerCluster.addMarker(marker, true);
}
});
}
//var markerCluster = new MarkerClusterer(map, markers);
}
这篇关于为什么在自定义Google地图上看不到任何标记簇?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
