菜鸟学习微信小程序-地图组件笔记(一)
1.关于map组件markers、标注callout的简单用法
1.1如何添加多个标记点
//人员所在位置经纬度,
if(attendanceSignList&& attendanceSignList.length>0){
that.setData({
latitude: attendanceSignList[0].lat,
longitude: attendanceSignList[0].lon,
})
//获取地图 markers
var markersList = []
var markId= 0
attendanceSignList.forEach((item) => {
markersList.push({
id: markId++, //标注点id
openId: item.openId, //人员id
latitude: item.lat,
longitude: item.lon,
iconPath: that.data.uploadUrl + 'icon/coordinate_header_icon.png',
width: 30,
height: 40,
//气泡callout
callout: {
display:'ALWAYS',// 常显气泡
content: item.userName, //名称文本
color: '#fff', //文本颜色
borderRadius: 5, //边框圆角
borderWidth: 1, //边框宽度
borderColor: '#0060ff', //边框颜色
bgColor: '#0060ff', //背景色
padding: 5, //文本边缘留白
textAlign: 'center' //文本对齐方式。有效值: left, right, center
}
})
})
//标注
that.setData({
markers: markersList, // 图一展示的markers 和气泡信息
})
}
1.21.2如何添加多个标记点的信息提示框
//气泡callout
callout: {
display:'ALWAYS',// 常显气泡
content: item.userName, //名称文本
color: '#fff', //文本颜色
borderRadius: 5, //边框圆角
borderWidth: 1, //边框宽度
borderColor: '#0060ff', //边框颜色
bgColor: '#0060ff', //背景色
padding: 5, //文本边缘留白
textAlign: 'center' //文本对齐方式。有效值: left, right, center
}
参考原文:https://blog.csdn.net/weixin_43569405/article/details/110639378
2.点击地图标记点,显示标记点的详细信息,或者导航到这里实现。用到cover-view
2.1xml文件
<!-- <text>{{markers[id].placeName}}</text> -->
<block wx:if='{{isshow}}'>
<map id="map" longitude="114.048410" latitude="22.648760" scale="8" include-points="{{markers}}" markers="{{markers}}" bindmarkertap="showModal" data-id="{{markers}}" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;">
<cover-view class='index_bt1'>
<cover-image class='xiaoer' bindtap="login" src="/images/mk.png" />
</cover-view>
<cover-view class='index_shuaxin'>
<cover-image class='shuaxin' src="/images/mk.png" />
</cover-view>
<!--屏幕背景变暗的背景 -->
<cover-view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></cover-view>
<!--弹出框 -->
<cover-view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<cover-view class='placeBox'>
<cover-view class='placeViewLt'>
<cover-view class='viewTitle'>{{myall.placeName}}</cover-view>
<cover-view class='viewDis'>{{myall.dis}}</cover-view>
<cover-view class='viewAddr'>{{myall.adr}}</cover-view>
</cover-view>
<cover-view class='placeViewRt'>
<cover-image data-id="{{myall.id}}" bindtap="opendetail" src='/images/mk.png'></cover-image>
</cover-view>
</cover-view>
<cover-view class='viewIcon'>
<cover-image class='indexIcon' src='/images/time.png'></cover-image>
<cover-view class='timeText'>{{myall.time}}</cover-view>
<cover-image class='indexIcon1' data-id="{{myall}}" src='/images/share.png' bindtap='calling'></cover-image>
<cover-view class='timeText1' data-id="{{myall}}" bindtap='calling'>电话</cover-view>
<cover-image class='indexIcon2' src='/images/nav.png'></cover-image>
<cover-view class='timeText1'>导航</cover-view>
</cover-view>
</cover-view>
</map>
</block>
2.2js
// map.js
var app = getApp()
var mymap = '';
var lat = '';
var long = '';
Page({
data: {
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color: '#FF0000DD',
width: 2,
dottedLine: true
}],
controls: [{
id: 1,
iconPath: '/images/mk.png',
position: {
left: 0,
top: 300 - 1,
width: 50,
height: 50
},
clickable: true
}]
},
//引入数据库
onLoad: function(option) {
var url = app.url + 'Api/Api/get_shop_dp&PHPSESSID=' + wx.getStorageSync('PHPSESSID')
var that = this
console.log(option)
if (option.scene) {
this.setData({
isshow: false
})
wx.navigateTo({
url: '../chat/chat?scene=' + option.scene,
})
} else {
this.setData({
isshow: true
})
}
wx.request({ //让服务器端统一下单,并返回小程序支付的参数
url: url,
data: {
openid: wx.getStorageSync('openid')
},
success: function(res) {
console.log(res);
that.setData({
markers: res.data.data
});
wx.getLocation({
type: 'wgs84',
success(mres) {
var map_lat = mres.latitude;
var map_long = mres.longitude;
var map_speed = mres.speed;
var map_accuracy = mres.accuracy;
that.setData({
lat: map_lat
});
that.setData({
long: map_long
});
}
});
}
});
},
//显示对话框
showModal: function(event) {
//console.log(event.markerId);
var i = event.markerId;
var url = app.url + 'Api/Api/get_shop_dp_detail&PHPSESSID=' + wx.getStorageSync('PHPSESSID');
var that = this;
console.log('====get_detail====')
wx.request({
url: url,
data: {
id: i,
openid: wx.getStorageSync('openid')
},
success: function(res) {
console.log(res);
that.setData({
myall: res.data.data
});
}
});
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function() {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
},
//隐藏对话框
hideModal: function() {
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function() {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
},
opendetail: function(event) {
console.log('-----跳转商品-----');
//console.log(event);
var id = event.currentTarget.dataset.id;
this.setData({
id: id
});
wx.navigateTo({
url: "/pages/detail/detail?id=" + id
}),
console.log(id);
},
calling: function(event) {
var tel = event.currentTarget.dataset.id.tel;
this.setData({
tel: tel
});
wx.makePhoneCall({
phoneNumber: tel,
success: function() {
console.log("拨打电话成功!")
},
fail: function() {
console.log("拨打电话失败!")
}
})
}
})
2.3wxss
/* pages/ditu/ditu.wxss */
/* index/index.wxss */
page{
height: 100%;
}
.index_bt1{
width: 100rpx;
height: 100rpx;
padding-top:30rpx;
margin-left: 600rpx;
}
.xiaoer{
width: 100rpx;
height: 100rpx;
}
.index_shuaxin{
width: 60rpx;
height: 60rpx;
padding-top: 860rpx;
margin-left: 20rpx;
}
.shuaxin{
width: 60rpx;
height: 60rpx;
}
.sch{
display: block;
z-index: 999999;
height: 69rpx;
width:100%;
margin:0 auto;
padding-top: 30rpx;
}
/*底部弹窗开始 -使屏幕变暗 */
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
/*对话框 */
.commodity_attr_box {
height: 280rpx;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 0rpx;
}
.placeBox{
width: 100%;
height: 150rpx;
}
.placeViewLt{
display: inline-block;
width: 620rpx;
height: 140rpx;
vertical-align: middle;
}
.viewTitle{
display: block;
font-size: 38rpx;
color: #3F51B5;
margin-left: 20rpx;
padding-top: 34rpx;
}
.viewDis{
display: inline-block;
font-size: 26rpx;
color: gray;
margin-left: 20rpx;
}
.viewAddr{
display: inline-block;
font-size: 28rpx;
color: gray;
margin-left: 20rpx;
}
.placeViewRt{
display: inline-block;
width: 120rpx;
height: 120rpx;
padding-top: 6rpx;
vertical-align: middle;
}
.viewIcon{
display: block;
height: 100rpx;
width: 100%;
border-top: 1px solid #ebebeb;
padding-top: 40rpx;
}
.indexIcon{
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-left: 40rpx;
vertical-align: middle;
}
.timeText{
display: inline-block;
line-height: 45rpx;
margin-left: 12rpx;
text-align: center;
width: 200rpx;
height: 45rpx;
background-color: rgb(230, 234, 255);
border-radius: 10px;
color: #3F51B5;
font-size: 24rpx;
}
.indexIcon1{
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-left: 110rpx;
vertical-align: middle;
}
.indexIcon2{
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-left: 20rpx;
vertical-align: middle;
}
.timeText1{
display: inline-block;
line-height: 45rpx;
margin-left: 12rpx;
width: 100rpx;
height: 45rpx;
color: #3F51B5;
font-size: 24rpx;
}
.timeText2{
display: inline-block;
line-height: 45rpx;
margin-left: 12rpx;
width: 200rpx;
height: 45rpx;
color: #3F51B5;
font-size: 24rpx;
}
.btn-area{ width: 100%;}
.btn_no{ float:left;width: 40%; margin-left: 5%;border: 0px;}
.btn_ok{ float:left;width: 40%; margin-left: 10%;margin-right: 5%; border: 0px;}