一、步骤1:经纬度数据拾取
一般情况下要在地图上展示目标位置都需要知道其经纬度数据,这里我们通过 腾讯地图位置服务拾取功能 获取目标地址的经纬度坐标数据。这里我们选择西安火车站作为示例数据。
二、步骤2:创建数据表存储数据
创建数据表:定位地址,字段包括名称、地址、纬度、经度等字段用于存储目标位置数据信息。
注意:经纬度数据类型必须是数字。
打开管理数据,向数据表中添加位置数据信息。
三、步骤1:首页目标位置显示
1. 在页面中添加数据列表组件,数据模型选择定位地址。
2. 数据列表组件中第一个文本组件的文本内容选择名称。
3. 数据列表组件中第二个文本组件的文本内容选择地址。
4. 数据列表中图标组件的图标类型选择自定义图标。
5. 自定义图标通过添加素材方式,增加了自定义的地图定位图标。这里用户可以根据需求自定义上传图标素材。
四、步骤2:添加打开微信内置地图方法代码
1. 给图标组件添加点击事件,应用动作选择 Javascript 代码。
2. 添加自定义方法 openLocation。
3. 方法入参选择经度、纬度。
代码如下,作用是传递经度和纬度两个参数。
({longitude:$w.item_listView1.jd,latitude:$w.item_listView1.wd})
4. 打开应用的代码编辑器,在 openLocation 方法中添加打开微信地图的代码。
代码如下:
export default function({event, data}) { const latitude = data.target.latitude // 获取纬度参数 const longitude = data.target.longitude // 获取经度参数 wx.openLocation({ latitude, longitude, scale: 9 })}
五、步骤3:发布应用验证结果:
注意:微信小程序接口必须发布应用后在手机端查看结果。
发布小程序应用到体验环境,如图看到从数据源获取的目标位置信息,选择地图定位图标后会进入微信内置地图。
如图在腾讯内置地图中会标注目标位置,同时带有线路导航按钮。
选择线路导航按钮会唤起手机内置地图,实现在地图导航功能。