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

末蓝、 2023-06-28 04:58 13阅读 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 条评论，13人围观）

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

相关阅读

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

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

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

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

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

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

相关 uniapp 中引入高德地图

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

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

相关 vue引入原生高德地图

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

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

相关 uniapp 使用高德地图

<template> <view> <view class="map" id="map"></view> </view> </t

分手后的思念是犯贱/ 2022年09月02日 12:50/ 0 赞/ 469 阅读

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

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

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

相关 Kibana使用高德地图

说明目前Kibana默认自带的地图全部是英文，更换高德地图对地图汉化修改配置 1. 编辑kibana配置文件kibana.yml，最后面添加 ti

秒速五厘米/ 2022年02月26日 07:24/ 0 赞/ 391 阅读

相关在vue中使用高德地图

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

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

相关 vue中使用高德地图

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

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

相关高德地图基本使用

1、引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15

比眉伴天荒/ 2021年07月24日 22:01/ 0 赞/ 680 阅读