[英]Javascript array push it (Salt n Pepa style)
嘿,向我添加有关Google Maps API V3的数组时,我需要一些帮助。
以下是我用位置标记填充地图的代码:
var geocoder;
var map;
var infowindow = null;
var addresses = [];
var theMarkers = [];
function initialize() {
var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);
geocoder = new google.maps.Geocoder();
addresses.push("11111","22222","33333");
for(i in addresses) {
var address = addresses[i];
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var bounds = new google.maps.LatLngBounds();
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var tmpAddress = results[0].formatted_address;
tmpAddress = tmpAddress.split(',');
theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
/*theMarkers = [
['city1', 00.0000, -00.000000, 1, 'This is HTML Test 1'],
['city2', 00.00000, -00.000000000, 2, 'This is HTML Test 2'],
['city3', 00.00000, -00.000000, 3, 'This is HTML Test 3']
];*/
var mapOptions = {
zoom: 0,
center: centerMap,
panControl: false,
zoomControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeControl: false
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setZoom(map, theMarkers);
setMarkers(map, theMarkers);
infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
}
function setZoom(map, markers) {
var boundbox = new google.maps.LatLngBounds();
for ( var i = 0; i < markers.length; i++ )
{
boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
}
map.setCenter(boundbox.getCenter());
map.fitBounds(boundbox);
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var site = markers[i];
var site = markers[i];
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4],
draggable: false,
//Markers drop on the map
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
//marker.setAnimation(google.maps.Animation.BOUNCE);
});
}
}
虽然工作没有上面我的错误不再有围绕我静态设置theMarkers时使用有标记的区域变焦。
在for(在地址中的i){}中使用theMarkers.push时 ,地图如下所示:
但是当我在完成for(i在地址中){} 之后手动制作标记时:
theMarkers = [
['city1', 00.0000, -00.000000, 1, 'This is HTML Test 1'],
['city2', 00.00000, -00.000000000, 2, 'This is HTML Test 2'],
['city3', 00.00000, -00.000000, 3, 'This is HTML Test 3']
];
然后,地图如下所示:
我需要让它在循环中完成。
地理编码器是异步的,您需要在要运行的最后一个回调中设置缩放。 最简单的修复方法是,将bounds.extend / fitBounds移动到回调中并使边界成为全局:
bounds.extend(results[0].geometry.location);
geocodedResults++;
if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);
更新了初始化函数:
function initialize() {
var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);
geocoder = new google.maps.Geocoder();
addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"];
for (var i = 0; i < addresses.length; i++) {
var address = addresses[i];
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var tmpAddress = results[0].formatted_address;
tmpAddress = tmpAddress.split(',');
theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
bounds.extend(results[0].geometry.location);
geocodedResults++;
if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
var mapOptions = {
zoom: 0,
center: centerMap,
panControl: false,
zoomControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, theMarkers);
infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
}
代码段:
var map; var bounds = new google.maps.LatLngBounds(); var infowindow = null; var addresses = []; var theMarkers = []; var geocodedResults = 0; function geocodeAddress(address, i) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); var tmpAddress = results[0].formatted_address; tmpAddress = tmpAddress.split(','); theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]); bounds.extend(results[0].geometry.location); geocodedResults++; if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } function initialize() { var centerMap = new google.maps.LatLng(45.3517923, 6.3101660); geocoder = new google.maps.Geocoder(); addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"]; for (var i = 0; i < addresses.length; i++) { var address = addresses[i]; geocodeAddress(address, i); } var mapOptions = { zoom: 0, center: centerMap, panControl: false, zoomControl: false, scaleControl: false, streetViewControl: false, mapTypeControl: false }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // setZoom(map, theMarkers); setMarkers(map, theMarkers); infowindow = new google.maps.InfoWindow({ content: "Loading..." }); } function setZoom(map, markers) { var boundbox = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) { boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2])); } map.setCenter(boundbox.getCenter()); map.fitBounds(boundbox); } function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { var site = markers[i]; var siteLatLng = new google.maps.LatLng(site[1], site[2]); var marker = new google.maps.Marker({ position: siteLatLng, map: map, title: site[0], zIndex: site[3], html: site[4], draggable: false, //Markers drop on the map animation: google.maps.Animation.DROP }); google.maps.event.addListener(marker, "click", function() { infowindow.setContent(this.html); infowindow.open(map, this); //marker.setAnimation(google.maps.Animation.BOUNCE); }); } } google.maps.event.addDomListener(window, 'load', initialize);
<script src="http://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="height: 500px; width:500px;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.