返回

Vue套入高德地图并触发实现多个标点

前端

<!DOCTYPE html>
<html>
  <head>
    
    
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <amap
        :center="[116.397428, 39.90923]"
        :zoom="11"
        :resizeEnable="true"
        ref="amap"
        :style="{ width: '100%', height: '100%' }"
      />
    </div>

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图密钥"></script>
    <script>
      const Vue = require('vue')
      const AMap = require('AMap')

      new Vue({
        el: '#app',
        data() {
          return {
            markers: [
              {
                position: [116.397428, 39.90923],
                title: '北京市',
                content: '北京市是中华人民共和国的首都'
              },
              {
                position: [116.403874, 39.920624],
                title: '故宫博物院',
                content: '故宫博物院是中国现存规模最大、保存最为完整的木质结构宫殿建筑群'
              },
              {
                position: [116.400244, 39.91929],
                title: '天安门广场',
                content: '天安门广场是世界上最大的城市广场之一'
              },
            ]
          }
        },
        mounted() {
          const map = this.$refs.amap.$instance
          this.markers.forEach((marker) => {
            const markerInstance = new AMap.Marker({
              position: marker.position,
              title: marker.title,
              content: marker.content
            })
            markerInstance.setMap(map)
          })
        }
      })
    </script>
  </body>
</html>