谷歌地图api v3，getBound();不返回当前视口的纬度/经度边界 [英] google map api v3 , getBound(); doesn't returns the lat/lng bounds of the current viewport

问题描述

我需要将我的mashup页面的代码从google map api v2升级到v3.但是getBound()不适用于新代码！错误在哪里?谢谢你.

I need to make an upgrade on the code of my mashup page from google map api v2 to v3. But the getBound() doesn't work with the new code! where is the mistake? thank you in advace.

旧代码是:

   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;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&amp;v=2&amp;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>

推荐答案

当前，该地图仅可在initialize内部访问，使其可全局访问:

currently the map is only accessible inside initialize, make it globally accessible:

window.map = new google.maps.Map(/*.....*/);

此外:在地图加载完成之前，getBounds()无法返回结果(地图是异步加载的，因此您不能立即调用updateStatus()).

Furthermore: getBounds() cannot return an result before the map has finished loading(the map loads asynchronously, therefore you can't call updateStatus() immediately).

您可能会注意到tileloaded事件:

You may observe the tilesloaded-event:

google.maps.event.addListenerOnce(map,'tilesloaded',updateStatus);

但是您似乎还想观察缩放和平移，因此可以一次观察所有内容:

But as it appears that you also want to observe zooming and panning, you can observe all at once:

google.maps.event.addListener(map,'bounds_changed',updateStatus);

这篇关于谷歌地图api v3，getBound();不返回当前视口的纬度/经度边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！