高德地图api对接
1.申请高德地图开发者
登录地址 高德开放平台 | 高德地图API
未注册的同学需要支付宝扫码绑定申请个人开发者
登录之后
2.申请应用
选中控制台->申请应用
配置key
3.项目开发
项目开发参考文档：地图点击和鼠标事件-地图事件-示例中心-JS API 2.0 示例 | 高德地图API
地图在vue中使用：JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API
建立config配置文件夹，在src里面
根据申请的地图key 配置mapConfig.js
安装@amap/amap-jsapi-loader 高德地图api的js包
- 安装命令 pnpm add @amap/amap-jsapi-loader
全居配置高德地图api使用的token
- 在main.js中配置地图token
在组件中使用地图
创建地图容器
<template>
<div id="container"></div>
</template>引入 JS API Loader
import AMapLoader from '@amap/amap-jsapi-loader';加载和初始化地图对象并在地图初始化返回AMap地图对象后进行地图的渲染
地图点击获取经纬度 click事件监听
地图点击需要在地图对象返回后且渲染出地图才能操作
经纬度反查地址信息 getAddress()
- 创建地理编码对象
创建地理编码对象需要先完成地图对象初始化，
- 根据经纬度查询地理信息 getAddress()
先点击地图获取到经纬度，然后再调用经纬度查询地理信息
地图添加自定义marker
- 创建自定义marker
- 添加到地图
地理信息查询经纬度 getLocation()
创建地理信息对象，并用一个变量接收
地理对象查询地理信息的经纬度 getLocation()
返回result数据中包含了经纬度
