高德地图-按需加载

本文介绍了两种实现高德地图按需加载的方法:一是通过webpack-require-http插件结合require异步加载;二是封装AMap.js进行异步调用。在组件销毁时,需在Vue的destroy生命周期中处理地图的删除。
摘要由CSDN通过智能技术生成

方法一:通过引入webpack-require-http插件配合require引入,注意2.1版本require([’’],function(){})是异步加载,之前 require(’’) 同步加载,同步加载一直加载报错,最终实现如下

(1)引入webpack-require-http插件,还是当做外部资源引入这个插件,配置build/webpack.base.conf.js,在module.export中加入externals配置项

externals:[
    //注意这里是[]
    require('webpack-require-http')
  ]

(2)组件中使用

beforeMount() {
      require(["https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"],()=>{
         setTimeout(()=>{
          var map = new AMap.Map('map', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 11,
          center: [116.397428, 39.90923] 
          });
         },1500);
      })
    }

方法二:先封装调用AMap的方法,在组件中直接调用即可

(1)封装异步调用地图的方法AMap.js

export default function MapLoader () {
  return new Promise((resolve, re
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值