微信小程序---微信小程序中实现地图的demo及流程
1.下载地图包 ： qqmap-wx-jssdk.min.js
2.在小程序的管理页面配置小程序的请求域名：https://apis.map.qq.com
3.使用
wxml
js
//引入地图包
var QQMapWX = require('../../../assets/mappackagejs/qqmap-wx-jssdk.min.js');
var qqmapsdk;
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
statusBarHeight: getApp().globalData.statusBarHeight,
headText: '地图导航',
headImage: '',
mangFalse: true,
infoLeft: [],
latitude:"26.514071",
longitude:"106.700363",
polyline:null,
markers:null,
mapSearchList:[],
inputValue:'',
isShowList:true,
scale:18,
location:'26.514071,106.700363'
},
//获取搜索地理位置
// getLocation(){
// var that = this;
// wx.getLocation({
// type: 'gcj02',
// success (res) {
// const latitude = res.latitude
// const longitude = res.longitude
// const speed = res.speed
// const accuracy = res.accuracy
// that.setData({
// latitude:res.latitude,
// longitude:res.longitude,
// })
// // that.getCityinfo()
// console.log(that.data.latitude,that.data.longitude)
// console.log(latitude,longitude)
// }
// })
// },
//一进入页面获取地图中心点
getOriginPlace(e) {
console.log(e,this.data.latitude,this.data.longitude)
var _this = this;
qqmapsdk.reverseGeocoder({
//位置坐标，默认获取当前位置，非必须参数
location:_this.data.location,
//get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
success: function(res) {//成功后的回调
console.log(res);
var res = res.result;
var mks = [];
//当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
mks.push({ // 获取返回结果，放到mks数组中
title: res.address,
id: 0,
latitude: res.location.lat,
longitude: res.location.lng,
iconPath: './images/direct_icon.png',//图标路径
width: 20,
height: 25,
// callout: { //在markers上展示地址名称，根据需求是否需要
// content: res.address,
// color: '#000',
// display: 'ALWAYS'
// }
});
_this.setData({ //设置markers属性和地图位置poi，将结果在地图展示
markers: mks,
poi: {
latitude: res.location.lat,
longitude: res.location.lng
}
});
},
fail: function(error) {
console.log(location,失败了)
},
complete: function(res) {
console.log(res);
}
})
},
// //搜索附近地址
// getNearbySearch:function(){
// var _this = this;
// // 调用接口
// qqmapsdk.search({
// keyword: this.data.inputValue, //搜索关键词console.log(res)
// location: '26.514071,106.700363', //设置周边搜索中心点
// auto_extend:1,
// // region:"贵阳市",
// success: function (res) { //搜索成功后的回调
// console.log(res)
// var mks = []
// mks.push({ // 获取返回结果，放到mks数组中
// title: res.data[0].title,
// id: res.data[0].id,
// latitude: res.data[0].location.lat,
// longitude: res.data[0].location.lng,
// iconPath: "./images/direct_icon.png", //图标路径
// width: 20,
// height: 25
// })
// _this.setData({ //设置markers属性，将搜索结果显示在地图中
// markers: mks
// })
// _this.setData({
// isShowList:true,
// })
// },
// fail: function (res) {
// },
// complete: function (res){
// }
// });
// },
upHeade: function () {
},
toMapSearch(){
wx.navigateTo({
url: "/mapNavigation/pages/mapsearch/mapsearch"
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
qqmapsdk = new QQMapWX({
key: '52VBZ-X7VRQ-T5H57-GQOSY-EVEWJ-OTFJA'
});
if (options.mange === '0') {
this.setData({
mangFalse: false
})
}
this.getOriginPlace()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getOriginPlace()
// this.getLocation()
// qqmapsdk.geocoder({ //获取目标地址的地图信息，把详细地址输入address即可
// address: '贵阳市花溪区黄河路',
// success: function (res) { //返回的console.log(res)数据里面有该地址的经纬度
// // console.log(res)
// console.log("接口调用成功返回的回调")
// },
// fail: function (res) {
// // console.log("接口调用失败返回的回调")
// },
// complete: function (res) {
// // console.log("接口调用结束的回调函数（调用成功、失败都会执行）")
// }
// })
},
})