微信小程序地图组件使用

本地图程序利用map组件，以及使用它的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_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%;
}

微信小程序地图组件使用相关推荐

微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
详解微信小程序地图组件实例：远征军墓地分布图小程序
先上效果图,有兴趣再往下看. 1是主页面,点一下,进入2,可以看到地图底图上有墓地分布的点位,划拉划拉放大缩小,把缅甸那块放大了,可以看到墓地点位,随便点一个点位,浮出墓地名称"西保火车站墓 ...
微信小程序地图组件无限闪烁导致小程序崩溃
在做一个通过腾讯地图api查询关键词搜索附近标记的小程序时遇到了这个问题在这个事件触发时,会一直重复触发,你不动时地图他还是一直在触发后来调试之后发现是我在bindupdated触发的函数内修改了 ...
微信小程序-地图组件(map)的使用
在微信开发文档给出的信息来看,它使用的是高德地图的api. 我们来到高德地图的官方坐标拾取器界面,得到示例坐标. 我们在组件中放上map组件,这里提及一下,两个官方要求的注意点: 请注意原生组件使用限 ...
微信小程序地图组件错误显示非洲问题
map组件标点总是无法显示,初始位置定在非洲,因为腾讯地图没有覆盖非洲,不缩小就是个大白块 <mapid="map"longitude="{{longitude}} ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...

微信小程序地图组件使用

微信小程序地图组件使用相关推荐

最新文章

热门文章

微信小程序 地图组件使用

微信小程序 地图组件使用相关推荐

最新文章

热门文章

微信小程序地图组件使用

微信小程序地图组件使用相关推荐