谷歌地图自定义标记链接不起作用
Google map custom marker link not working
试图让我的标记指向另一个页面。复制了以前解决的案例中的答案。仍然不起作用。带有标记的地图显示正常。然而,即使标题在那里,链接也不起作用。继续显示消息"未捕获的引用错误:未定义标记"。我在这里做错了什么??没主意了。
有人可以看看帮助我摆脱困境。巨大的感谢;
<script
src="https://maps.googleapis.com/maps/api/js?language=ko&key=AIzaSyA3WDZ1KfeUb_Q-SxtIRE2wZ4RBieuGl7s"
type="text/javascript">
</script>
<script>
function Goog2() {
var mapCanvas = document.getElementById('Google_map');
var mapOptions = {
center: new google.maps.LatLng(45.80257,15.9371),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatLng0 = new google.maps.LatLng(45.80257,15.9371);
var myLatLng1 = new google.maps.LatLng(45.805455,15.983761);
var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);
var markers = [];
markers[0] = new google.maps.Marker({
position: myLatLng0,
map: map,
url: '/cocohouse/location/CH_location_en.html',
icon: "/images/ariranglogoimage28_2.png",
title: 'Coco House',
});
markers[1] = new google.maps.Marker({
position: myLatLng1,
map: map,
icon: "/images/cocohouse/location/train26.png",
url:"/cocohouse/location/to_CH3_en.html",
title: 'Train Terminal',
});
markers[2] = new google.maps.Marker({
position: myLatLng2,
map: map,
icon: "/images/cocohouse/location/airport32.png",
url:"/cocohouse/location/to_CH1_en.html",
title: 'Airport',
});
markers[3] = new google.maps.Marker({
position: myLatLng3,
map: map,
icon: "/images/cocohouse/location/bus26.png",
url:"/cocohouse/location/to_CH2_en.html",
title: 'Bus Terminal',
});
}
google.maps.event.addDomListener(window, 'load', Goog2);
for ( i = 0; i < markers.lenght; i++ ) {
google.maps.event.addListener(markers[i], 'click', function() {
window.location.href = this.url;
});
}
</script>
您在未定义的上下文中使用"标记"。"标记"在 Goog2 函数中声明并在外部使用。
尝试(未测试):
<script>
function Goog2() {
var mapCanvas = document.getElementById('Google_map');
var mapOptions = {
center: new google.maps.LatLng(45.80257,15.9371),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatLng0 = new google.maps.LatLng(45.80257,15.9371);
var myLatLng1 = new google.maps.LatLng(45.805455,15.983761);
var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);
var markers = [];
markers[0] = new google.maps.Marker({
position: myLatLng0,
map: map,
url: '/cocohouse/location/CH_location_en.html',
icon: "/images/ariranglogoimage28_2.png",
title: 'Coco House',
});
markers[1] = new google.maps.Marker({
position: myLatLng1,
map: map,
icon: "/images/cocohouse/location/train26.png",
url:"/cocohouse/location/to_CH3_en.html",
title: 'Train Terminal',
});
markers[2] = new google.maps.Marker({
position: myLatLng2,
map: map,
icon: "/images/cocohouse/location/airport32.png",
url:"/cocohouse/location/to_CH1_en.html",
title: 'Airport',
});
markers[3] = new google.maps.Marker({
position: myLatLng3,
map: map,
icon: "/images/cocohouse/location/bus26.png",
url:"/cocohouse/location/to_CH2_en.html",
title: 'Bus Terminal',
});
for ( i = 0; i < markers.length; i++ ) {
google.maps.event.addListener(markers[i], 'click', function() {
window.location.href = this.url;
});
}
}
google.maps.event.addDomListener(window, 'load', Goog2);
</script>
markers.lenght;
应改为markers.length;
for (var i=0; i < markers.length; i++) {
google.maps.event.addListener(markers[i], 'click', function () {
window.location.href = this.url;
});
}
markers
在使用之前需要定义。
您在窗口加载时调用Goog2
但循环在此事件之前和填充数组之前执行。
您将在标记存在之前添加单击侦听器。 在Goog2
函数内移动该循环。 示例代码片段(将标记更改为公开可用的图标,将 URL 更改为任意公共图标,修复了 markers.length 上的拼写错误)。
function Goog2() {
var mapCanvas = document.getElementById('Google_map');
var mapOptions = {
center: new google.maps.LatLng(45.80257, 15.9371),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatLng0 = new google.maps.LatLng(45.80257, 15.9371);
var myLatLng1 = new google.maps.LatLng(45.805455, 15.983761);
var myLatLng2 = new google.maps.LatLng(45.738822, 16.068278);
var myLatLng3 = new google.maps.LatLng(45.803816, 15.993573);
var markers = [];
markers[0] = new google.maps.Marker({
position: myLatLng0,
map: map,
url: 'http://google.com',
icon: "http://maps.google.com/mapfiles/ms/micons/yellow.png",
title: 'Coco House',
});
markers[1] = new google.maps.Marker({
position: myLatLng1,
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
url: "http://yahoo.com",
title: 'Train Terminal',
});
markers[2] = new google.maps.Marker({
position: myLatLng2,
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
url: "http://maps.google.com",
title: 'Airport',
});
markers[3] = new google.maps.Marker({
position: myLatLng3,
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/purple.png",
url: "http://www.cnn.com",
title: 'Bus Terminal',
});
for (i = 0; i < markers.length; i++) {
google.maps.event.addListener(markers[i], 'click', function() {
window.location.href = this.url;
});
}
}
google.maps.event.addDomListener(window, 'load', Goog2);
html,
body,
#Google_map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="Google_map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
相关文章:
- 我的下拉菜单中的链接不起作用
- Ajax:Ajax响应中的链接不起作用
- jQuery Mobile到其他页面的锚链接不起作用
- 外部JavaScript链接不起作用
- 为什么我的动态更改链接不起作用?(Javascript)
- DOM事件链接不起作用
- javascript中最大字符数的链接不起作用
- jQuery高亮显示滚动导航链接不起作用
- 鼠标悬停导航链接不起作用
- 单击下拉菜单中的链接不起作用
- jQuery 链接不起作用
- 使用javascript的方法链接不起作用
- 具有另一个背景图像的图像上的链接不起作用
- AJAX 请求类似的链接不起作用
- 移动设备上的网站超链接不起作用
- JavaScript链接不起作用
- 谷歌地图自定义标记链接不起作用
- 铬错误或编码错误?目标页面中的锚/ID 链接不起作用
- 模式对话框内的链接不起作用
- IE javascript 书签let PDF 链接不起作用