Question

我的地图div容器始终位于页面上：

<div id="map_canvas"></div>

起初我试图将此附加到ajax回调中的DOM中，但是遇到了麻烦所以现在决定让它静止。

我正在尝试从jquery ajax回调

初始化地图

...
complete: function(data) {
    // build the map
    $.getScript("http://maps.google.com/maps/api/js?v=3&libraries=geometry&sensor=false&region=uk&async=2&callback=MapApiLoaded", function () {});     
    running = false;

    if(running) return false;
    running = true;
    setMarkers();
    flightPath.setMap(null); // Remove polyline
    flightPathProgress.setMap(null); // Remove polyline

    setTimeout(function() {
        flightPath.setMap(map);
        flightPathProgress.setMap(map);
        flightPathProgress.setOptions({
            strokeOpacity: 0
    });

    var progress = 0;
    var intvl = setInterval(function(){
        progress += 0.01;
        if(progress > 1) { 
            clearInterval(intvl);
            running = false;
         } else {

         }

         // Calc progress
         var progressLatLng = google.maps.geometry.spherical.interpolate(userlatlng, serverlatlng, progress);
         // Update polyline
         flightPathProgress.setOptions({
             strokeOpacity: progress,
             path: [userlatlng, progressLatLng]
         });
     }, 50);
     }, 1000);
 }

我还有以下文档就绪函数

var map;
var serverlatlng;
var userlatlng;
var servermarker;
var usermarker;
var flightPath;
var flightPathProgress;
var running;

function MapApiLoaded() {
    serverlatlng = new google.maps.LatLng(34.0625, -118.123);
    userlatlng = new google.maps.LatLng(54.167, -4.48211);
    var centerlatlng = new google.maps.LatLng(44.0835, -61.241055);

    // Create the map
    var myOptions = {
        center: centerlatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        panControl: false,
        zoomControl: false,
        streetViewControl: false,
        mapTypeControl: false
     };

     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     // Centre map on user and server locations
     var bounds = new google.maps.LatLngBounds();
     bounds.extend(serverlatlng);
     bounds.extend(userlatlng);
     map.fitBounds(bounds);

     // The grey outline path
     flightPath = new google.maps.Polyline({
         path: [userlatlng,serverlatlng],
         strokeColor: "#666",
         strokeOpacity: 0.5,
         strokeWeight: 4,
         geodesic: true,
         zIndex: 1
      });

      // The red progress path
      flightPathProgress = new google.maps.Polyline({
          path: [userlatlng,userlatlng],
          strokeColor: "#ff0000",
          strokeOpacity: 0,
          strokeWeight: 4,
          geodesic: true,
          zIndex: 2
      });
}

function setMarkers() {
    if(servermarker != undefined) servermarker.setMap(null); // Remove marker if exists
    servermarker = new google.maps.Marker({
    position: serverlatlng, 
    map: map, 
    title:"Server",
    animation: google.maps.Animation.DROP,
    icon: 'images/marker.png'
});  

    if(usermarker != undefined) usermarker.setMap(null); // Remove marker if exists
    usermarker = new google.maps.Marker({
        position: userlatlng, 
        map: map, 
        title:"User",
        animation: google.maps.Animation.DROP,
        icon: 'images/marker.png'
    }); 
}

我收到的错误消息是Uncaught TypeError: Cannot read property 'Marker' of undefined。

完整展开的消息是

Uncaught TypeError: Cannot read property 'Marker' of undefined     
www.domain.co.uk/:345
setMarkers www.domain.co.uk/:345
$.ajax.complete www.domain.co.uk/:242
fire jquery.js:3064
self.fireWith jquery.js:3176
done jquery.js:8259

callback`

Answer 1

您正在尝试在加载API之前将Google Maps API构造函数用于google.maps.Marker。

更新：在加载API之前，setMarkers函数正在运行。

Answer 2

显然，这是新版Google地图更新中的错误。它似乎只影响拥有新版本地图的用户。对于他们来说，即使在谷歌API代码示例上也不会显示标记：https://developers.google.com/maps/documentation/javascript/examples/marker-simple

开发者控制台将具有未捕获的TypeError：类型错误

如果您退出Google并访问同一页面，则最有可能看到标记

Answer 3

我解决了这个问题，因为我在这个网址末尾缺少几何体

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?    v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>

Answer 4

我认为您需要使用“script”标记加载JS google maps API，而不是使用$ .getScript。

根据jQuery API文档（http://api.jquery.com/jQuery.getScript/），getScript使用GET HTTP请求从服务器加载JavaScript文件，然后执行它。

这可能不是加载Gmaps JS API的正确方法。请注意，GMaps API的文档说：“脚本标记中包含的网址是JavaScript文件的位置，用于加载使用Google Maps API所需的所有符号和定义。此脚本标记是必需的。...要[异步加载JS API]，您可以注入自己的标记以响应window.onload事件或函数调用，但是您需要另外指示Maps JavaScript API引导程序来延迟执行您的应用程序代码应该完全加载地图JavaScript API代码。您可以使用callback参数执行此操作，该参数将完成加载API时执行的函数作为参数。“

您可以在此处查看gmaps API文档：https://developers.google.com/maps/documentation/javascript/tutorial

就我而言，我做了以下事情。请注意，此操作需要回调参数：

function initializeGmaps() {}
$(document).ready(function() {
  $('head').append('<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGmaps"><\/script>'); 
});

Google Maps v3 - 未捕获的TypeError：无法读取未定义的属性“标记”

4 个答案: