vue3.0+ts使用原生高德地图解决方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.0+ts使用原生高德地图解决方法相关的知识,希望对你有一定的参考价值。

参考技术A 1.引入高德sdk

2.为了防止打包时把高德纳入,我们需要在webpack中配置,这里以vue.config.js为例

3.声明文件,用了typescript,那么就是想运用到它的类型提醒功能,那么必不可少地需要引入高德地图的声明文件,由于官方也没有给出,我们只能根据api文档来自己书写自己需要用到的函数声明,下面是我们项目中大部分会用到的声明,可以在src目录下新建一个types文件夹专门用于存放声明文件:
src/types/Amap.d.ts:

4.找到tsconfig.json文件,配置上声明文件

5.接下来就可以在页面中快乐的使用了

vue加载高德地图(原生)

参考技术A 1. 在 public 文件夹下的 index.html 中加入

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

2. 在 vue.config.js 文件中配置 externals

///module.exports =

  devServer:

    port: 57103 // 端口号配置

  ,

  configureWebpack:

    externals:

      'AMap': 'AMap' // 高德地图配置

   

注: vue.config.js 文件要自己创建,vue-cli 3.0 不会自动生成此文件。 此外,修改 vue.config.js 不会触发热加载,也就是修改之后你需要重新 run 一下你的项目,它才能生效。

3.加载地图

地图容器要给他一个宽高。

注:init() 方法请在 mounted 生命周期中调用,因为如果在 created 阶段调用,会找不到 html 元素 div#container

注2:若中途遇到 'map' is assigned a value but never used

可找到package.json中找到rules: 添加 "no-unused-vars":0

最终效果

高德API:https://developer.amap.com/api/javascript-api/guide/map/map-style

以上是关于vue3.0+ts使用原生高德地图解决方法的主要内容,如果未能解决你的问题,请参考以下文章

Flutter笔记-调用原生IOS高德地图sdk

【转】Android接入高德地图不显示地图

苹果高德地图无法登录使用代理软件

在flutter中使用高德地图

高德地图怎样实现实时定位,得到当前地点的坐标,位置

高德地图怎样实现实时定位,得到当前地点的坐标,位置