google 地图集群不工作
google map cluster not working
<script>
var lat = "";
var map = "";
var markers = [];
function initMap() {
if ($("#map").length) {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.498214, 127.027535),
scrollwheel: true,
mapTypeControl: false
};
var geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var image = 'img/marker.png';
for (i = 0; i < 1; i++) { // this database size
var address = 'addressvalue';
geocoder.geocode({'address': address}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location;
lat = lat.toString().split(" ");
lat[0] = lat[0].replace('(', '');
lat[0] = lat[0].replace(',', '');
lat[1] = lat[1].replace(')', '');
map.setCenter(new google.maps.LatLng(lat[0], lat[1]));
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image,
title: 'test'
});
markers.push(marker);
var infowindow = new google.maps.InfoWindow({
content: '<div>1234</div>'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 10,
gridSize: 10
});
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
}
</script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/data.json"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
我按照 google 地图 API 但是我遇到了问题。
我想要标记和集群。这是问题。
点击标记时,显示window标题。这不是问题。
我哪里做错了?
问题是您正在进行异步的 geocoder.geocode()
函数调用,以获取创建标记的数据。但是,您创建 MarkerClusterer 的行不在该地理编码函数的回调中。所以它会在创建标记之前发生,并且此时只使用一个空数组。
我不完全确定你的 for
循环的意义所在。但假设您需要它,诀窍可能是在地理编码之前创建一个空的 MarkerClusterer。然后在回调中,在创建每个标记后立即将其添加到 MarkerClusterer 中。
像这样:
var markerClusterer = new MarkerClusterer(map, [], {
maxZoom: 10,
gridSize: 10
});
for (i = 0; i < 1; i++) { // this database size
var address = 'addressvalue';
geocoder.geocode({'address': address}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image,
title: 'test'
});
markers.push(marker);
markerClusterer.addMarker(marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
<script>
var lat = "";
var map = "";
var markers = [];
function initMap() {
if ($("#map").length) {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.498214, 127.027535),
scrollwheel: true,
mapTypeControl: false
};
var geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var image = 'img/marker.png';
for (i = 0; i < 1; i++) { // this database size
var address = 'addressvalue';
geocoder.geocode({'address': address}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location;
lat = lat.toString().split(" ");
lat[0] = lat[0].replace('(', '');
lat[0] = lat[0].replace(',', '');
lat[1] = lat[1].replace(')', '');
map.setCenter(new google.maps.LatLng(lat[0], lat[1]));
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image,
title: 'test'
});
markers.push(marker);
var infowindow = new google.maps.InfoWindow({
content: '<div>1234</div>'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: 10,
gridSize: 10
});
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
}
</script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/data.json"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
我按照 google 地图 API 但是我遇到了问题。
我想要标记和集群。这是问题。
点击标记时,显示window标题。这不是问题。
我哪里做错了?
问题是您正在进行异步的 geocoder.geocode()
函数调用,以获取创建标记的数据。但是,您创建 MarkerClusterer 的行不在该地理编码函数的回调中。所以它会在创建标记之前发生,并且此时只使用一个空数组。
我不完全确定你的 for
循环的意义所在。但假设您需要它,诀窍可能是在地理编码之前创建一个空的 MarkerClusterer。然后在回调中,在创建每个标记后立即将其添加到 MarkerClusterer 中。
像这样:
var markerClusterer = new MarkerClusterer(map, [], {
maxZoom: 10,
gridSize: 10
});
for (i = 0; i < 1; i++) { // this database size
var address = 'addressvalue';
geocoder.geocode({'address': address}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image,
title: 'test'
});
markers.push(marker);
markerClusterer.addMarker(marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}