0

在 web 应用程序中，我正在使用 ajax 加载页面（带有地图的 googlemap.asp）。

我正在使用 jquery.load 在 div 中加载“googlemap.asp”，它在左上角显示中心。当我以这种方式加载地图时，它没有正确渲染地图。

但是如果我只是直接在浏览器中加载“googlemap.asp”（没有ajax）那么它会正确显示，所以我想当我用ajax加载它时我必须以某种方式重新刷新它？

这就是我所拥有的：

<div id="map_canvas" style="height:600px; width:320px;" ></div>

window.onload=googleMaploadScript();
var address1 = document.getElementById('address').value;

function googleMaploadScript() {
    var script =document.createElement("script");
    script.type="text/javascript";
    script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);  
    }




var geocoder;
var map;
function initialize() {

  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(57.109577,12.286513),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  
  codeAddress(address1);

}

function codeAddress(address) {
  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,
      });    
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}

由于我使用 .load 加载页面是隐藏的，直到您导航到 div，然后它变得可见，也许这就是问题所在？我想我以某种方式以错误的顺序加载它，这就是它渲染不正确的原因，或者可能是 div 在开始时不可见？

任何输入表示赞赏，谢谢。

4

2 回答 2

2

我以前也有同样的问题

不要使用

 geocoder.geocode( { 'address': address}, function(results, status) {.....

使用 ajax 加载页面时，“geocoder.geocode ...”无法返回正确的geometry.location。
我不为什么

但是当我尝试更改我的代码时，地图正在工作

我的代码喜欢

    $.ajax({
        url: "http://maps.googleapis.com/maps/api/geocode/json?address="+youraddress+"&sensor=false",
        type : "POST",
        dataType: "json",
        cache: false,
        success: function(result){
           if(result.results.length){
            lat=result.results[0].geometry.location.lat;
            lng=result.results[0].geometry.location.lng;

           //map
           var map     
            var latlng = new google.maps.LatLng(lat, lng);     
            var mapOptions = {
              zoom: 15,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
          ............
于 2013-06-19T09:23:45.973 回答
1 
Developers should trigger this event on the map when the div changes size:

google.maps.event.trigger(map, 'resize')
于 2013-06-10T11:22:14.553 回答