vue 项目中使用高德地图_vue h5使用高德地图

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

高德地图在线 JS API 示例

一、账号准备

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

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

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

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

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

二、安装高德地图加载器

npm 安装：

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

或者 yarn 安装：

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

安装成功：

三、封装地图组件

1）引入 AMapLoader

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

2）引入安全密钥

根据官方文档，申请的 key 需要引入安全密钥一起使用：

<script>
window._AMapSecurityConfig = {
   
  securityJsCode: '' // '「申请的安全密钥」',
}
</script>
1
2
3
4
5
6

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', 
1
2
3
4
5
6
7
8
9