微信小程序 地图组件使用

 本地图程序利用map组件，以及使用它的markers,polyline属性分别设置地图两个位置的标志以及他们之间的连线，利用腾讯地图的API对两个地点进行查询，动态设置地图的经纬度，以及动态初始化markers,polyline属性。

程序运行截图如下：

程序代码如下：

1. app.json

{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/Map/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "个人主页",
"iconPath": "utils/images/b3.png",
"selectedIconPath": "utils/images/b4.png"
},
{
"pagePath": "pages/Map/index",
"text": "地图",
"iconPath": "utils/images/a1.png",
"selectedIconPath": "utils/images/a2.png"
}
]
}
}

 2. map/index.js

// pages/Map/index.js
var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
key: 'GEYBZ-IM4WJ-TK5FL-K7BKW-TDDV2-P5FGL'

});
Page({

/**
* 页面的初始数据
*/
data: {
start_lat: 0,
start_lon: 0,
end_lat:0,
end_lon:0,
markers: [
{
iconPath: '../../utils/images/qz.jpg',
id: 0,
latitude: 0,
longitude: 0,
width: 50,
height: 50
},
{
iconPath: '../../utils/images/qz.jpg',
id: 1,
latitude: 0,
longitude: 0,
width: 50,
height: 50
}
],
address: '',
polyline: [
{
points: [{
longitude: 0,
latitude: 0

}, {
latitude: 0,
longitude: 0
}],
color: "#ff6600",
width: 2,
dottedLine: false,
arrowLine: true,
borderColor: "#000",
borderWidth: 5
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
let start_lat=0;
let start_lon=0;
wx.getLocation({
success: function (res) {
qqmapsdk.search({
keyword: '江西省南昌市新建区丰和南大道696号',
complete: function (res) {
console.log(res.data[0].location.lat);
console.log(res.data[0].location.lng);
start_lat = res.data[0].location.lat;
start_lon = res.data[0].location.lng;
that.setData({
start_lat: res.data[0].location.lat,
start_lon: res.data[0].location.lng,
"markers[0].latitude": res.data[0].location.lat,
"markers[0].longitude": res.data[0].location.lng,
"polyline[0].points[0].latitude": res.data[0].location.lat,
"polyline[0].points[0].longitude": res.data[0].location.lng,
})
}
});
qqmapsdk.search({
keyword: '江西省南昌市新建区红谷滩新区学府大道999号',
complete: function (res) {
that.setData({
end_lat: res.data[0].location.lat,
end_lon: res.data[0].location.lng,
"markers[1].latitude": res.data[0].location.lat,
"markers[1].longitude": res.data[0].location.lng,
"polyline[0].points[1].latitude": res.data[0].location.lat,
"polyline[0].points[1].longitude": res.data[0].location.lng,
// polyline: [{
// points: [{
// longitude: res.data[0].location.lng,
// latitude: res.data[0].location.lat

// }, {
// latitude: that.data.start_lat,
// longitude: that.data.start_lon
// }],
// color: "#ff6600",
// width: 2,
// dottedLine: false,
// arrowLine: true,
// borderColor: "#000",
// borderWidth: 5
// }]
});
}
})

},
})

},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

​​​​​​​   3. map/index.wxml

<map class='map' latitude='{{start_lat}}' longitude='{{start_lon}}' polyline="{{polyline}}" markers='{{markers}}'>
</map>

   4.  map/index.wxss

page{
width: 100%;
height: 100%;
}
.map{
height: 100%;
width: 100%;
}