• Vue3.0中使用高德地图


    VUE-CLI 3.0 中配置高德地图

    在项目开发中,有时需要加载地图控件,这里记录下载vue-cli中引入地图控件的基本流程。

    1、首先,需要注册高德开放平台的账号,并在【应用管理】页面【创建新应用】,为应用添加Key值

    高德开放平台:https://lbs.amap.com/

    2、在Vue-Cli中public下的index.html加入script 标签

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 

    3、在vue.config.js文件中配置externals

    VUE-CLI 3.0 不会自动创建vue.config.js,需要手动创建,同时vue.config.js 不会触发热加载,修改之后需要重新执行npm run serve

    module.exports = {
      configureWebpack: {
        externals: {
          'AMap': 'AMap'
        }
      }
    }

     --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    也可以不在vue.config.js中配置externals,在子组件调用时高德地图的api时,也不需要引入(import),直接可以采用window.AMap.Map加载地图,此时AMap为默认的对象,可以在控制台打印出来:

     地图组件中写为:

    initMap () {
          let self = this
          let map = new window.AMap.Map('container', {
            center: [116.397428, 39.90923],
            resizeEnable: true,
            zoom: 10
    })

      

    4、封装作为组件使用

    在src/component建立子组件,建立一个div 盒子,用于地图容器,设定id,之后通过AMap.map()函数建立新地图

    <template>
      <div>
        <div id="container" :style="{width+'px',height:height+'px',margin:'34px auto'}" />
      </div>
    </template>
    
    <script>
    import AMap from 'AMap' //引入高德地图AMap
    export default {
      name: 'GMap',
      props: {
         {
          type: Number,
          default: 300
        },
        height: {
          type: Number,
          default: 300
        }
      }, //添加变量,方便组件复用
    methods: {
    //初始化地图
    initMap () { let self
    = this let map = new AMap.Map('container', { center: [116.397428, 39.90923], resizeEnable: true, zoom: 10 }) self.map = map } },
    //在mounted阶段调用(mounted可以操作DOM)
    mounted () {
    this.initMap() } } </script>

    5、在pages页面下新建组件,并复用地图组件 

     6、最终效果图

  • 相关阅读:
    【DFS】算24点
    【位运算】【BFS】移动玩具
    【并查集】【DFS】搭桥
    shell脚本编写informix数据库中表的导入和导出
    利用springloaded进行java jar&class的动态替换
    利用springloaded进行java class动态替换
    ActiveMq unsupported major.minor version 52.0
    oracle主键修改&设置某一字段可以为null
    XStream将XML转javaben,出现多余的tag,导致出错
    oracle:the password has expired
  • 原文地址:https://www.cnblogs.com/lcxcsy/p/13171798.html
Copyright © 2020-2023  润新知