vue 项目中使用高德地图

＊且听风吟

已于 2023-04-03 10:26:54 修改

阅读量1.6k

点赞数 2

分类专栏： # Vue 2.x 文章标签： vue.js javascript 前端

于 2023-03-23 19:48:27 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/129709228

版权

官方文档：
高德地图API官网
 高德地图2.0参考手册
 高德地图JS API 2.0 示例
 在项目中使用 vue-amap
高德地图JSAPI在Vue框架下使用

高德地图在线 JS API 示例

一、账号准备

首先，需要注册并登录高德地图开放平台，申请密钥。操作指引：高德地图开放平台

在这里插入图片描述

vue 中使用高德地图的方式有两种：

vue-amap ：一套专门用于 vue 的高德地图插件；
原生的高德地图。

接下来会使用引入原生高德地图的方式，大概过程：

（1）页面中引入高德地图 JSAPI ；
（2）获取到 DOM 元素；
（3）将其作为容器，连同其它参数，传递给 new AMap.Map，创建一个地图实例；
（4）往地图中加入更多元素。

二、安装高德地图加载器

npm 安装：

npm i @amap/amap-jsapi-loader --save

或者 yarn 安装：

yarn add @amap/amap-jsapi-loader --save

安装成功：
在这里插入图片描述

三、封装地图组件

1）引入 `AMapLoader`

import AMapLoader from '@amap/amap-jsapi-loader';

2）引入安全密钥

在这里插入图片描述
根据官方文档，申请的 key 需要引入安全密钥一起使用：

<script>
window._AMapSecurityConfig = {
   
  securityJsCode: '' // '「申请的安全密钥」',
}
</script>

3）初始化地图

methods: {
   
    initAMap () {
   
      AMapLoader.load({
   
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
          'AMap.CitySearch', &#