html
<view>
<view class="p30">
<view class="CommonTitle">地址查询</view>
<view class="address">{{address}}</view>
</view>
<map class="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="15" markers="{{markers}}" bindtap="_BtnMap"></map>
</view>
js
// pages/OtherPages/CustomerDetails/CustomerDetails.js
Page({
/**
* 页面的初始数据
*/
data: {
// 10月16日,标记图标
markers: [{
iconPath: "../../../statics/img/address.png",
id: 0,
latitude: [],
longitude: [],
width: 30,
height: 30
}],
// 10月16日,地图需要的4个属性,经纬度、幼儿园名字,幼儿园的地址
latitude: [],
longitude: [],
name: '彩虹蜗牛国际早教中心(泰福园)',
address: '北京市朝阳区三间房中街5号院泰福苑2区',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// 10月16日,腾讯地图,地址解析(地址转坐标)
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1',
data: {
address: this.data.address,
key: 'PRVBZ-SXNKF-VWSJG-NOTTL-BW4D7-XBBQZ'
},
success: (res) => {
// console.log(res.data.result.location.lat, res.data.result.location.lng)
this.setData({
latitude: res.data.result.location.lat,
longitude: res.data.result.location.lng,
markers: [{
latitude: res.data.result.location.lat,
longitude: res.data.result.location.lng,
}]
})
},
})
},
// 10月16日,点击跳转腾讯地图(显示的内容)
_BtnMap() {
wx.getLocation({
type: 'gcj02',
success: (res) => {
// 使用微信内置地图,确定,公司经纬度,公司地址信息
wx.openLocation({
latitude: this.data.latitude,
longitude: this.data.longitude,
name: this.data.name,
address: this.data.address,
})
},
})
},
})
网友评论