Javascript 为什么不是'；这不是google.maps.map的地图实例吗？InvalidValueError:setMap:不是Map的实例；

我得到的错误

断言失败：InvalidValueError:setMap:不是Map的实例；而不是谷歌地图网页上的街景全景。然后我在这里的其他地方读到了Stack Overflow，它告诉我需要一个
google.maps.MAP
对象的实例。我认为通过调用该对象来初始化映射，我将调用该对象

之前，我遇到了一个错误
I未定义
，因此我将
createMarker
函数移到了
$.getJSON
函数中，该函数具有本地作用域

我需要在其他地方调用
google.mapsMap
吗

我做错了什么

HTML:

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
                });
            };
        });
    });

});

函数初始化（）{
var mapProp={
中心：新google.maps.LatLng（38，-78），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map'），mapProp）；
};
$（文档）.ready（函数（）{
var url='1〕https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
初始化（）；
$.getJSON（url、函数（数据）{
$.each（数据、函数（i、字段）{
$（'#list'）。追加（“
”+数据[i].location.longitude+”&“+数据[i].location.latitude+”
”）；
创建标记（数据）；
函数createMarker（数据）{
var marker=new google.maps.marker({
位置：新建google.maps.LatLng（数据[i].location.latitude，数据[i].location.longitude），
地图：地图，
标题：field.crossroad
});
};
});
});
});
作为
google.maps.map
实例的map变量是
initialize
函数的本地变量。
createMarker
函数中的map变量未定义。一个选项：在全局范围内定义变量：

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);
};


代码片段：


var映射；
函数初始化（）{
var mapProp={
中心：新google.maps.LatLng（38，-78），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map'），mapProp）；
};
$（文档）.ready（函数（）{
var url='1〕https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
初始化（）；
$.getJSON（url、函数（数据）{
$.each（数据、函数（i、字段）{
$（'#list'）。追加（“
”+数据[i].location.longitude+”&“+数据[i].location.latitude+”
”）；
创建标记（数据）；
函数createMarker（数据）{
var marker=new google.maps.marker({
位置：新建google.maps.LatLng（数据[i].location.latitude，数据[i].location.longitude），
地图：地图，
标题：field.crossroad
});
};
});
});
});
#地图{
高度：300px；
宽度：600px；
边框：1px纯黑；
保证金：0自动；
}

你好，世界
问题肯定是js无法访问初始化的映射。对我来说，在一个angular项目中，“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
        });
      }

对于IE，
如果您使用
InfoBox
显示
googlemaps标记
。请确保将
type=“text/javascript”
放入InfoBox脚本标记中。
例如：



希望对你有帮助

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);
};

        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
        });
      }

<script type="text/javascript" src="../infobox.js"></script>