uniapp+高德地图api 获取定位信息及详细地址

最新推荐文章于 2024-05-09 22:48:24 发布

汀途

最新推荐文章于 2024-05-09 22:48:24 发布

阅读量7.2k

点赞数 4

分类专栏： Web前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_47323674/article/details/122368046

版权

引入高德地图js api 高德地图api官方文档
根据官方文档建议，我使用的是JSAPI Loader 并且是通过npm安装的

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

在脚本中导入

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

给地图准备一个容器并加入css样式

<view id="container"></view>
<style>
	#container {
   
		padding: 0px;
		margin: 10px;
		width: 100%;
		height: 280px;
	}
</style>

初始化地图

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