为什么不是'这不是谷歌地图的一个例子吗?InvalidValueError:setMap:不是Map;的实例;

Why isn't this an instance of map of google.maps.Map? InvalidValueError: setMap: not an instance of Map;

本文关键字：InvalidValueError setMap 实例 Map 不是 这不是 谷歌地图 为什么不 一个      更新时间：2023-09-26

我在谷歌地图网页上收到错误Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama。然后我在Stack Overflow的其他地方读到了这个问题，它告诉我我需要一个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;
}

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

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

概念验证小提琴

代码片段：

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>

另一个选项是从初始化函数返回map

问题肯定是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
        });
      }

对于IE，如果使用InfoBox来显示google maps marker。请确保将type="text/javascript"放入InfoBox脚本标记中。示例：

<script type="text/javascript" src="../infobox.js"></script>
相关文章：
  • 没有找到相关文章