【vue】vue集成高德地图

最新推荐文章于 2024-09-06 20:31:26 发布

my596257

最新推荐文章于 2024-09-06 20:31:26 发布

阅读量532

点赞数

分类专栏： vue

原文链接：https://blog.csdn.net/athwang/article/details/108236551

版权

vue 专栏收录该内容

112 篇文章 3 订阅

订阅专栏

前言

vue2.x集成高德地图参考这篇文章：https://blog.csdn.net/athwang/article/details/108236551
ps：此处要注意，如果文件报错，关闭当前文件的eslint 验证，我在评论中有说到。

实现简单标注

参考这两篇文章：
https://lbs.amap.com/demo/amap-ui/demos/amapui-amaploader/amapui-amaploader1
https://developer.amap.com/api/amap-ui/reference-amap-ui/overlay/simplemarker
示例代码：

initPage(SimpleMarker, map) {

  //创建SimpleMarker实例
  new SimpleMarker({

    //前景文字
    iconLabel: 'A',

    //图标主题
    iconTheme: 'default',

    //背景图标样式
    iconStyle: 'red',

    //...其他Marker选项...，不包括content
    map: map,
    position: [121.489331, 31.286376]
  });

  //创建SimpleMarker实例
  new SimpleMarker({
    //前景文字
    iconLabel: {
      innerHTML: '<i>B</i>', //设置文字内容
      style: {
        color: '#fff' //设置文字颜色
      }
    },
    //图标主题
    iconTheme: 'fresh',
    //背景图标样式
    iconStyle: {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F18%2F20180418103346_nilns.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626420549&t=2cb411bcdc4f64460c87b123bbc2f31a',
      style: {
        width: '30px',
        height: '30px',
        'border-radius': '15px',
        border: '1px solid #fff'
      }
    },


    //...其他Marker选项...，不包括content
    map: map,
    position: [121.489073, 31.285422]
  });
}

效果图
在这里插入图片描述
标注样式实现方式：两种

iconStyle: '<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F18%2F20180418103346_nilns.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626420549&t=2cb411bcdc4f64460c87b123bbc2f31a" style="width:30px; height:30px; border-radius: 15px; border: 2px solid #fff;"></img>',

iconStyle: {
  src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F18%2F20180418103346_nilns.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626420549&t=2cb411bcdc4f64460c87b123bbc2f31a',
  style: {
    width: '30px',
    height: '30px',
    'border-radius': '15px',
    border: '2px solid #fff'
  },
},

添加点击事件
参考文章：https://www.cnblogs.com/xiaomg/articles/10432907.html
我用的这种方式
参考文章2：https://blog.csdn.net/hangzhou728/article/details/111280566
源码

<template>
  <div class="map">
    <div class="container">
      <el-amap
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
        :events="events"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :position="marker"
          :key="index"
        ></el-amap-marker>
      </el-amap>
    </div>

    <SiteInformation
      v-model="siteInformation.isShow"
      :data="siteInformation.data"
      v-if="siteInformation.isShow"
    />
  </div>
</template>

<script>
/**
 * amap-manager： 地图管理对象
 * vid：地图容器节点的ID
 * zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
 * center： 地图中心点坐标值
 * plugin：地图使用的插件
 * events： 事件
 */
import SiteInformation from './SiteInformation2'
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
let amapManager = new AMapManager()
export default {
  name: 'AMap',
  data() {
    let that = this
    return {
      siteInformation: { isShow: false, data: null },
      simpleMarkerData: [
        {
          id: 1,
          icon: 'https://bkimg.cdn.bcebos.com/pic/cb8065380cd791235fcb3e88ae345982b2b78027?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg',
          name: '南山站',
          createDate: '2021-05-01 08:00:00',
          principal: '李教授',
          telPhone: '15012345678',
          uploadDate: '2021-06-01 07:30:22',
          bugNumber: 7382,
          imageNumber: 3517,
          position: [121.489331, 31.286376],

        },
        {
          id: 2,
          icon: 'https://taojin-his.cdn.bcebos.com/9c16fdfaaf51f3de426e012a9aeef01f3b2979a4.jpg',
          name: '北山站',
          createDate: '2021-05-01 08:00:00',
          principal: '张教授',
          telPhone: '13712345678',
          uploadDate: '2021-06-01 07:30:22',
          bugNumber: 7382,
          imageNumber: 3517,
          position: [121.488231, 31.285276]
        }
      ],
      amapManager,
      markers: [],
      center: [112.938888, 28.228272],
      zoom: 17,
      lng: 0,
      lat: 0,
      loaded: false,
      events: {
        init() {
          lazyAMapApiLoaderInstance.load().then(() => {
            that.initMap()
          })
        },
        // 点击地图事件
        click(e) {
          that.markers = []
          let { lng, lat } = e.lnglat
          that.lng = lng
          that.lat = lat
          console.log('lng=' + lng, 'lat=' + lat)
          that.center = [lng, lat]
          that.markers.push([lng, lat])
          // 这里通过高德 SDK 完成。
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
        }
      },
      // 一些工具插件
      plugin: [
        {
          pName: 'Geocoder',
          events: {
            init(o) { }
          }
        },
        {
          // 定位
          pName: 'Geolocation',
          events: {
            init(o) {
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 设置经度
                  that.lng = result.position.lng
                  // 设置维度
                  that.lat = result.position.lat
                  // 设置坐标
                  that.center = [that.lng, that.lat]
                  that.markers.push([that.lng, that.lat])
                  // load
                  that.loaded = true
                  // 页面渲染好后
                  that.$nextTick()
                }
              })
            }
          }
        },
        {
          // 工具栏
          pName: 'ToolBar',
          events: {
            init(instance) {
              // console.log("工具栏:"+instance);
            }
          }
        },
        {
          // 鹰眼
          pName: 'OverView',
          events: {
            init(instance) {
              // console.log("鹰眼:"+instance);
            }
          }
        },
        {
          // 地图类型
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
              // console.log("地图类型:"+instance);
            }
          }
        },
        {
          // 搜索
          pName: 'PlaceSearch',
          events: {
            init(instance) {
              // console.log("搜索:"+instance)
            }
          }
        }
      ]
    }
  },
  components: { SiteInformation },
  methods: {
    // 初始化地图
    initMap() {
      let that = this
      let map = that.amapManager.getMap()
      AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) {
        that.initSimpleMarker(SimpleMarker, map, that.simpleMarkerData)
      })
    },
    // 初始化标注
    initSimpleMarker(SimpleMarker, map, simpleMarkerData) {
      let that = this
      if (simpleMarkerData != null && simpleMarkerData.length > 0) {
        simpleMarkerData.forEach(sm => {
          // 创建实例
          let aMarker = new SimpleMarker({
            id: sm.id,
            // 附加数据
            extData: sm,
            // 开启点击
            clickable: true,
            // 前景文字
            iconLabel: {
              innerHTML: sm.name,
              style: {
                color: '#fff'
              }
            },
            // 图标主题 fresh/default
            iconTheme: 'fresh',
            // 背景图标样式
            iconStyle: {
              src: sm.icon,
              style: {
                width: '60px',
                height: '60px',
                'border-radius': '50%',
                border: '2px solid #fff',
                'box-shadow': '10px 10px 5px #888888'
              }
            },
            containerClassNames: 'myMarker',
            map: map,
            position: sm.position
          })
          // 添加点击事件
          aMarker.on
          // 绑定点击事件
          AMap.event.addListener(aMarker, 'click', function (
            e
          ) {
            that.siteInformation.isShow = true
            that.siteInformation.data = e.target.getExtData()
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: calc(100vh - 100px);

  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
</style>