- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 Google Maps API 构建了一个 map ,该 map 将根据 'whereNew.js' 中的纬度和经度绘制点,其颜色将取决于 'MarketData.js' 中的另一个参数。单击该标记时,它将显示一个信息窗口,其中包含“显示路线”按钮和一些基于“MarketData.js”的信息。至此代码已成功执行。
此后,当单击任何标记中的“显示路线”按钮时,我希望 Google Maps API 显示从“MarketData.js”第 8 列的每个位置到该标记的所有路线。但是,当我单击该按钮,出现此错误:
Uncaught TypeError: Cannot read property 'route' of undefined at calculateAndDisplayRoute
whereNewTest1.html:162
我不明白我做错了什么。请帮忙
whereNewTest1.html
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markets of Kolkata</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
#warnings-panel {
width: 100%;
height: 10%;
text-align: center;
}
</style>
<link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<!-- If you are in China, you may need to use theis site for the Google Maps code
<script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> -->
<!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> -->
<!-- <script async defer src=
"https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyDrdSH53E0MRIfajUGZQiFHAB0aLfzFIVU&v=3&v=3&callback=displayDirections"></script>
</script> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbXta5ppMyzPmTCGNsyP-djMlSOGJ9t9o&callback=initialize">
</script>
<script src="whereNew.js"></script>
<script src="marketData.js"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var markerArray = [];
var dest ;
function initialize()
{
//alert("To see the title of a marker, hover over the marker but don't click.");
var myLatlng = new google.maps.LatLng(22.39361,88.099263)
var mapOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var markerArray = [];
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer(
{
map: map
});
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
i = 0;
var markers = [];
for ( pos in myData )
{
var row = myData[pos];
var row1 = MarketInfo[i];
window.console && console.log(row) && console.log(row1);
// if ( i < 3 ) { alert(row); }
var newLatlng = new google.maps.LatLng(row[0], row[1]);
var marker = new google.maps.Marker(
{
position: newLatlng,
map: map,
title: row[3],
});
var infowindow = new google.maps.InfoWindow({ });
var largeInfowindow = new google.maps.InfoWindow({ });
dest = row1[1];
var content = row1[2] + '<br/><button onclick = "calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest);">Show Routes</button>';
if((content.search("WHOLESALE"))>-1)
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
else if((content.search("WHOLE SALE"))>-1)
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
else if((content.search("MAJOR"))>-1)
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
}
else
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow)
{
return function()
{
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
markers.push(marker);
i = i + 1;
}
function populateInfoWindow(marker, infowindow)
{
if(infowindow.marker != marker)
{
infowindow.marker = marker;
infowindow.setContent('<div>'+infowindow.content+'</div>');
infowindow.open(map, marker);
infowindow.addListener('closeclick', function(){
infowindow.setMarker(null);
});
}
}
}
function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, dest)
{
for (var i = 0; i < markerArray.length; i++)
{
markerArray[i].setMap(null);
}
for (pos in MarketInfo)
{
var row = MarketInfo[pos];
// Second loop for multiple destination
var str_array = row[7].split(',');
for (var j = 0; j < str_array.length; j++)
{
directionsService.route(
{
origin: str_array[j],
destination: dest,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK')
{
document.getElementById('warnings-panel').innerHTML = '<b>' + response.routes[0].warnings + '</b>';
var dirDisplay = new google.maps.DirectionsRenderer({
map: map
});
dirDisplay.setDirections(response);
}else
{
window.alert('Directions request failed due to ' + status);
}
});
}
}
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="height: 600px"></div>
<p>
<b>Developed by</b>
<a href="http://www.linkedin.com/in/arnab-chakravarty-8a329111b?trk=nav_responsive_tab_profile"><b>Arnab Chakravarty</b></a>.
</p>
</body>
</html>
whereNew.js
myData = [
[22.5193768,88.3656851, 'K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata, West Bengal 700019, India', 'PAL BAZAR'],
[22.4977887,88.3796042, 'Garfa Main Rd, Kolkata, West Bengal 700075, India', 'RAMLAL BAZAR'],
[22.5048463,88.3882325, 'Purbachal Main Rd, Ramlal Bazar, Haltu, Kolkata, West Bengal 700078, India', 'COLLEGE STREET MARKET ( SPORTS GOODS)']
];
MarketData.js
MarketInfo = [
["GARIAHAT KMC MARKET", "K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata- 700019", "MAJOR (1400SHOP + HOWKER)", "FRUITS, VEGETABLES, FLOWER, FISH, MEAT, GROCERY, CLOTHING, FURNITURE , HOUSEHOLD, FOOTWEAR ELECTRICAL ETC", "", "", "BARABAZAR, KOLEYMART", "HOWRAH", "We collect the goods ourselves", "", "MANY", "Cars, Light goods vehicles (LGV), Heavy goods vehicles/lorries (HGV)", "Within one hour", "", "", "No problems encountered", "", "IF A UNLOADING SPACE CAN PROVIDE BY GOVT. IT WILL BE BETTER"],
["PAL BAZAR", "GARIFA MAIN ROAD, KOLKATA - 700 075", "MINOR (150SHOP + 70HOWKERS)", "FRESH, COOL AND FROZEN PRODUCT, OTHER TYPE OF CONSUMER GOODS, TEXTILE,FOOTWEAR, ELECTRONIC AND ELECTRICAL EQUIPMENT, BUILDING MATERIALS", "", "SANDHYA BAZAR", "BARA BAZAR, CHADNI CHOWK", "", "The goods are delivered by multiple suppliers", "MANY", "10 TO 20", "Bicycles/tricycles/carts, Motorised two/three-wheelers", "Within one hour", "", "", "Delivery vehicle causes traffic jams in front of the establishment", "", ""],
["RAMLAL BAZAR", "Purbachal Main Rd, Ramlal Bazar, Haltu. Kolkata-700078", "MINOR (150 SHOP+ 180 HOWKERS)", "FRUITS, VEGETABLE, FISH, MEAT, GROCERY, TEXTILE, ELECTRICAL, BUILDING MATERIALS ETC", "", "BAGHAJATIN AND SANDHYA BAZAR", "BARA BAZAR, EZRA ST.", "", "We collect the goods ourselves", "", "MANY", "Bicycles/tricycles/carts, Motorised two/three-wheelers, Light goods vehicles (LGV)", "Within one hour", "", "", "Limited storage space available, Delivery vehicle causes traffic jams in front of the establishment, High delivery costs", "", "PARKING PLACE REQUIRE"]
];
最佳答案
问题出在这行代码
var content = row1[2] + '<br/><button onclick = calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, map, row1[1]);>Show Routes</button>';
onclick
需要用双引号引起来的函数名称
由于您将 HTML 创建为字符串,因此您传递的参数不会被捕获。您可以尝试使用全局变量并查看结果。
编辑:
我对代码进行了以下更改
在初始化函数之外声明全局变量:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var markerArray = [];
function initialize() {
将错误行更改为:
var content = row1[2] + '<br/><button onclick="calculateAndDisplayRoute(' + i + ')">Show Routes</button>';
注意,我正在发送行标识符 (i)。我已经删除了所有其他参数。
calculateAndDisplayRoute
的签名是:
function calculateAndDisplayRoute(i) {
var destination1 = MarketInfo[i][1];
...
}
关于javascript - 未捕获的类型错误 : Cannot read property 'route' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45369876/
我有一个阅读器,其中包含有关 51*51 网格的信息,其中网格上的每个点都由 f32 表示。 .我想将这些数据读入一个向量,以便我可以轻松处理它: pub fn from_reader(reader:
我重新启动了 SQL Server 2005 并运行了统计 IO 的查询。 我得到了这些结果:表“xxx”。扫描计数 1,逻辑读取 789,物理读取 3,预读读取 794,... 预读读取数是读取并放
在 CLHS 中,我为 :read-only x 读到:“当 x 为真时,这指定不能更改此插槽;它将始终包含构造时提供的值。” 我可以做到这一点(CCL、SBCL): CL-USER> (defstr
让我们考虑一下这句话(Total Store Ordering): reads are ordered before reads, writes before writes, and reads be
我正在开发一个 SMTP 库,它使用缓冲读取器通过网络读取行。 我想要一种安全的方式来从网络读取数据,而不依赖于 Rust 内部机制来确保代码按预期工作。具体来说,我想知道 Read trait 是否
我不清楚所有这些读取字符串函数之间的关系。嗯,很明显clojure.core/read-string可以读取 pr[n] 输出的任何序列化字符串甚至 print-dup .也很清楚clojure.ed
所以我做了这个功能,就像倒计时一样。我想在倒计时减少时读取命令。我的大问题是让 read() 在倒计时减少时等待输入。如您所见,我尝试使用 select() 但在第一个 printf 之后("time
这是我vue3+echart5 遇到的报错:Cannot read properties of undefined (reading ‘type‘) 这个问题需要搞清楚两个关键方法: toRaw: 作
下图中,左边是C代码,右边是未优化的LLVM IR形式。 The Figure 在 IR 上运行 MemoryDependenceAnalysis 可查找内存依赖性。原始代码及其 IR 等效代码中
这个问题在这里已经有了答案: Read values into a shell variable from a pipe (17 个答案) 关闭 3 年前。 我一直在尝试像这样从程序输出中读取环境变
当我输入相同的整数时,如何将整数转换为与使用 read(0,buff,nbytes) 获得的缓冲区相同的值/编码字符?我正在尝试编写类似 read() 的东西,但用整数数据代替读取到缓冲区的文件描述符
This question already has answers here: Closed 2 years ago. Read input in bash inside a while loop (
我正在尝试处理来自 MySQL 数据库的一些数据(主要是 double 值)。我收到此错误消息: Invalid attempt to access a field before calling Re
我正在制作一个简单的 TCP/IP 套接字应用 这样做有什么不同: DataInputStream in = new DataInputStream(clientSocket.getInputStre
我操作API服务器。 手机APP访问API服务器时,有时会出现该异常。 我尝试在测试服务器上进行测试,但无法重现。(我改变了apache和tomcat的连接时间。) 有什么问题?? 我该如何解决这个问
我在段落末尾使用“阅读更多”只是为了提醒像P.T.O一样的用户 为什么会有问题? 最佳答案 您必须明白,许多屏幕阅读器用户不会等到整个页面都读给他们听。他们使用键盘快捷键在页面中导航。 JAWS(可以
我已将我的 Angular 应用程序从 12 版本升级到 13 版本。我在单元测试运行期间开始遇到此错误。 Chrome Headless 94.0.4606.61 (Windows 10) AppC
我正在尝试为以下组件编写一个。我正在使用 queryParams 然后使用 switchmap 来调用服务。这是 url 的样子: http://localhost:4200/test-fee/det
我的代码有什么问题? Uncaught TypeError: Cannot read properties of undefined (reading 'remove') 和 Uncaught Typ
我在我的 React 应用程序中遇到了这个问题。 类型错误:无法读取未定义的属性(读取“requestContent”) 我在我的应用程序中使用 commercejs。代码指向 isEmpty=!ca
我是一名优秀的程序员,十分优秀!