我需要将我的mashup页面的代码从google map api v2升级到v3。但是getBound()不能与新代码一起工作!错在哪里?提前谢谢你。
旧代码是:
<script src="http://maps.google.com/maps?file=api&v=2&key= (my key api)"
type="text/javascript"></script>
<script type="text/javascript">
function updateStatus() {
var div = document.getElementById('mapinfo');
div.innerHTML = map.getBounds();
document.forms[0].lat0.value = map.getBounds().getSouthWest().lat();
document.forms[0].lon0.value = map.getBounds().getSouthWest().lng();
document.forms[0].lat1.value = map.getBounds().getNorthEast().lat();
document.forms[0].lon1.value = map.getBounds().getNorthEast().lng();
get_pictures();
}
function onMapMove() {
//map.setCenter(map.getCenter());
updateStatus();
}
function onMapZoom(oldZoom, newZoom) {
//map.setCenter(map.getCenter(),newZoom)
updateStatus();
}
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
window.map = map
map.setCenter(new GLatLng(41.879786443521795,12.427597045898438), 6);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
window.kh = new GKeyboardHandler(map);
GEvent.addListener(map,'moveend',onMapMove);
GEvent.addListener(map,'zoomend',onMapZoom);
updateStatus();
}
}
</script>
新代码: <script src="http://maps.google.com/maps?file=api&v=2&key= (my api key)"
type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=weather&sensor=true">
</script>
<script type="text/javascript">
function updateStatus() {
var div = document.getElementById('mapinfo');
div.innerHTML = map.getBounds();
document.forms[0].lat0.value = map.getBounds().getSouthWest().lat();
document.forms[0].lon0.value = map.getBounds().getSouthWest().lng();
document.forms[0].lat1.value = map.getBounds().getNorthEast().lat();
document.forms[0].lon1.value = map.getBounds().getNorthEast().lng();
get_pictures();
}
function onMapMove() {
//map.setCenter(map.getCenter());
updateStatus();
}
function onMapZoom(oldZoom, newZoom) {
//map.setCenter(map.getCenter(),newZoom)
updateStatus();
}
function load() {
if (GBrowserIsCompatible()) {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(41.879786443521795,12.427597045898438),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
updateStatus();
}
}
</script>
当前map只能在initialize内部访问,让它全局可访问:
window.map = new google.maps.Map(/*.....*/);
此外:getBounds()不能在map完成加载之前返回结果(map是异步加载的,因此你不能立即调用updateStatus())。
你可以观察到tile - loaded-event:
google.maps.event.addListenerOnce(map,'tilesloaded',updateStatus);
但是你似乎也想观察缩放和平移,你可以一次观察所有:
google.maps.event.addListener(map,'bounds_changed',updateStatus);
您没有从getBounds()
调用返回任何内容的原因是因为您的map
变量不在全局作用域中。试着在你的函数之外声明你的map
变量,它应该工作-因为你的getBounds()
声明没有错。
所以像…
var map; //declaring map variable globally
function updateStatus() {
//code..
}
function onMapMove() {
//code..
}
function onMapZoom(oldZoom, newZoom) {
//code..
}
function load() {
//using the global variable
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
- v3不包含GBrowserIsCompatible。 你不应该在同一个页面上包含两个版本的API,除非你知道你在做什么。
map.getBounds()在触发bounds_changed事件之前不会返回一个有效值。您可能希望在bounds_changed的事件侦听器中运行updateStatus函数。
google.maps.event。addListener(map, 'bounds_changed', updateStatus});