Question

我有一个使用谷歌地图api的网站（src =＆＃34; https://maps.googleapis.com/maps/api/js？key = ...）。

一个页面上有一个带有位置标记的地图，用户可以点击该地图。
当用户点击地图时，他可以选择查看该位置的详细信息。
详细位置包括两张地图（卫星视图和街景视图）。

问题是，当你登陆第二页时，你只看到谷歌地图框架，但没有地图。为了得到一个地图，我必须包含一个在第一次加载后执行的alert（）函数，然后地图显示没有问题。我对谷歌地图api有点新，我不明白这种行为。谷歌地图的代码在js文件中，插入地图的html文件在另一个文件（.php）中。所以问题是为什么我必须重新加载或使用警报（雅虎）＆＃39;下面（我已注释掉）以便加载地图..以下是代码的样子：

function initialize_single_location() {
 var currentdate = get_current_date();

$.getJSON(some code go here)
        .done(function (data) {
            for (i = 0; i < data.length; i++) {
              if(some codes go here)
                {

                    position_lat = data[i].lat;
                    position_long = data[i].long;
                    address=data[i].address;
                    city=data[i].city;
                    state=data[i].state;
                    zip=data[i].zip;
                    name=data[i].name; 
                   $('#myAddress').html('<strong>'+data[i].name +'</strong><br>' + data[i].address + '<br>' + data[i].city + ' ' + data[i].state + ' '
                    + data[i].zip + '<br>' +'Telephone: Not Provided' + '<br> Fax: Not Provided');
                   var direction = document.getElementById("directions");
                   direction.setAttribute("href", "https://www.google.com/maps/dir//"+address+"+"+city+"+"+state+"+"+zip+"");

                 } 

            }
        })
        .fail(function(jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            alert("Request Failed: " + err);
        });
          //alert('yahoo');
  var fenway = new google.maps.LatLng(position_lat, position_long);

  var mapOptions = {
    center: fenway,
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(
      document.getElementById('map-canvas2'), mapOptions);
  var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 34,
      pitch: 10
    }
  };

  var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
  map.setStreetView(panorama);

}

google.maps.event.addDomListener(window, 'load', initialize_single_location);

Answer 1

在addDomListener中，调用一个功能，检查map-canvas是否可见（直接在此页面/标签上登陆）。如果是这样，请初始化地图。我还添加了一个document.ready检查，当从另一个页面/标签切换时调用可见性检查功能：

jQuery(document).ready(function ($) {
    mapVisible();
});

function mapVisible() {
    if (!$("#googft-mapCanvas").is(":visible")) return;                      

    initialize_single_location();
}

//this will call it if you land directly on this page/tab
google.maps.event.addDomListener(window, 'load', mapVisible);

我们在jQuery选项卡中使用了此选项，切换到第二个选项卡不会重新启动window load事件。这解决了这个问题。

Answer 2

由于$getJSON()调用的异步性质，您遇到了问题。它立即返回，之后开始初始化地图。变量fenway很可能未定义，因此无法正确初始化map。这就是alert()有帮助的原因。关闭警报窗口时，会设置$getJSON.done()中的变量，之后一切正常。

您必须将地图初始化的所有代码移至.done() $getJSON()部分调用，或将其设为函数，并在.done()部分结束时调用它。

在2个不同的页面上使用2个谷歌地图，其中一个正在运行，但第二个仅在刷新后才有效

2 个答案: