uniapp 中引入高德地图

左手的ㄟ右手 2023-02-23 08:26 643阅读 0赞

uniapp 引入高德地图

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706150814960.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvZGVyMTk5OA==,size_16,color_FFFFFF,t_70
[20200706151209304.png]: https://img-blog.csdnimg.cn/20200706151209304.png