随着时间流逝,人的初心是否会改变呢?今日博客分享vue引入高德地图几种方式~

1、方式一,引用封装好的vue-amap组件,具体操作见官方文档

官网链接:https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

npm install vue-amap --save

由于vue-amap封装的功能有限,因此不可避免的需要引入高德地图的cdn链接

2、网上已经普遍有一种引入方式,具体如下

(1)进入当前vue目录下的index.html直接引入cdn链接

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
    <!--高德地图js-->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&callback=onLoad"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

(2)配置build/webpack.base.conf.js,在module.export中加入externals配置项,当做外部资源引入,据说有如下注释的功能,但是在开发环境貌似感觉没啥区别。。。

  externals:{
    "AMap":'AMap'
//key是项目内使用组件的名称,value是高德对外暴露的名称(这样配置的话webpack在dev run dev或者run build的时候就不会去本地组件包查找该资源,而是直接去windown域下载)
  },

3、上面的方式网页一进入index.html文件,高德地图资源便会进行加载,那么问题来了,当我页面只有一个组件需要用到高德地图,想实现只有进入到某个特定组件时,才请求高德地图cdn链接,如何做到按需加载呢?经过尝试有以下两种方法

方法一:通过引入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)vue文件中引入

<template>
  <div>
    <button @click="getMap">获取map对象</button>
    <div id="map" style="width:100%;height:800px"></div>
  </div>
</template>
<script>
  // import AMap from 'AMap'
  export default {
    data() {
      return {
        mapObj: null
      }
    },
    methods: {
      getMap() {
        console.log("this map obj", this.mapObj);
      }
    },
    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);
      })
    },
    destroyed(){
      console.log("destroyed");
    }
  }
</script>

方法二:动态的给index.html头部加入高德地图资源

(1)直接在组件内部引入即可,一步操作即可实现

<template>
  <div>
    <button @click="getMap">获取map对象</button>
    <div id="map" style="width:100%;height:800px"></div>
  </div>
</template>
<script>
  // import AMap from 'AMap'
  export default {
    data() {
      return {
        mapObj: null
      }
    },
    methods: {
      getMap() {
        console.log("this map obj", this.mapObj);
      }
    },
    mounted() {
    },
    beforeMount() {
      let $self = this;
      window.onLoad = function () {
        var map = new AMap.Map('map', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 11, //初始化地图层级
          center: [116.397428, 39.90923] //初始化地图中心点
        });
        AMap.plugin('AMap.ToolBar', function () {//异步加载插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        $self.mapObj = map;
      }
      var url = 'https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&callback=onLoad';
      var jsapi = document.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      jsapi.id = "amapjs";
      document.head.appendChild(jsapi);
    },
    destroyed() {
      document.getElementsByTagName("head")[0].removeChild(             
      document.getElementById("amapjs"));
      console.log("destroyed");
    }
  }

以上方法在进入引用的组件时候才会加载出高德地图,在vue上面引入插件,建议通过异步加载插件引入,由于是操作到了index.html高德地图已经出现就会保留,只有页面刷新时候index.html头部资源才会消失,因此若是想实现跳出组件地图实时删除请在vue声明周期destroy中进一步操作。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐