如何在选择html元素时高亮显示地图标记
How to highlight map marker upon selection of an html element
需要帮助让html元素与谷歌地图交互。
我在一个网页上有两个部分。在页面的右侧,我有一张显示多个标记的地图。在页面的左侧,我有一个列表,其中包含与地图中的标记相对应的地址。
当从页面左侧的列表中选择相应的地址时,请建议如何突出显示标记的指针。
好吧,我用hover()成功了。将鼠标悬停在div上会突出显示标记
<head>
<style>
html, body, #map-canvas {
height: 400px;
margin: 0px;
padding: 0px
}
#markers_info .marker {
height: 40px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>
<script>
/**
jQuery events
*/
$(document).ready(function() {
// initiate Google maps
initialize();
// make a .hover event
$('#markers_info .marker').hover(
// mouse in
function () {
// first we need to know which <div class="marker"></div> we hovered
var index = $('#markers_info .marker').index(this);
markers[index].setIcon(highlightedIcon());
},
// mouse out
function () {
// first we need to know which <div class="marker"></div> we hovered
var index = $('#markers_info .marker').index(this);
markers[index].setIcon(normalIcon());
}
);
});
/**
Google Maps stuff
*/
var markerData = [ // the order of these markers must be the same as the <div class="marker"></div> elements
{lat: 50.84498605, lng: 4.349977747, title: 'Manneken Pis'},
{lat: 50.84848913, lng: 4.354053363, title: 'Jeanneke Pis'},
{lat: 50.84673465, lng: 4.352466166, title: 'Grand Place'}
];
var map;
var markers = [];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(50.84673465,4.352466166), // Brussels, Belgium
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i=0; i<markerData.length; i++) {
markers.push(
new google.maps.Marker({
position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
title: markerData[i].title,
map: map,
icon: normalIcon()
})
);
}
}
// functions that return icons. Make or find your own markers.
function normalIcon() {
return {
url: 'http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png'
};
}
function highlightedIcon() {
return {
url: 'http://steeplemedia.com/images/markers/markerGreen.png'
};
}
//google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="markers_info">
<div class="marker">Manneken Pis, 50.84498605,4.349977747</div>
<div class="marker">Jeanneke Pis, 50.84848913,4.354053363</div>
<div class="marker">Grand Place, 50.84673465,4.352466166</div>
</div>
</body>
相关文章:
- 从桌面读取python文件时高亮显示代码
- 高亮显示时编辑文本大小和颜色
- 高亮显示与数组字符串一起使用时文本插件中断
- FF视图源|脚本高亮显示为红色
- 父页面的角度路由器导航高亮显示
- OpenLayers在悬停时高亮显示功能,并在单击时选择
- 当DIV中的文本高亮显示时,如何获得DIV中Span的值?(Javascript)
- 延迟高亮显示文本区域中的文本
- Mootools:如何在点击时保持元素高亮显示并停止所有事件
- 高亮显示单击菜单链接
- Firefox-当不在输入控件上时隐藏焦点高亮显示
- 高亮显示包含<br>以及重新格式化网格
- 使用下拉选择菜单高亮显示一行表格单元格
- 如何限制javascript高亮显示函数的使用次数
- 在GXT中激活上下文菜单时,如何保持选中的文本高亮显示?(EXT GWT 2.x)
- html5中的文本高亮显示
- Markdown语法高亮显示未按预期工作
- D3js连续一个接一个地高亮显示条
- Javascript:搜索和高亮显示包括HTML标记
- 单击并用CTRL+C复制值时高亮显示html表格单元格