在vue项目中使用地图api,在vue-cli搭建的项目中使用高德地图定位

36 篇文章 1 订阅
40 篇文章 0 订阅

在开发vue项目中遇到需要定位显示,需求是:需要根据后台返回的数据动态的将订单定位到产生的位置;然后根据现实的位置;

高德地图提供的api 可以调用,用高德地图插件,解决方案非常传统:将高德地图通过cdn的形式引入到项目的index.html文件中,然后即可全局调用AMap。具体文档点击 高德地图开放平台 查看。

现在在vue项目中使用,有几个问题不得不考虑

  • 项目中其实只有几处需要用到地图,并不需要全局引入
  • 在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不够优雅。

具体怎么实现呢?接下开开始表演,请不要眨眼睛~~~~

开始表演:

1:创建一个AMap.js,路径:'src/assets/js/AMap.js' 路径可以根据自己的路径放;

// AMap.js
// 高德map   https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
export default function MapLoader () {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src =
        'http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=你的高德地图的key'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

2. 在任何.vue文件中使用

//demo

//在.vue中使用AMap.js

<template>
  <div class="test">
    <div id="container"></div>
  </div>
</template>
<script>
import MapLoader from '@/assets/js/AMap.js'
export default {
  name: 'test',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    let that = this
    MapLoader().then(AMap => {
      console.log('地图加载成功')
      that.map = new AMap.Map('container', {
        center: [117.000923, 36.675807],
        zoom: 11
      })
    }, e => {
      console.log('地图加载失败' ,e)
    })
  }
}
</script>

3. 项目中使用,动态加载位置和数据

项目部分代码

//地图容器,可以自定义class
//html
<div id="container"></div>

//js
<script>
import MapLoader from '@/utils/AMap.js'
export default {
  data () {
    return {
      map: null
    }
  },
  methods: {
    // 查看位置
    lookMap (row) {
      this.$nextTick(function () {
        this.mapReq(row.reportPlace)
      })
    },
 
    // 获取高德地图api
    mapReq (mapData) {
      let that = this
      MapLoader().then(AMap => {
        console.log('地图加载成功')
        that.map = new AMap.Map('container', {
          resizeEnable: true,
          center: mapData.jwNum,//地图标记title
          zoom: 12 //地图视图缩放级别
        })
        let marker = new AMap.Marker({
          position: that.map.getCenter(),
          icon: new AMap.Icon({
            image: require('@/assets/icon/dw.png'),//定位点显示的图标
            size: new AMap.Size(60, 60), // 图标大小
            imageSize: new AMap.Size(26, 26)
          }),
          offset: new AMap.Pixel(-30, -60) //图标点的位置
        })
        marker.setMap(that.map)
        // 设置label标签
        // label默认蓝框白底左上角显示,样式className为:amap-marker-label
        marker.setLabel({
          // 修改label相对于maker的位置
          offset: new AMap.Pixel(30, -80),//点标记定位
          content: `<div style='width:320px;height:160px;background:#fff;border-radius:3px;border:1px solid #e6e6e6;font-size:12px;box-shadow:5px 5px 5px #999;'>
          <h5 style='text-align:center;margin:0;padding:10px;border-bottom:1px solid #e6e6e6;font-size:16px;'>` + mapData.title + `</h5>
            <div style='padding:5px;'>
              <p style='margin:8px 0;'>检测师:` + mapData.name + `</p>
              <p style='margin:8px 0;'>检测时间:` + mapData.dateTime + `</p>
              <p style='margin:8px 0;white-space:pre-wrap;'>地址:` + mapData.address + `</p>
              <p style='margin:8px 0;'>查看报告:<a href="` + mapData.urls + `" target="_bank">` + mapData.reportNum + `</a></p>
            </div>
        </div> `
        })
      }, e => {
        console.log('地图加载失败', e)
      })
    }

  }
}
</script>

效果图:

4. 完美解决

这样,我们得到了一个异步加载的高德地图插件,不需要在全局引入,也不用担心功能不齐全,其他的东西,完全参照高德地图官方文档来设置即可。

Tips:

结语: 这种方法其实可以用来加载任何第三方插件,本文只是以高德地图为例来说明,而且相对来说更加可控,不受制于封装,一些旧版本的经典js插件在es6项目中使用的过渡更加平滑。

仅供参考,楼主菜鸟,欢迎指点。

 

  • 28
    点赞
  • 54
    收藏
  • 打赏
    打赏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 23

打赏作者

随便起的名字也被占用

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值