我的地图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®ion=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`
答案 0 :(得分:5)
您正在尝试在加载API之前将Google Maps API构造函数用于google.maps.Marker。
更新: 在加载API之前,setMarkers函数正在运行。
答案 1 :(得分:5)
显然,这是新版Google地图更新中的错误。它似乎只影响拥有新版本地图的用户。对于他们来说,即使在谷歌API代码示例上也不会显示标记:https://developers.google.com/maps/documentation/javascript/examples/marker-simple
开发者控制台将具有未捕获的TypeError:类型错误
如果您退出Google并访问同一页面,则最有可能看到标记
答案 2 :(得分:5)
我解决了这个问题,因为我在这个网址末尾缺少几何体
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>
答案 3 :(得分:0)
我认为您需要使用“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>');
});