uniapp 中引入高德地图

uniapp 引入高德地图

地图现在已经渗入到生活的方方面面,给生活带了极大的编译,那么我们如何才能在
项目中引入地图呢

首先看一下效果 : 联系地址这个地方 在项目中引入的高德地图
uniapp 中引入高德地图_第1张图片
引入步骤 首先
1,需要在高德开发平台注册成为开发者
地址:
https://lbs.amap.com/
2. 在控制台里面创建应用 申请获取Key
3. 下载微信小程序的SDK代码 引入项目中
uniapp 中引入高德地图_第2张图片
4 在自己需要的页面引入
import amap from “…/…/js_sdk/js-amap/amap-wx.js”;
5 在需要加载地图的地方加入

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

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

         var amapPluginInstance = new amap.AMapWX({	
				key: 你高德地图应用获取的key  //该key 是在高德中申请的微信小程序key
			});
		   amapPluginInstance.getPoiAround({
		      success: function(data){
		        //成功回调
		      },
		      fail: function(info){
		        //失败回调
		        console.log(info)
		      }
		    })

7 项目下载地址
https://gitee.com/soul_PreCoder/mz_student_app

你可能感兴趣的:(学生管理移动版本)