uniapp 高德地图总结

1. uniapp 高德地图总结

1.1.uniapp 高德地图显示

  使用前需到**高德开放平台（https://lbs.amap.com/）**创建应用并申请Key
  登录 高德开放平台，进入“控制台”，如果没有注册账号请先根据页面提示注册账号
  打开 “应用管理” -> “我的应用”页面，点击“创建新应用”，根据页面提示填写内容创建应用
  在应用下点击“添加”为应用添加Key，根据需要分别为Android平台、iOS平台申请Key
  配置使用高德地图
  准备：https://lbs.amap.com/api/javascript-api-v2/prerequisites
  uni-app（map）https://uniapp.dcloud.net.cn/component/map.html

1.1.1. 登录控制台

  （1）登录 高德开放平台控制台，如果没有开发者账号，请 注册开发者
  （2）创建 key,进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。

  （3）获取 key 和密钥。创建成功后，可获取 key 和安全密钥。

  （4）配置manifest.json

<template>
	<view>
		<!-- 地图 -->
		<map style="width: 100%; height: 300px;" :latitude="latitude" 
		:longitude="longitude" :markers="markers" :scale="scale">
		</map>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				longitude: 108.952,
				latitude: 34.223,
				scale:5,
				 markers: [{
				longitude: 108.952,
				latitude: 34.223,
					iconPath: '../../static/image/home-active.png',
					width:30,
					height:30
				}],
		}
	}
}
</script>
<style>
</style>

1.2.高德地图引入步骤

(1)需要在高德开发平台注册成为开发者
地址：
https://lbs.amap.com/
(2) 在控制台里面创建应用 申请获取Key
(3)下载微信小程序的SDK代码 引入项目中

(4)在自己需要的页面引入

    import amap from '../../../js_sdk/js_amap/amap-wx.130';

(5) 在需要加载地图的地方加入

 <map class="map-layout"
             :latitude="latitude"
             :longitude="longitude"
             scale="14"
             :markers="markers"
             :show-location="true"
             @markertap="markertap"
             @updated='mapUpdated'>
        </map>

latitude/longitude --经纬度
在代码中 加入

         var amapPluginInstance = new amap.AMapWX({	
				key: 你高德地图应用获取的key  //该key 是在高德中申请的微信小程序key
			});
		   amapPluginInstance.getPoiAround({
		      success: function(data){
		        //成功回调
		      },
		      fail: function(info){
		        //失败回调
		        console.log(info)
		      }
		    })
```![在这里插入图片描述](https://img-blog.csdnimg.cn/d9a4f5f8a15d483ebca70ea0e405b5dc.jpeg#pic_center)