Question

我在Google地图网页上收到错误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;
}

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

});

Answer 1

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

proof of concept fiddle

代码段

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"></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

Answer 2

问题绝对是由于js无法访问初始化的地图。对我来说，在一个有角度的项目中，“ this.gmap”提出了一个问题，因为“ this”与“ geocoder.geocode”存根中的某些内部“ this”冲突。在解决了这个问题几个小时之后，在存根之外“让那个= 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
        });
      }

Answer 3

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

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

希望对您有帮助

为什么这不是google.maps.Map的地图实例？ InvalidValueError：setMap：不是Map的实例;

3 个答案: