为啥这不是 google.maps.Map 的地图实例？ InvalidValueError：setMap：不是 Map 的实例；
Posted
技术标签:
【中文标题】为啥这不是 google.maps.Map 的地图实例？ InvalidValueError：setMap：不是 Map 的实例；【英文标题】：Why isn't this an instance of map of google.maps.Map? InvalidValueError: setMap: not an instance of Map;为什么这不是 google.maps.Map 的地图实例？ InvalidValueError：setMap：不是 Map 的实例； 【发布时间】：2015-11-10 23:32:06 【问题描述】：我在谷歌地图网页上收到错误Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama。然后我在 Stack Overflow 上的其他地方阅读了 this question，它告诉我我需要一个 google.maps.MAP 对象的实例。我认为通过调用该对象来初始化我将调用该对象的地图。
之前，我收到了错误 i is not defined，因此我将 createMarker 函数移到了具有本地作用域的 $.getJSON 函数中。
我需要打电话给google.mapsMap吗？
我做错了什么？
html：
<body>
<h1 style="text-align: center;">Hello World</h1>
<div id="map"></div>
<ul id="list"></ul>
</body>
CSS：
#map
height: 300px;
width: 600px;
border: 1px solid black;
margin: 0 auto;
function initialize()
var mapProp =
center: new google.maps.LatLng(38, -78),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById('map'), mapProp);
;
$(document).ready(function()
var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
initialize();
$.getJSON(url, function (data)
$.each(data, function(i, field)
$('#list').append("<li>" + data[i].location.longitude + " & " + data[i].location.latitude + "</li>");
createMarker(data);
function createMarker (data)
var marker = new google.maps.Marker(
position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
map: map,
title: field.cros-s-road
);
;
);
);
);
【问题讨论】：
【参考方案1】：作为google.maps.Map 实例的映射变量是initialize 函数的本地变量。 createMarker 函数中的映射变量未定义。一种选择：在全局范围内定义变量：
var map;
然后在initialize函数中初始化它：
function initialize()
var mapProp =
center: new google.maps.LatLng(38, -78),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById('map'), mapProp);
;
proof of concept fiddle
代码 sn-p：
var map;
function initialize()
var mapProp =
center: new google.maps.LatLng(38, -78),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById('map'), mapProp);
;
$(document).ready(function()
var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
initialize();
$.getJSON(url, function(data)
$.each(data, function(i, field)
$('#list').append("<li>" + data[i].location.longitude + " & " + data[i].location.latitude + "</li>");
createMarker(data);
function createMarker(data)
var marker = new google.maps.Marker(
position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
map: map,
title: field.cros-s-road
);
;
);
);
);#map
height: 300px;
width: 600px;
border: 1px solid black;
margin: 0 auto;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h1 style="text-align: center;">Hello World</h1>
<div id="map"></div>
<ul id="list"></ul>Another option would be to return the map from the initialize function
【讨论】：
【参考方案2】：问题肯定是js无法访问初始化的地图。对我来说，在一个角度项目中，“this.gmap”给出了一个问题，因为“this”与“geocoder.geocode”存根中的一些内部“this”冲突。在解决这个问题几个小时后，在存根之外的“let that = this”让我可以访问以另一种方法初始化的地图。
ngOnInit()
this.gmap = new google.maps.Map(document.getElementById('gmap'),
center: lat: this.lat, lng: this.lng ,
zoom: this.zoom
);
this.getGeocode();
getGeocode()
debugger;
let geocoder = new google.maps.Geocoder();
let element= "Delhi";
let that = this;
geocoder.geocode( 'address': element , function (results, status)
console.dir(results);
console.dir(status);
if (status == google.maps.GeocoderStatus.OK)
that.results = results;
else
alert('Geocode was not successful for the following reason: ' + status);
that.setMarker();
);
setMarker()
this.marker = new google.maps.Marker(
position: this.results[0].geometry.location,
map: this.gmap
);
【讨论】：
【参考方案3】：对于 IE，
如果您使用InfoBox 显示google maps marker。请确保将 type="text/javascript" 放入 InfoBox 脚本标记中。
示例：
<script type="text/javascript" src="../infobox.js"></script>
希望对你有帮助
【讨论】：
以上是关于为啥这不是 google.maps.Map 的地图实例？ InvalidValueError：setMap：不是 Map 的实例；的主要内容，如果未能解决你的问题，请参考以下文章
google地图区域颜色的改变 var map = new google.maps.Map(document.getElementById("map_canvas"), myOpt