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

我在google地图网页上看到错误Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama。然后我在其他地方读到了this question Stack Overflow，它告诉我需要一个google.maps.MAP对象的实例。我认为通过调用该对象来初始化我将调用该对象的地图。为什么不是google.maps.Map的地图实例？ InvalidValueError：setMap：不是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 
       }); 
      }; 
     }); 
    }); 

});

来源

2015-11-10 adin

地图变量，它是一个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

代码片段：

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

来源

2015-11-10 23:41:24 geocodezip

是所有加入'VAR地图;'为全局变量？我正在使用文本比较/脏标记，除了一些空白区域，我没有看到任何其他的东西，但你的工作，我没有。 – adin

，并从地图前面的“初始化”函数中删除了“var”，所以它会初始化该版本的变量，而不是创建一个新的函数本地。 – geocodezip

宾果，谢谢！ – adin

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

回答

相关问题