[英]google maps Cannot read property 'maps' of undefined
i trying to display markers according to user location and i keep getting this error that as commenas it is i didnt find any solution that match my problem, thae error i'm getiing is : Uncaught TypeError: Cannot read property 'maps' of undefined & its referring to this :at Array.filter (native) . 我试图根据用户位置显示标记,我一直得到这个错误,作为commenas我没有找到任何符合我的问题的解决方案,我的getiing错误是:未捕获的TypeError:无法读取属性'maps'的undefined&它指的是:在Array.filter(native)。 thanks:
谢谢:
<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/ https://jsfiddle.net/1gm0u4wd/9/
Your html will be as below. 你的HTML将如下所示。 Your maps api javascript will be linked inside html section not javascript section.
您的地图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>
Note : "yourMapsAPIKey" should be your API key. 注意:“yourMapsAPIKey”应该是您的API密钥。 You can get your maps api key from here .
你可以从这里获得你的地图api密钥。
Update your script as below 更新您的脚本如下
"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);
}
};
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.