效果图
- 鼠标移入地图上的标记时，弹窗弹出，展示信息
- 左侧dom鼠标移入时，联动右侧标记，弹窗弹出展示信息
1、准备资料
2、整体思路
1、遍历markers，给地图动态添加标记
2、 给每个marker添加鼠标移入事件，使用infowindow展示弹窗内容。需要注意的是，infowindow的内容要使用使用setContent方法添加
3、 根据官方提供的api生成世界地图
4、 给左侧dom添加鼠标移入事件，根据id判断需要展开的是哪个marker
3、HTML+JS生成谷歌地图
注意：key值用于使用和计费。必须至少有一个与项目关联的key。 官方key值页面
<!-- 地图的元素 -->
<div id="map-ontolo"></div>
<!--官方api（key需要替换下）-->
<script
src="https://maps.googleapis.com/maps/api/js?key=keyCode&callback=initMap&v=weekly"
defer
></script>
<script>
// 定义中点
const uluru = { lng: 110.4, lat: 30.2 };
const map = new google.maps.Map(document.getElementById("map-ontolo"), {
zoom: 4,
center: uluru,
});
</script>
4、给地图动态添加标记
<script>
// json数据
var markers= [
{ position: { lng: 110.4, lat: 30.2 }, name: "我是测试数据1", id:'oc_01', img:'photo.webp',address: '001',bgImg:'bg.webp'},
{ position: { lng: 112.5, lat: 30.2 }, name: "我是测试数据2", id:'oc_02', img:'xiamu.jpeg',address: '002',bgImg:'bg.webp'},
{ position: { lng: 114.5, lat: 30.2 }, name: "我是测试数据3", id:'oc_03', img:'sansan.jpeg',address: '003',bgImg:'bg.webp'},
{ position: { lng: 116.5, lat: 30.2 }, name: "我是测试数据4", id:'oc_04', img:'sansan1.jpeg',address: '004',bgImg:'bg.webp'},
]
// 遍历markers，给地图动态添加标记
markers.forEach((item) => {
const marker = new google.maps.Marker({
position: item.position,
draggable: false, //不可拖动
map: map, //地图实例，
markerData: item,
markerID: item.id
});
markerList.push(marker)
// 此处可以为marker添加事件
google.maps.event.addListener(marker, "mouseover", function(e){
// 处理infowindow中要展示的html
var infoWindowContent =
`<div class="info-window-box" style="background-image: url(` + item.bgImg + `);background-size:100% 100%">
<img src="`+ item.img + `">
<div class="name">` + item.name + `</div>
<div>` + item.address + `</div>
</div>`
// 使用setContent给infowindow动态添加内容
infowindow.setContent(infoWindowContent)
infowindow.open({
anchor: marker,
map,
shouldFocus: false,
});
});
})
</script>
5、联动地图外数据，打开infowindow
<script>
// 监听左侧鼠标悬停事件
var activeDom = document.getElementsByClassName('data-list-item')
for(let i=0;i<activeDom.length;i++){
activeDom[i].addEventListener("mouseover",function(e){
if(markerList[i].markerID == this.getAttribute('id')){
// 处理infowindow中要展示的html
var infoWindowContent =
`<div class="info-window-box" style="background-image: url(` + markers[i].bgImg + `);background-size:100% 100%">
<img src="`+ markers[i].img + `">
<div class="name">` + markers[i].name + `</div>
<div>` + markers[i].address + `</div>
</div>`
infowindow.setContent(infoWindowContent)
infowindow.open({
anchor: markerList[i],
map,
shouldFocus: false,
});
}
})
}
</script>
