谷歌地图信息窗口左箭头,右箭头传递TypeError:无法读取属性'__e3_'的未定义
Google map info window left arrow,right arrow passing TypeError: Cannot read property '__e3_' of undefined?
我有左侧、右侧移动标记的分类过滤标记。当使用右键或左键单击控制台将一个标记移动到另一个标记时,我遇到了类似TypeError的错误:无法读取未定义的属性'__e3_'。我曾尝试解决此问题,但无法解决。请帮助我解决此问题?这是我的演示演示。选择一些值后,如"This city is aiiiite"。左右键应该可以工作。
angular.module('mapsApp', [])
.controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$compile', function($scope, $http, $location, $window, $compile) {
var cities = [{
id: '02jdjd',
city: 'Toronto',
desc: 'World Largest city,This city is live,This is the second best city in the world',
lat: 43.7000,
long: -79.4000,
icon:'http://labs.google.com/ridefinder/images/mm_20_purple.png'
}, {
id: '02jdjdsss',
city: 'New York',
desc: 'coastal area,This city is aiiiiite, ',
lat: 40.6700,
long: -73.9400,
icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
}, {
id: '02jdjdsssws',
city: 'Chicago',
desc: 'This is the second best city in the world',
lat: 41.8819,
long: -87.6278,
icon:'http://labs.google.com/ridefinder/images/mm_20_green.png'
}, {
id: '02jdjdsssz',
city: 'Los Angeles',
desc: 'This city is live,coastal area,incredible city',
lat: 34.0500,
long: -118.2500,
icon:'http://labs.google.com/ridefinder/images/mm_20_blue.png'
}, {
id: '02jdjdssq',
city: 'Las Vegas',
desc: 'the most populous city,This city is live,This city is aiiiiite',
lat: 36.0800,
long: -115.1522,
icon:'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
},
{
id: '6djdsss3',
city: 'Toronto New',
desc: 'This is the best city in the world',
lat: 36.82220,
long: -115.9500,
icon:'http://labs.google.com/ridefinder/images/mm_20_purple.png'
}
];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function(info,i) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city,
icon: info.icon
});
marker.content = "<div><h2>"+marker.title+"</h2><input type='button' value='get' ng-click='get('""+ info.id + "'")'/>" + "<div class='infoWindowContent'>" + info.desc + "</div><div class='infoWindowContent'>" + info.city + "</div><div class='bar'><div style='float: left;'><button ng-click='markerClick("+(i-1)+")'><< LEFT</button></div><div style='float: right;'><button ng-click='markerClick("+(i+1)+")'>RIGHT >></button></div></div></div>";
google.maps.event.addListener(
marker,
'click', (function(marker, $scope) {
return function() {
var compiled = $compile(marker.content)($scope);
// $scope.$apply();
infoWindow.setContent(compiled[0]);
infoWindow.open($scope.map, marker);
};
})(marker, $scope)
);
$scope.markers.push(marker);
}
$scope.markerClick=function(i){
console.log("in marker click"+i);
google.maps.event.trigger( $scope.markers[i], 'click' );
}
$scope.get = function(id) {
console.log(id);
//alert("from $scope.get id : "+id);
}
for (i = 0; i < cities.length; i++) {
createMarker(cities[i],i);
}
$scope.openInfoWindow = function(e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
$scope.clearMarkers = function() {
for (var i = 0; i < $scope.markers.length; i++) {
$scope.markers[i].setMap(null);
}
$scope.markers.length = 0;
}
$scope.filterMarkers = function() {
//1.select filtered cities
var filteredCities;
var cityDesc = $scope.data.singleSelect;
if (cityDesc == '0') {
filteredCities = cities;
} else {
filteredCities = cities.filter(function(c) {
if (c.desc.indexOf(cityDesc) > -1)
return c;
});
}
//2.update markers on map
$scope.clearMarkers();
for (i = 0; i < filteredCities.length; i++) {
createMarker(filteredCities[i]);
}
}
}]);
#map {
height: 420px;
width: 600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}
.bar {
width:200px;
display:inline-block;
overflow: auto;
white-space: nowrap;
margin:0px auto;
border:1px red solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"> </script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<br>
<br>
<label>Filter Marker </label>
<br>
<select name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers()">
<option value="0">all</option>
<option value="This is the best city in the world">This is the best city in the world</option>
<option value="This city is aiiiiite">This city is aiiiiite</option>
<option value="the most populous city">the most populous city</option>
<option value="This city is live">This city is live</option>
<option value="coastal area">coastal area</option>
<option value="World Largest city">World Largest city</option>
<option value="incredible city">incredible city</option>
</select>
<br>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
错误Cannot read property '__e3_' of undefined
通常发生在google.maps.event.trigger
函数的对象找不到或无效时。在您的情况下,指定的错误发生在两种情况下:
1) markerClick
事件被触发,在某个时刻您得到了标记越界数组
因此,为了防止这种情况的发生,markerClick
函数可以替换为:
$scope.markerClick=function(i){
if (i<0) i=$scope.markers.length-1;
if (i >= $scope.markers.length) i=0;
google.maps.event.trigger( $scope.markers[i], 'click' );
};
正如在另一个答案中所建议的那样
2) 发生过滤时,由于createMarker
函数需要两个参数,因此替换
createMarker(filteredCities[i]);
带有
createMarker(filteredCities[i],i);
修改的JSFiddle
在代码中,当i==0
时,左键调用markerClick(-1)
。
marker.content = "<div><h2>"+marker.title+
"</h2><input type='button' value='get' ng-click='get('""+
info.id + "'")'/>" + "<div class='infoWindowContent'>" +
info.desc + "</div><div class='infoWindowContent'>" +
info.city + "</div><div class='bar'><div style='float: left;'>"+
"<button ng-click='markerClick("+(i-1)+
")'><< LEFT</button></div><div style='float: right;'>"+
"<button ng-click='markerClick("+(i+1)+
")'>RIGHT >></button></div></div></div>";
修改markerClick
函数以检测并返回。
$scope.markerClick=function(i){
if (i<0) return;
if (i >= $scope.markers.length) return;
google.maps.event.trigger( $scope.markers[i], 'click' );
};
请注意,我还添加了用于检测i
何时位于列表末尾的代码。
更新
如果您希望函数包装,请使用以下代码:
$scope.markerClick=function(i){
if (i<0) i=$scope.markers.length-1;
if (i >= $scope.markers.length) i=0;
google.maps.event.trigger( $scope.markers[i], 'click' );
};
在这段代码中,如果您在开头向左单击,它将转到列表末尾的标记。类似地,在末尾的右侧单击;你要从头开始。
相关文章:
- TypeError:无法读取属性'推'未定义的JavaScript
- 同样,同样的错误'ahorcado.js:26未捕获类型错误:无法读取属性'beginPath'
- 未捕获的TypeError无法读取未定义的属性socialsharing
- 未捕获的类型错误:无法读取属性'删除'的未定义
- AngularJS指令出错-无法读取属性'编译'的未定义
- 未捕获的类型错误:无法读取属性'name'即使它存在,也无法定义
- 看到“;未捕获的类型错误:无法读取属性'weight'未定义的“;尽管按照字面上的指示
- angularjs无法读取未定义的属性then
- 无法读取属性'材料'未定义的Three.js
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- 未捕获的类型错误:无法读取属性'addEventListener'的null chrome扩展名
- Soundcloud Javascript SDK 3.0-回调无法读取属性'connectCallback
- 未捕获的类型错误:无法读取属性'状态'在react中为null
- JavaScript承诺-无法读取属性'那么'的未定义
- Javascript Float32数组抛出无法读取属性'0'即使数组定义良好,也为null
- 未捕获的类型错误:无法读取属性'中止'的未定义
- 角度推入数组给出:TypeError:无法读取属性'推'的未定义
- http/rxjs catch回调中的Angular 2重定向导致TypeError:无法读取属性'订阅'
- 角度输入模型有条件地从一个属性读取,写入另一个属性