Jul 6, 2022 Eric Guo    1141

摘要：google 动态map

1、准备资料

官方文档：https://developers.google.com/maps/documentation/javascript/adding-a-google-map

2、生成谷歌地图

<!-- 地图的元素 -->
<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>

3、给地图动态添加标记

<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>

4、联动地图外数据，打开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>