Javascript 为什么这不是 google.maps.Map 的地图实例？InvalidValueError: setMap: 不是 Map 的一个实例；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33641663/
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
Why isn't this an instance of map of google.maps.Map? InvalidValueError: setMap: not an instance of Map;
提问by adin
I am getting the error Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanoramaon a google map web page. I then read this questionelsewhere here on Stack Overflow which told me I need an instance of the google.maps.MAPobject. I thought that by calling that object in order to initialize the map that I would be calling that object.
我Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama在谷歌地图网页上收到错误消息。然后我在 Stack Overflow 的其他地方阅读了这个问题，它告诉我我需要一个google.maps.MAP对象的实例。我认为通过调用该对象来初始化我将调用该对象的地图。
Previously, I got the error i is not definedso I moved the createMarkerfunction into the $.getJSONfunction where it has local scope.
以前，我遇到了错误，i is not defined所以我将createMarker函数移到了$.getJSON具有局部作用域的函数中。
Do I need to call google.mapsMapsomewhere else?
我需要打电话给google.mapsMap其他地方吗？
What am I doing wrong?
我究竟做错了什么？
HTML:
HTML：
<body>
<h1 style="text-align: center;">Hello World</h1>
<div id="map"></div>
<ul id="list"></ul>
</body>
CSS:
CSS：
#map {
height: 300px;
width: 600px;
border: 1px solid black;
margin: 0 auto;
}
JavaScript:
JavaScript：
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.crossroad
});
};
});
});
});
回答by geocodezip
The map variable that is an instance of a google.maps.Mapis local to the initializefunction. The map variable in the createMarkerfunction is undefined. One option: define the variable in the global scope:
作为 a 实例的映射变量是函数的google.maps.Map局部initialize变量。createMarker函数中的映射变量未定义。一种选择：在全局范围内定义变量：
var map;
then just initialize it in the initializefunction:
然后只需在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);
};
code snippet:
代码片段：
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.crossroad
});
};
});
});
});#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 mapfrom the initialize function
回答by Gaurang Kanodia
The issue is definitely with js not being able to access the initialized map. For me in an angular project, the 'this.gmap' was giving an issue as 'this' was conflicting with some internal 'this' in the 'geocoder.geocode' stub. After breaking my head over this issue for a couple of hours, 'let that = this" outside the stub gave me access to the map initialized in another method.
问题肯定是 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
});
}
回答by ?inh Thanh Hoàng
For IE,
If you are using InfoBoxto display google maps marker. Please make sure that you put type="text/javascript"in the InfoBox script tag.
Example:
对于 IE，如果您InfoBox用于显示google maps marker. 请确保您type="text/javascript"输入了 InfoBox 脚本标签。例子：
<script type="text/javascript" src="../infobox.js"></script>
Hope it helpful
希望有帮助
