爲什麼不是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的一個實例;

回答

相關問題