vue 3.0 高德地图 amap-jsapi-loader 【marker + 信息窗体】代码

最新推荐文章于 2024-07-04 18:05:57 发布

web_Hsir

最新推荐文章于 2024-07-04 18:05:57 发布

阅读量614

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44185995/article/details/135627346

版权

本文介绍了如何使用AMapJavaScriptAPI在地图容器中添加标记，每个标记表示城市仓库数量，并通过点击显示信息窗口，展示了创建marker和信息窗体的函数实现。

摘要由CSDN通过智能技术生成

 const point = [
    { lnglat: ['121.473701', '31.230416'], city: '上海', number: 10 },
    { lnglat: ['113.264434', '23.129162'], city: '广州', number: 10 },
    { lnglat: ['104.065735', '30.659462'], city: '成都', number: 10 }
  ]
  const map = new AMap.Map('container', {
    zoom: 5,
    animateEnable: true
  })
  let markers = []
  // 信息窗体制作
  function markInfoWindow(position) {
    var content = `
    <div>
      <p> 电话 : 010-84107000 </p>
      <p> 邮编 : 100102 </p>
      <p> 地址 : 北京市望京阜通东大街方恒国际中心A座16层 </p>
    </div>`
    var infoWindow = new AMap.InfoWindow({
      content: content,
      offset: [16, -50]
    })
    infoWindow.open(map, position)
  }
  // marker 制作
  function makeMarker({ lnglat, city, number }) {
    const marker = new AMap.Marker({
      position: lnglat
    })
    const content = `
    <div class="amap-info-container">
        <div class="amap-info-window">${city}仓 ${number}</div>
        <div class="amap-info-sharp"></div>
    </div>`
    const labelConfig = {
      offset: [0, 0],
      content,
      direction: 'top'
    }
    marker.on('click', (e) => {
      markInfoWindow(lnglat)
    })
    marker.setLabel(labelConfig)
    return marker
  }
  point.forEach((item) => {
    const itemMarker = makeMarker(item)
    markers.push(itemMarker)
  })
  map.add(markers)

.amap-marker-label {
  border: none;
}
.amap-info-container {
  position: relative;
  .amap-info-window {
    background: #fff;
    border-radius: 3px;
    padding: 3px 7px;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
    position: relative;
  }
  .amap-info-sharp {
    position: absolute;
    top: 16px;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
  }
}