在vue中使用高德地图（异步引入方式，不使用依赖）

末蓝、 2023-06-28 04:58 64阅读 0赞

1、创建一个`AMap.js`,路径：`src/assets/AMap/AMap.js`

/*
     * 异步创建script标签 
     */
    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.15&callback=initAMap&key=高德申请的key'
          script.onerror = reject
          document.head.appendChild(script)
        }
        window.initAMap = () => {
          resolve(window.AMap)
        }
      })
    }

2、在任何`.vue`文件中使用：

<template>
      <div class="container">
        <div class="maploader">
          <div id="mymap" class="map"></div>
        </div>
      </div>
    </template>
    
    <script>
    import MapLoader from '@/assets/AMap/AMap.js'
    
    export default {
      components: {
      },
      name: 'maploader',
      data() {
        return {
          map: null
        };
      },
      mounted () {
        let that = this
        MapLoader().then(AMap => {
          console.log('地图加载成功')
          that.map = new AMap.Map("mymap", {
            resizeEnable: true,
            center: [117.000923, 36.675807],
            zoom: 11
          });
        }, e => {
          console.log('地图加载失败' ,e)
        })
      },
    };
    </script>
    
    <style lang="scss">
    .map {
      height:640px;
      width:100%;
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关在Vue中使用高德地图开发工具

在Vue中使用高德开发工具非常简单，只需要在你的`public`中的`index.html`中，导入一条链接即可。 <script type="text/javasc

╰+哭是因爲堅強的太久メ/ 2023年07月10日 11:10/ 0 赞/ 83 阅读

相关在vue中使用高德地图（异步引入方式，不使用依赖）

1、创建一个`AMap.js`,路径：`src/assets/AMap/AMap.js` / 异步创建script标签 / expor

末蓝、/ 2023年06月28日 04:58/ 0 赞/ 65 阅读

相关在Vue Cli 3中引入高德地图

方式一：说明：通过安装vue-amap 插件的方式来引入步骤： 1、

布满荆棘的人生/ 2023年06月06日 12:13/ 0 赞/ 77 阅读

相关 Vue+高德地图pc端使用。

VUE+高德地图这是临时写的一个组件，可以直接引用先测试div的大小。 <template> <div id="container"></div>

怼烎@/ 2023年02月28日 12:48/ 0 赞/ 89 阅读

相关 uniapp 中引入高德地图

uniapp 引入高德地图地图现在已经渗入到生活的方方面面，给生活带了极大的编译，那么我们如何才能在项目中引入地图呢首先看一下效果：联系地址这个地方在项目中

左手的ㄟ右手/ 2023年02月23日 08:26/ 0 赞/ 747 阅读

相关 Vue+高德地图

基于VUE的高德地图展示及标点功能描述：在vue框架（vue-cli3）中使用高德地图，展示地图，规划行政区域，标点。 ![在这里插入图片描述][waterm

今天药忘吃喽~/ 2023年02月09日 13:29/ 0 赞/ 90 阅读

相关 vue引入原生高德地图

由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 [https://elemefe.githu

野性酷女/ 2022年11月05日 11:50/ 0 赞/ 376 阅读

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

在开发vue项目中遇到需要定位显示，需求是：需要根据后台返回的数据动态的将订单定位到产生的位置；然后根据现实的位置；高德地图提供的api 可以调用，用高德地图插件，解决方案

╰半夏微凉°/ 2022年04月11日 14:54/ 0 赞/ 462 阅读

相关在vue中使用高德地图

问题来源项目需要是使用到地图，并不是所有页面都用到，所以采用异步加载当时引入地图开始在vue项目目录下创建plugins文件夹，并在里面创建amap.js 文件

ゞ浴缸里的玫瑰/ 2021年09月20日 12:06/ 0 赞/ 562 阅读

相关 vue中使用高德地图

html引入高德API： <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4

た入场券/ 2021年07月26日 12:31/ 0 赞/ 733 阅读