2

我有一个功能，可以为用户提供从他们的位置到地图上固定位置的方向。它正在作为外部内容加载以填充主 div，该地图在 IE 和 Firefox 上都可以正常显示，但是当我在 Chrome 中查看它时，它不会显示。Chrome 开发控制台显示内容正在加载到 div 中，并且没有出现任何错误。

外部地图.html

<script type="text/javascript" src="JS/location.js"></script>
<div id="mapContainer"></div>
<div id="writtenDir"></div>

JS加载内容：

  $('#Contact').click(function () {
    $('#centerPane').load('External/map.html');
    $.getScript("JS/location.js");
  });

位置.js

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(geoInfo, noGeoInfo);
} else {
  noGeoInfo();
}

function geoInfo(position) {
  navigator.geolocation.getCurrentPosition(function (position) { 
    var latitude = position.coords.latitude;                    
    var longitude = position.coords.longitude;                 
    var coords = new google.maps.LatLng(latitude, longitude); 
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {  
      zoom: 15,        
      center: coords, 
      mapTypeControl: true, 
      navigationControlOptions:
      {
        style: google.maps.NavigationControlStyle.SMALL 
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    };
    map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions); 
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById(''));
    var request = {
      origin: coords, 
      destination: '54.861283, -6.326805', 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
    };
    directionsService.route(request, function (response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  });
}

function noGeoInfo() { 
  var location = new google.maps.LatLng(54.861283, -6.326805); 
  var mapOptions = { 
    center: location, 
    zoom: 15, //Sets zoom level (0-21)
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };
  var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
  marker = new google.maps.Marker({  
    position: location, 
    map: map 
  });
}

要加载到的 div：

<div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

为什么 Google Chrome 中没有显示地图？（实时链接，按“联系我们” - http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/index.php）

4

1 回答 1

1

问题存在于 Nav.js 文件的第 59 行：

google.maps.event.trigger(map, 'resize');

执行map此行时未定义。

确保您的 js 文件以正确的顺序加载，并且始终在触发调整大小事件之前定义地图。

在此处输入图像描述

我希望这有帮助。

于 2013-03-16T21:44:52.100 回答