- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有左侧、右侧移动标记的类别明智过滤器标记。在使用右键或左键单击控制台将一个标记移动到另一个标记时,我收到类似 TypeError: Cannot read property '__e3_' of undefined.i 的错误。我已经尝试过要解决这个问题,但我无法解决,请帮我解决这个问题吗?这是我的演示 demo .选择一些值后,例如“This city is aiiiiite”。左右按钮应该可以工作。
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>
最佳答案
当 google.maps.event.trigger
函数的对象找不到或无效时,通常会出现无法读取未定义的属性“__e3_”
错误。在您的情况下,指定的错误在两种情况下发生:
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);
关于javascript - Google map 信息窗口左箭头、右箭头传递 TypeError : Cannot read property '__e3_' of undefined?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33874885/
我正在使用 React Native 构建移动应用程序。我面临 Nativ Base Toast 问题。当我第一次加载应用程序然后导航到工单状态时,如果我返回带有 android 后退按钮的主页,则会
我正在尝试创建一个“完美的滚动条”,它是这样的:。Https://github.com/noraesae/perfect-scrollbar-bower。使用尽可能简单的代码:。我犯了以下错误:。当然
我正在尝试在简单的 Draftjs 编辑器上应用自定义装饰器: import React from 'react'; import {Editor, EditorState, RichUtils} f
读取以钟形字符作为分隔符的CSV文件时,出现类型错误。我不想使用熊猫,我需要使用CSV库来解决这个问题。。示例标题:。数据类型。样本数据:。示例代码。我明白这个错误-。铃声字符参考-https://w
我正在处理 useSelector的 react-redux在我的 React Native 应用程序中,我收到以下错误: TypeError: TypeError: (0, _reactRedux.
当我用 Node 运行以下代码时: var command = "/home/myScript.sh"; fs.exists(command, function(exists){ if(exi
我正在为我的一个组件编写测试用例,该组件具有路由器(使用 withrouter)。我收到错误 wrapper.find is not a function。基本要求是需要检查我的渲染中是否存在标签,还
我一直在研究一个简单的表单提交。首先,我想在提交表单之前创建一个模式警报。于是,我使用了bootstrap的modal函数,反复得到 TypeError: $(...).modal is not a
这个问题在这里已经有了答案: Flask-Login raises TypeError: 'bool' object is not callable when trying to override
这是我在leetcode中遇到的问题。您将看到两个非空链接表,表示两个非负整数。数字以相反的顺序存储,并且它们的每个节点都包含一个数字。将这两个数字相加,然后以链表的形式返回总和。。你可以假设这两个数
我正在尝试学习Python,并试图将GitHub问题变成一种可读的形式。根据关于如何将JSON转换为CSV的建议,我得出了以下结论:。其中“Issues.json”是包含GitHub问题的JSON文件
我在使用 Proxy 类时遇到了这个有趣的错误: TypeError: 'set' on proxy: trap returned truish for property 'users' which
在研究Jupyter笔记本电脑时,我遇到了这个问题:。这是代码开始的地方:。下面的代码是在jupyter笔记本的另一个单元上运行的。我怎么才能解决它呢?。尝试更改参数和一系列其他内容,但所有这些都弹出
Working on jupyter notebooks, I came across this problem:在研究Jupyter笔记本电脑时,我遇到了这个问题: TypeError:un
我对此很陌生(对于 Jasmine 测试、ExtJs 和 JS 来说确实很陌生),我必须修复这个错误/错误。我正在运行一些单元测试,但不断收到以下错误: TypeError: object is no
在下面的文档中,我们可以不使用JupyterDash在笔记本中运行应用程序,而只需运行app.run(jupyter_mode=“外部”)。。Https://dash.plotly.com/dash-
导入地理位置时: import { Geolocation } from '@ionic-native/geolocation/ngx'; 获取错误: ionic Geolocation :Ionic
我定义了以下函数: def eigval(matrix): a = matrix[0, 0] b = matrix[0, 1] c = matrix[1, 0] d =
刚刚获得了SDXL模型的访问权限,希望为即将发布的版本进行测试...不幸的是,我们当前用于我们服务的代码似乎不能与稳定ai/稳定-扩散-xl-base-0.9一起工作,我不完全确定SDXL有什么不同,
这是我的全部代码。我试图通过/insta/:id在我的page.ejs页面上查找,但它显示错误:。无法读取未定义的属性(正在读取‘UserName’)。。我希望获得uuidv4()将提供的id,但它返
我是一名优秀的程序员,十分优秀!