免费做四年级题的网站,海南在线直播,设计网页代码源代码,做网站用什么语音本地图程序利用map组件#xff0c;以及使用它的markers,polyline属性分别设置地图两个位置的标志以及他们之间的连线#xff0c;利用腾讯地图的API对两个地点进行查询#xff0c;动态设置地图的经纬度#xff0c;以及动态初始化markers,polyline属性。
程序运行截图如下以及使用它的markers,polyline属性分别设置地图两个位置的标志以及他们之间的连线利用腾讯地图的API对两个地点进行查询动态设置地图的经纬度以及动态初始化markers,polyline属性。
程序运行截图如下 程序代码如下
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_lat0;
let start_lon0;
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 classmap 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%;
}
