JVector地图是一种基于矢量图形的地图库,它可以在网页中展示交互式地图。当标记悬停时显示动态图像可以通过以下步骤实现:
<link rel="stylesheet" href="jvector-map.css">
<script src="jvector-map.js"></script>
<div>
标签,并为其指定一个唯一的ID,以便后续操作。<div id="map"></div>
$(function() {
$('#map').vectorMap({
map: 'world_mill', // 使用的地图类型
backgroundColor: '#ffffff', // 地图背景颜色
markersSelectable: true, // 标记是否可选中
markers: [ // 标记数据
{ latLng: [40.7128, -74.0060], name: 'New York', image: 'hover-image.jpg' },
{ latLng: [51.5074, -0.1278], name: 'London', image: 'hover-image.jpg' },
// 其他标记数据...
],
markerStyle: {
initial: { fill: '#ff0000' }, // 标记初始样式
hover: { fill: '#00ff00' } // 标记悬停样式
},
onMarkerOver: function(event, index) {
var marker = $('#map').vectorMap('get', 'markers')[index];
marker.element.find('img').attr('src', marker.image);
},
onMarkerOut: function(event, index) {
var marker = $('#map').vectorMap('get', 'markers')[index];
marker.element.find('img').attr('src', 'default-image.jpg');
}
});
});
在上述代码中,markers
数组中的每个标记对象都包含latLng
表示标记的经纬度坐标,name
表示标记的名称,image
表示标记悬停时显示的动态图像。
hover-image.jpg
和default-image.jpg
)放置在与HTML文件相同的目录下,确保文件名和路径正确。通过以上步骤,当鼠标悬停在标记上时,JVector地图会根据配置的事件处理函数onMarkerOver
来更新标记的图像为动态图像,当鼠标移出标记时,会根据onMarkerOut
事件处理函数将图像恢复为默认图像。
推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/maps)
领取专属 10元无门槛券
手把手带您无忧上云