首先要下载腾讯地图提供的sdk,放在项目的对应目录下,引用。
import QQMapWX from '../../sdks/qqmap-wx-jssdk'
设置好后,就可以开始使用了。
let qqmapsdk = new QQMapWX({
key: '自己申请的key'
})
let _this = this
Taro.getLocation({
type: 'wgs84',
success(res) {
_this.setState({
latitude = res.latitude longitude = res.longitude })
}
})
let mks =[]
let _this = this //这里声明下_this,使用taro的this.直接操作到微信调试工具会报错(可能是我姿势不对)
qqmapsdk.search({
keyword: '工厂',
success: function (res) {
// let _this = this
mks =[] for (let i =0; i < res.data.length; i++) {
mks.push({
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: workermarker, //图片路径
width: 20, height: 20 }
)}
console.log(mks)
_this.setState({ markers: mks })
// this.setData({ // markers: mks // })
console.log(res)
}, fail: function (res) { console.log(res) }, complete: function (res) { console.log(res) } })
好了,这样就可以愉快的在地图上实现标记了。
真机调试的时候看不数据,吓一跳,一百度,原来是没用勾选详情下面的“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”,勾选了就可以了。