Javascript Google 地图错误 Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30989892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps error Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
提问by jharper
I'm trying to find out why my google map is not showing up. I did not create the original code. What is causing the error and my google map to disappear?
我试图找出为什么我的谷歌地图没有出现。我没有创建原始代码。是什么导致错误和我的谷歌地图消失？
//XXXX: openInfoWindowHtml
/*--------------------------------------------------*/
/* GOOGLE MAP FUNCTIONS
/*--------------------------------------------------*/
var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon;
var infoWindow = new google.maps.InfoWindow();
function initAgentMap(lat, lng) {
lat = isNaN(lat) || lat === null ? 37.4419 : lat;
lng = isNaN(lng) || lat === null ? -122.1419 : lng;
map = new google.maps.Map(document.getElementById("map-canvas"), {
center : new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.SMALL
}
});
agentMarkers = [];
reoMarkers = [];
currentMarker = null;
bounds = new google.maps.LatLngBounds();
var baseIcon = {
size : new google.maps.Size(29,25),
anchor : new google.maps.Point(15,25),
imageMap : [0, 0, 22, 0, 22, 25, 0, 25]
};
agentIcon = {
size : baseIcon.size,
anchor : baseIcon.anchor,
imageMap : baseIcon.imageMap,
url : "/images/icon_redbook.png"
};
reoIcon = {
size : baseIcon.size,
anchor : baseIcon.anchor,
imageMap : baseIcon.imageMap,
url : "/images/icon_reo.png"
};
officeIcon = {
size : baseIcon.size,
anchor : baseIcon.anchor,
imageMap : baseIcon.imageMap,
url : "/images/icon_office.png"
};
}
function plotAgent(lat, long, text, id) {
var point = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position : point,
icon : agentIcon,
anchorPoint : new google.maps.Point(12,0),
map : map
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent(text);
infoWindow.open(map, marker);
});
agentMarkers[id] = marker;
bounds.extend(point);
return marker;
}
function plotREO(lat, long, text, id) {
var point = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position : point,
icon : reoIcon,
anchorPoint : new google.maps.Point(12,0),
map : map
});
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(text);
infoWindow.open(map, marker);
});
reoMarkers[id] = marker;
bounds.extend(point);
return marker;
}
function plotOffice(lat, long, text) {
var point = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position : point,
icon : officeIcon,
anchorPoint : new google.maps.Point(12,0),
map : map
});
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(text);
infoWindow.open(map, marker);
});
officeMarker = marker;
bounds.extend(point);
return marker;
}
function showAgent(id) {
if(currentMarker != id){
currentMarker = id;
google.maps.event.trigger(agentMarkers[id], "click");
map.setZoom(11);
pnt = agentMarkers[id].getPosition();
pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
map.setCenter(pnt2);
}
}
function showREO(id) {
if(currentMarker != id){
currentMarker = id;
google.maps.event.trigger(reoMarkers[id], "click");
map.setZoom(11);
pnt = reoMarkers[id].getPosition();
pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
map.setCenter(pnt2);
}
}
function showOffice() {
if(currentMarker != 'office'){
currentMarker = 'office';
google.maps.event.trigger(officeMarker, "click");
map.setZoom(11);
pnt = officeMarker.getPosition();
pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
map.setCenter(pnt2);
}
}I'm trying to find out why my google map is not showing up. I did not create the original code. What is causing the error and my google map to disappear?
我试图找出为什么我的谷歌地图没有出现。我没有创建原始代码。是什么导致错误和我的谷歌地图消失？
回答by Mustapha George
You have provided some random javascript functions. To make a map you will need: 1) to include google maps API. 2) to define a location for map on html page 2) define map size 3) initialize map, after Windows load event is complete.
您提供了一些随机的 javascript 函数。要制作地图，您需要：1) 包含谷歌地图 API。2) 在 html 页面上定义地图的位置 2) 定义地图大小 3) 在 Windows 加载事件完成后初始化地图。
For fun, I kept hacking your code until it gave some results. This may give you some hints of where you went astray . I strongly recommend reading API documentation and reproducing examples. https://developers.google.com/maps/documentation/javascript/examples/map-simple
为了好玩，我一直在破解你的代码，直到它给出一些结果。这可能会给你一些关于你误入歧途的提示。我强烈建议阅读 API 文档并复制示例。 https://developers.google.com/maps/documentation/javascript/examples/map-simple
<html>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<style>
/* we need to define map size */
#map-canvas {
height: 350px;
width: 600px;
}
</style>
<script>
var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon;
var infoWindow = new google.maps.InfoWindow();
function initialize(){
initAgentMap(37,-122)
var marker = plotAgent(37, -122, 'hello world', 1);
marker.setMap(map); }
function initAgentMap(lat, lng) {
lat = isNaN(lat) || lat === null ? 37.4419 : lat;
lng = isNaN(lng) || lat === null ? -122.1419 : lng;
map = new google.maps.Map(document.getElementById("map-canvas"), {
center : new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.SMALL
}
});
}
function plotAgent(lat, lng, text, id) {
var point = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position : point,
title: text, // Appears on hover
label: id, // Latter on marker
});
return marker;
}
// don't start the process until Windows "load" event is completed
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
回答by Dr.Molle
The only issue seems to be the URL of the maps-API, load the API from the correct URL (as defined in the documentation) :
唯一的问题似乎是地图 API 的 URL，从正确的 URL（如文档中定义）加载 API：
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDgNW8A9SvxtI0DazJOJ7x652I2BdhWxdg"></script>
