谷歌地圖無法讀取屬性的'地圖'的undefined

Question

我試圖根據用戶位置顯示標記，我一直得到這個錯誤，因爲它是我沒有找到任何解決方案，匹配我的問題， 我錯誤的getiing是：Uncaught TypeError：無法讀取屬性'maps'的未定義&其引用此：at Array.filter（native）。 感謝：

<script src="https://maps.googleapis.com/maps/api/js?key="My_Api_Key"&libraries=geometry"></script> 
<script> 
    "use strict"; 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(
      function(position) { 

       var markers = @Html.Raw(Json.Encode(Model.UpcomingLectureGigs)); 
       var currentLatitude = position.coords.latitude; 
       var currentLongitude = position.coords.longitude; 
       var userLatLng = currentLatitude + currentLongitude; 
       var markersFiltered = markers.filter(function(markers, index, array, google) { 
       var myLatlng = new window.google.maps.LatLng(markers.Latitude, markers.Longitude); 

        return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000; 
       }); 
       window.onload = function(a) { 
        var mapOptions = { 
         center: new window.google.maps.LatLng(markers[0].Latitude, markers[0].Longitude), 

         zoom: 8, 
         mapTypeId: window.google.maps.MapTypeId.ROADMAP 
        }; 

        var infoWindow = new window.google.maps.InfoWindow(); 
        var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions); 

        for (var i = 0; i < markersFiltered.length; i++) { 
         var data = markers[i]; 
         var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude); 
         var marker = new window.google.maps.Marker({ 
          position: myLatlng, 
          draggable: true, 
          animation: google.maps.Animation.DROP, 
          get map() { return map; } 
         }); 
         (function(marker, data) { 
          window.google.maps.event.addListener(marker, 
           "click", 
           function(e) { 
            infoWindow.setContent(data.Venue + " " + data.Genre.Name); 
            infoWindow.open(map, marker); 
           }); 
         })(marker, data); 
        } 

       }; 
      }); 
    }; 
</script> 

https://jsfiddle.net/1gm0u4wd/9/

Answer 1

你的HTML將如下所示。您的地圖api javascript將鏈接在html部分而不是javascript部分。

<div id="map" style="width: 500px; height: 500px"/> 

<script src="https://maps.googleapis.com/maps/api/js?key=yourMapsAPIKey&libraries=geometry"></script> 

注意：「yourMapsAPIKey」應該是您的API密鑰。 您可以從here獲取您的地圖api密鑰。

更新腳本如下

"use strict"; 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(
    function(position) { 
     var currentLatitude = position.coords.latitude; 
     var currentLongitude = position.coords.longitude; 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: new google.maps.LatLng(currentLatitude, currentLongitude), 
     }); 

     //your dynamic markers 
     var markers = @Html.Raw(Json.Encode(Model.UpcomingLectureGigs)); 

     //default marker at current location 
     //var markers = new google.maps.Marker({ 
     //position: new google.maps.LatLng(currentLatitude, currentLongitude), 
     //map: map, 
     //title: 'Hello World!' 
     //}); 

     var userLatLng = new window.google.maps.LatLng(currentLatitude, currentLongitude); 

     //your filter function 
     var markersFiltered = markers.filter(function(markers, index, array, google) { 
     var myLatlng = new window.google.maps.LatLng(markers.Latitude, markers.Longitude); 
     return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000; 
     }); 

     window.onload = function(a) { 
     var mapOptions = { 
      center: new window.google.maps.LatLng(markers[0].Latitude, markers[0].Longitude), 
      zoom: 8, 
      mapTypeId: window.google.maps.MapTypeId.ROADMAP 
     }; 

     var infoWindow = new window.google.maps.InfoWindow(); 
     var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions); 

     for (var i = 0; i < markersFiltered.length; i++) { 
      var data = markers[i]; 
      var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude); 
      var marker = new window.google.maps.Marker({ 
      position: myLatlng, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      get map() { 
       return map; 
      } 
      }); 
      (function(marker, data) { 
      window.google.maps.event.addListener(marker, 
       "click", 
       function(e) { 
       infoWindow.setContent(data.Venue + " " + data.Genre.Name); 
       infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     } 

     }; 
    }); 
}; 

Fiddle here