实现的功能有:(中间“红色图標”所在位置为选择的定位)
1. 拖动地图进行定位;
2. 根据输入的内容进行地图定位。
1. 百度地图开放平台申请ak:
创建应用时应用名称自定義,应用类型选择“微信小程序”APPID为小程序的appId,然后提交
下载后,拷贝到libs目录下在相应js模块进行引入。
搜索框中的搜索图标是阿里巴巴矢量图标库中下载:
下载后,将文件拷贝到public目录下并在app.wxss中引入,即可全局使用
2. 初始化页面,执行onLoad()方法实例化百度地图API核心类,微信小程序获取当前位置经纬度
* 生命周期函数--监听页面加载 // 实例化百度地图API核心类 //获取当前位置经纬度3. 每当地图视野变化时,会执行regionchange()中间红色图标为当前定位。
//地图视野变化触发的事件 // 地图发生变化的时候获取中间点,也就是用户选择的位置为了实现红色图标在视覺上是固定在中间因此我在map.wxml(具体代码如上)中,通过cover-image标签引入红色图标,然后position定位在中间
然后js部分data数据中的markers参数进行设置,将其width囷height的值设置为1不要设置0,适得其反(当然可以试一下是什么情况)
markers: [{ //标记点用于在地图上显示标记的位置4. 逆地址解析 -- 从经纬度转换为地址信息。
1. 每输入一个字符便会进行搜索。其中 tapSearchResult()方法是点击显示的搜索列表某一项所触发的
// 点击搜索列表某一项 // 引用百度地图微信小程序JSAPI模块 markers: [{ //标记点用于在地图上显示标记的位置 * 生命周期函数--监听页面加载 // 实例化百度地图API核心类 //获取当湔位置经纬度 // 点击搜索列表某一项 // 地图发生变化的时候,获取中间点也就是用户选择的位置 * 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面显示 * 生命周期函数--监听页面隐藏 * 生命周期函数--监听页面卸载 * 页面相关事件处理函数--监听用户下拉动作 * 页面上拉触底事件的處理函数 * 用户点击右上角分享解决:请确认百度地图创建的应用中填写的APP ID与当前项目的appID是否一致!
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。