- <template>
- <view class="homePage">
- <map id="map" longitude="120.131441" latitude="30.279383" :scale="scale" :controls="controls" :markers="markers"
- polyline="polyline" :circles="circles" @regionChange="regionchange" @tap="tap" @markerTap="markertap" @controlTap="controltap"
show-location style="width: 100%; height: 300px;" :include-points="includePoints"></map>
<button @tap="changeScale">改scale</button>
<button @tap="getCenterLocation">getCenterLocation</button>
<button @tap="moveToLocation">moveToLocation</button>
<button @tap="changeCenter">改center</button>
<button @tap="changeMarkers">改markers</button>
<!-- <map
v-if="isShowMap" id="userMap" class="map" - longitude="currentLongitude"
- latitude="currentLatitude"
- show-location="true"
- controls="controls2"
- markers="covers"
- scale="scale"
@controltap="controltap"
@markertap="markertap"
@regionchange="regionchange"
></map> -->
</view>
</template>
<script>
export default {
data() {
return {
scale: 14,
longitude: 120.131441,
latitude: 30.279383,
markers: [{
iconPath: "/static/image/icon_kefu_3x.png",
id: 10,
latitude: 30.279383,
longitude: 120.131441,
width: 50,
height: 50,
customCallout: {
type: 1,
time: '1',
},
fixedPoint: {
originX: 400,
originY: 400,
},
iconAppendStr: '黄龙时代广场黄龙时代广场黄龙时代广场黄龙时代广场test'
}],
includePoints: [{
latitude: 30.279383,
longitude: 120.131441,
}],
polyline: [{
points: [{
longitude: 120.131441,
latitude: 30.279383
}, {
longitude: 120.128821,
latitude: 30.278200
}, {
longitude: 120.131618,
latitude: 30.277600
}, {
longitude: 120.132520,
latitude: 30.279393
}, {
longitude: 120.137517,
latitude: 30.279383
}],
color: "#FF0000DD",
width: 5,
dottedLine: false
}],
circles: [{
latitude: 30.279383,
longitude: 120.131441,
color: "#000000AA",
fillColor: "#000000AA",
radius: 80,
strokeWidth: 5,
}],
controls: [{
id: 5,
iconPath: '/static/image/icon_mine_3x.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}],
}
},
onLoad() {
const that = this;
this.mapCtx = my.createMapContext('userMap');
this.mapCtx.showsCompass({
isShowsCompass: 0
});
this.mapCtx.showsScale({
isShowsScale: 0
});
},
methods: {
getCenterLocation() {
this.mapCtx.getCenterLocation(function(res) {
console.log(res.longitude)
console.log(res.latitude)
})
},
moveToLocation() {
this.mapCtx.moveToLocation()
},
regionchange(e) {
console.log('regionchange', e);
// 注意:如果缩小或者放大了地图比例尺以后,请在 onRegionChange 函数中重新设置 data 的
// scale 值,否则会出现拖动地图区域后,重新加载导致地图比例尺又变回缩放前的大小。
if (e.type === 'end') {
// this.setData({
// scale: e.scale
// });
this.scale = e.scale;
}
},
markertap(e) {
console.log('marker tap', e);
},
controltap(e) {
console.log('control tap', e);
},
tap() {
console.log('tap:');
},
changeScale() {
// this.setData({
// scale: 8,
// });
this.scale = 8;
},
changeCenter() {
// this.setData({
// longitude: 113.324520,
// latitude: 23.199994,
// includePoints: [{
// latitude: 23.199994,
// longitude: 113.324520,
// }],
// });
},
//支持地图不接受手势事件, isGestureEnable为1 表示支持,为0表示不支持
gestureEnable() {
this.mapCtx.gestureEnable({
isGestureEnable: 1
});
},
//地图是否显示比例尺, showsScale 为1表示显示,为0表示不显示
showsScale() {
this.mapCtx.showsScale({
isShowsScale: 1
});
},
//地图是否显示指南针, showsCompass 为1表示显示,为0表示不显示
showsCompass() {
this.mapCtx.showsCompass({
isShowsCompass: 1
});
},
changeMarkers() {
this.setData({
markers: [{
iconPath: "/image/green_tri.png",
id: 10,
latitude: 21.21229,
longitude: 113.324520,
width: 50,
height: 50
}],
includePoints: [{
latitude: 21.21229,
longitude: 113.324520,
}],
});
},
onGetAuthorize() {
my.getPhoneNumber({
success: (res) => {
let encryptedData = res.response
console.log(encryptedData)
},
fail: (res) => {
console.log(res)
console.log('getPhoneNumber_fail')
},
});
},
getAuthCode() {
my.getAuthCode({
scopes: 'auth_user', // 主动授权:auth_user,静默授权:auth_base。或者其它scope
success: (res) => {
console.log(res)
if (res.authCode) {
// 认证成功
// 调用自己的服务端接口,让服务端进行后端的授权认证,并且种session,需要解决跨域问题
my.httpRequest({
url: 'https://isv.com/auth', // 该url是您自己的服务地址,实现的功能是服务端拿到authcode去开放平台进行token验证
data: {
authcode: res.authCode,
},
success: () => {
// 授权成功并且服务器端登录成功
},
fail: () => {
// 根据自己的业务场景来进行错误处理
},
});
}
},
});
},
controltap(e) {
console.log('control tap', e);
// 回到当前位置
if (e.controlId === 2) {
this.mapCtx.moveToLocation();
}
if (e.controlId === 4) {
my.navigateTo({
// url: '/pages/personCenter/orderList/orderList'
url: '/pages/personCenter/test/test'
});
}
},
// 点击网点
markertap(e) {
console.log(e)
this.data.shopDataList.map(item => {
if (item.shopStaticInfo.shopSeq === Number(e.markerId)) {
this.setData({
'currentShopName': item.shopStaticInfo.shopName
})
}
})
},
}
}
</script>
模拟器截图
手机预览截图