在VUE项目中使用高德地图的记录

最新推荐文章于 2023-12-20 08:36:14 发布

HcwDavid12

最新推荐文章于 2023-12-20 08:36:14 发布

阅读量206

点赞数

文章标签： vue.js reactjs js 街景地图

本文链接：https://blog.csdn.net/HcwDavid12/article/details/121611672

版权

流程如下：

<div class="amap-page-container" id="container"></div>

import VueAMap, { lazyAMapApiLoaderInstance } from 'vue-amap'
VueAMap.initAMapApiLoader({
  key: '080d2a1ae948926ffd898703780146b5',
  // key: '770628526eb39f2a2afde977d6ef7d5f', // 重新申请一个key  Key必须为 Web端（JS API）这个类型，不然就会跟域名解析对不上
  plugin: ['Geolocation', 'Geocoder']
})

data() {
    return {
      searchPlace: '',
      addMerchant: {
        group_id_list: [],
        name: '',
        logo: '',
        address: '',
        detailAddress: '',
        years: '',
        phone: '',
        pay: '',
        area: '',
        category: '',
        managePhone: '',
        managePassword: '',
        logoID: 0,
        areaLocation: '',
        lnglat: '',
        // 新增
        sn: '',
        brand: '',
        model: 0
      },
    }
 },
 created() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 16,
        center: [121.59996, 31.197646]
      })

      // 插件
      this.map.addControl(new AMap.Geolocation(), new AMap.Geocoder())

      // 反编码
      this.geocoder = new AMap.Geocoder()

      // 鼠标样式
      this.map.setDefaultCursor('pointer')

      // 点标记marker
      this.marker = new