513 lines
16 KiB
Plaintext
513 lines
16 KiB
Plaintext
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="map-container">
|
|||
|
|
<pow-amapall class="map" ref='amap' @markerClick='markerBeiDianJiLe' @regionDidChange='shijiaoJieshuBianhua'
|
|||
|
|
@regionWillChange='shijiaoKaishiBianhua' @mapClick='mapBeiDianJiLe'
|
|||
|
|
@mapScreenshotRes='ditujietuhuidiao'></pow-amapall>
|
|||
|
|
</view>
|
|||
|
|
<view class="options">
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="jianchadingweiquanxian">检查定位权限</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="showzijiweizhi">{{didShowMyLocation?'隐藏':'展示'}}自己位置</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="qiehuantuceng">切换图层</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="showlukuangxinxi">{{didShowTraffic?'隐藏':'展示'}}路况信息</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="showguiweianniu">{{didShowMyLocationBtn?'隐藏':'展示'}}归位按钮</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="showbilichi">{{didShowScaleSize?'隐藏':'展示'}}比例尺可见</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="showsuofanganniu">{{didShowZoomBtn?'隐藏':'展示'}}缩放按钮</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="showzhinanzhenanniu">{{didShowCompassBtn?'隐藏':'展示'}}指南针按钮</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="enablesuofangshoushi">{{enableZoomGesture?'禁止':'允许'}}缩放手势</button>
|
|||
|
|
<!-- 拖拽，倾斜，旋转手势控制 -->
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="enabletuozhuaishoushi">{{enableScrollGesture?'禁止':'允许'}}拖拽手势</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="enableqingxieshoushi">{{enableTiltGesture?'禁止':'允许'}}倾斜手势</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="enablexuanzhuanshoushi">{{enableRotateGesture?'禁止':'允许'}}旋转手势</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini"
|
|||
|
|
@click="zhongyingwen">切换到{{switchToLanguage}}文地图</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="movedituzhongxindian">移动地图中心点</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="suofangditu">缩放地图</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shezhisuofangfanwei">设置缩放范围</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="tianjiamarker">添加marker</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchumarker">删除指定marker</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyoumarker">删除所有marker</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="huazhexian">画折线</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchuzhexian">删除某条折线</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouzhexian">删除所有折线</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="huayuanxing">画圆形</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchuyuanxing">删除某个圆形</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouyuanxing">删除所有圆形</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="huaduobianxing">画多边形</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchuduobianxing">删除某个多边形</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="shanchusuoyouduobianxing">删除所有多边形</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="suofangbaohanmarkers">缩放以包含marker</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="pinghuayidong">点平滑移动</button>
|
|||
|
|
<button type="primary" class="controlbtn" size="mini" @click="ditujietu">地图截图</button>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// import {
|
|||
|
|
// checkAndRequestLocationPermission
|
|||
|
|
// } from '@/uni_modules/pow-amapall'
|
|||
|
|
// const iconData = require('@/static/iconbase64.json')
|
|||
|
|
let _markers = [{
|
|||
|
|
id: 'uuid111', //marker的唯一id，不能重复
|
|||
|
|
lat: 39.909187,
|
|||
|
|
lng: 116.397455,
|
|||
|
|
title: '天安门',
|
|||
|
|
subtitle: '天安门城楼',
|
|||
|
|
icon: 'https://s11.ax1x.com/2023/03/17/ppGtKhD.png', //目前只支持网络图片，免费生成网络图片的地址 imgse.com
|
|||
|
|
iconWidth: 30,
|
|||
|
|
iconHeight: 30, //单位 px , iconWidth和iconHeight成对传，否则不生效
|
|||
|
|
anchor: 'center', // center 图片中间对准经纬度(常用于表示车辆行驶在路上)，bottomCenter 图片底部中间对准经纬度(常用于扎针标记位置)，默认值center
|
|||
|
|
// 如果存在callout气泡,anchor会被强制设置为bottomCenter
|
|||
|
|
callout: {
|
|||
|
|
content: '自定义的气泡1',
|
|||
|
|
textColor: '#ff88ff',
|
|||
|
|
fontSize: 13,
|
|||
|
|
textAlign: 'center',
|
|||
|
|
borderRadius: 10,
|
|||
|
|
borderColor: '#ff0000',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
bgColor: '#ffffff',
|
|||
|
|
padding: 5 //气泡文字跟边框的距离
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'uuid222', //marker的唯一id，不能重复
|
|||
|
|
title: '王府井',
|
|||
|
|
lat: 39.909187,
|
|||
|
|
lng: 116.412555,
|
|||
|
|
subtitle: '王府井大街',
|
|||
|
|
anchor: 'bottomCenter',
|
|||
|
|
callout: {
|
|||
|
|
content: '这是一个自定义的气泡',
|
|||
|
|
textColor: '#ff8800',
|
|||
|
|
fontSize: 20,
|
|||
|
|
textAlign: 'center',
|
|||
|
|
borderRadius: 10,
|
|||
|
|
borderColor: '#ff0000',
|
|||
|
|
borderWidth: 3,
|
|||
|
|
bgColor: '#ffffff',
|
|||
|
|
padding: 20
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'uuid333', //marker的唯一id，不能重复
|
|||
|
|
title: '社区',
|
|||
|
|
lat: 39.959187,
|
|||
|
|
lng: 116.397455,
|
|||
|
|
subtitle: '老舍茶馆',
|
|||
|
|
anchor: 'bottomCenter',
|
|||
|
|
// iconBase64: iconData.imageBase64,
|
|||
|
|
iconWidth: 40,
|
|||
|
|
iconHeight: 40, //单位 px , iconWidth和iconHeight成对传，否则不生效
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
let polyline = {
|
|||
|
|
id: 'polyline111', //折线的唯一id，不能重复
|
|||
|
|
points: [
|
|||
|
|
'116.362209,39.887487',
|
|||
|
|
'116.422897,39.878002',
|
|||
|
|
'116.372105,39.90651',
|
|||
|
|
'116.428945,39.89663'
|
|||
|
|
],
|
|||
|
|
width: 20,
|
|||
|
|
isDottedLine: true,
|
|||
|
|
color: '#ff0000',
|
|||
|
|
}
|
|||
|
|
let circle = {
|
|||
|
|
id: 'circle111', //圆形的id，不能重复
|
|||
|
|
lat: 39.909187,
|
|||
|
|
lng: 116.397455, //圆心经纬度
|
|||
|
|
radius: 1000, //单位 m
|
|||
|
|
lineWidth: 5,
|
|||
|
|
strokeColor: '#FF0000',
|
|||
|
|
fillColor: '#00ffff',
|
|||
|
|
}
|
|||
|
|
let polygon = {
|
|||
|
|
id: 'polygon111', //多边形的id，不能重复
|
|||
|
|
points: [
|
|||
|
|
'116.404,39.915',
|
|||
|
|
'116.408,39.917',
|
|||
|
|
'116.412,39.919',
|
|||
|
|
'116.412,39.921',
|
|||
|
|
'116.410,39.923',
|
|||
|
|
'116.406,39.923',
|
|||
|
|
'116.404,39.921'
|
|||
|
|
],
|
|||
|
|
lineWidth: 5,
|
|||
|
|
strokeColor: '#FF0000',
|
|||
|
|
fillColor: '#00ffff',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
onReady() {},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
didShowMyLocation: false,
|
|||
|
|
didShowTraffic: false,
|
|||
|
|
didShowMyLocationBtn: false,
|
|||
|
|
didShowZoomBtn: true,
|
|||
|
|
didShowCompassBtn: false,
|
|||
|
|
enableZoomGesture: true,
|
|||
|
|
enableScrollGesture: true,
|
|||
|
|
enableTiltGesture: true,
|
|||
|
|
enableRotateGesture: true,
|
|||
|
|
didShowScaleSize: true,
|
|||
|
|
switchToLanguage: '英'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
ditujietuhuidiao(res) {
|
|||
|
|
console.log(`截图回调:${JSON.stringify(res)}`);
|
|||
|
|
let resObj = JSON.parse(res.detail)
|
|||
|
|
let imagePath = `${resObj.path}`
|
|||
|
|
let toastString =
|
|||
|
|
`截图路径:${imagePath}\n截图是否完整:${resObj.hasGrid == false}`; //hasGrid 是否有网格参考 https://lbs.amap.com/api/ios-sdk/guide/interaction-with-map/map-screenshot
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: toastString,
|
|||
|
|
showCancel: true,
|
|||
|
|
confirmText: '查看',
|
|||
|
|
success(click) {
|
|||
|
|
if (click.confirm) {
|
|||
|
|
if (uni.getSystemInfoSync().platform == 'android') {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/common/imagePreview?src=file://${imagePath}`
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: [imagePath]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
ditujietu() {
|
|||
|
|
console.log('ditujietu');
|
|||
|
|
this.$refs.amap.mapScreenshot()
|
|||
|
|
},
|
|||
|
|
mapBeiDianJiLe(args) {
|
|||
|
|
console.log(`地图被点击了:${args.detail}`)
|
|||
|
|
},
|
|||
|
|
shijiaoKaishiBianhua(args) {
|
|||
|
|
console.log(`视角开始变化:${args.detail}`)
|
|||
|
|
},
|
|||
|
|
shijiaoJieshuBianhua(args) {
|
|||
|
|
console.log(`视角结束变化:${args.detail}`)
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
zhongyingwen() {
|
|||
|
|
let params = {
|
|||
|
|
switchToLanguage: this.switchToLanguage //入参可选：中/英
|
|||
|
|
}
|
|||
|
|
this.$refs.amap.changeLanguage(JSON.stringify(params))
|
|||
|
|
|
|||
|
|
if (this.switchToLanguage == '英') {
|
|||
|
|
this.switchToLanguage = '中'
|
|||
|
|
} else {
|
|||
|
|
this.switchToLanguage = '英'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
pinghuayidong() {
|
|||
|
|
this.$refs.amap.zoomTo(JSON.stringify({
|
|||
|
|
zoomLevel: 13
|
|||
|
|
}))
|
|||
|
|
let testPoints = [
|
|||
|
|
'116.37,39.91',
|
|||
|
|
'116.380298, 39.907771',
|
|||
|
|
'116.38, 39.90',
|
|||
|
|
'116.385298, 39.907771',
|
|||
|
|
'116.40, 39.90',
|
|||
|
|
'116.40772, 39.909252',
|
|||
|
|
'116.41, 39.89',
|
|||
|
|
'116.423857, 39.889498',
|
|||
|
|
'116.422312, 39.899639',
|
|||
|
|
'116.425273, 39.902273'
|
|||
|
|
]
|
|||
|
|
//画一条线，方便观察移动轨迹
|
|||
|
|
let polylinexxx = {
|
|||
|
|
id: 'polylinexxx', //折线的唯一id，不能重复
|
|||
|
|
points: testPoints,
|
|||
|
|
width: 10,
|
|||
|
|
isDottedLine: false,
|
|||
|
|
color: '#ff0000',
|
|||
|
|
}
|
|||
|
|
this.$refs.amap.drawPolyline(JSON.stringify(polylinexxx))
|
|||
|
|
|
|||
|
|
// 开始添加一个平滑移动的marker
|
|||
|
|
let options = {
|
|||
|
|
points: testPoints,
|
|||
|
|
icon: 'https://s21.ax1x.com/2024/03/13/pFcsHVP.png', //目前只支持网络图片，免费生成网络图片的地址 imgse.com
|
|||
|
|
duration: 10, //单位 秒
|
|||
|
|
id: 'animate111', // 用来做删除和多次平滑移动，如果要实现多次移动同一个marker，多次调用addMoveAnimation时传相同id即可
|
|||
|
|
removeMarkerWhenFinish: true, //动画结束后是否需要移除
|
|||
|
|
iconWidth: 75,
|
|||
|
|
iconHeight: 75,
|
|||
|
|
anchor: 'center' //可选项： center 图片中间对准经纬度(常用于表示车辆行驶在路上)，bottomCenter 图片底部中间对准经纬度(常用于扎针标记位置)，默认值center
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$refs.amap.addMoveAnimation(JSON.stringify(options))
|
|||
|
|
},
|
|||
|
|
qiehuantuceng() {
|
|||
|
|
const options = [{
|
|||
|
|
title: '导航',
|
|||
|
|
type: 'navi'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '卫星',
|
|||
|
|
type: 'satellite'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '普通(默认)',
|
|||
|
|
type: 'normal'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '夜景',
|
|||
|
|
type: 'night'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '导航夜景',
|
|||
|
|
type: 'navinight'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '公交',
|
|||
|
|
type: 'bus'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
title: '切换图层',
|
|||
|
|
itemList: options.map(item => `${item.type}`),
|
|||
|
|
success: (res) => {
|
|||
|
|
let params = {
|
|||
|
|
mapType: options[res.tapIndex].type
|
|||
|
|
}
|
|||
|
|
this.$refs.amap.setMapType(JSON.stringify(params))
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
suofangbaohanmarkers() {
|
|||
|
|
console.log('缩放地图以包含给定的多个marker，并且设置边界空白')
|
|||
|
|
let params = {
|
|||
|
|
markers: _markers,
|
|||
|
|
paddingTop: 50, // 单位，像素
|
|||
|
|
paddingBottom: 50,
|
|||
|
|
paddingLeft: 50,
|
|||
|
|
paddingRight: 50,
|
|||
|
|
animated: true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$refs.amap.setVisibleIncludeMarkers(JSON.stringify(params))
|
|||
|
|
},
|
|||
|
|
markerBeiDianJiLe(markInfo) {
|
|||
|
|
console.log(`demo收到添加的marker被点击了:${markInfo.detail}`)
|
|||
|
|
},
|
|||
|
|
huayuanxing() {
|
|||
|
|
this.$refs.amap.drawCircle(JSON.stringify(circle))
|
|||
|
|
},
|
|||
|
|
shanchuyuanxing() {
|
|||
|
|
this.$refs.amap.removeCircle(JSON.stringify(circle))
|
|||
|
|
},
|
|||
|
|
shanchusuoyouyuanxing() {
|
|||
|
|
this.$refs.amap.removeAllCircles()
|
|||
|
|
},
|
|||
|
|
huaduobianxing() {
|
|||
|
|
this.$refs.amap.drawPolygon(JSON.stringify(polygon))
|
|||
|
|
},
|
|||
|
|
shanchuduobianxing() {
|
|||
|
|
this.$refs.amap.removePolygon(JSON.stringify(polygon))
|
|||
|
|
},
|
|||
|
|
shanchusuoyouduobianxing() {
|
|||
|
|
this.$refs.amap.removeAllPolygons()
|
|||
|
|
},
|
|||
|
|
shanchusuoyouzhexian() {
|
|||
|
|
this.$refs.amap.removeAllPolylines()
|
|||
|
|
},
|
|||
|
|
shanchuzhexian() {
|
|||
|
|
this.$refs.amap.removePolyline(JSON.stringify(polyline))
|
|||
|
|
},
|
|||
|
|
huazhexian() {
|
|||
|
|
this.$refs.amap.drawPolyline(JSON.stringify(polyline))
|
|||
|
|
},
|
|||
|
|
shezhisuofangfanwei() {
|
|||
|
|
let zoomLevel = {
|
|||
|
|
min: 10,
|
|||
|
|
max: 15
|
|||
|
|
}
|
|||
|
|
this.$refs.amap.setMinAndZoomLevel(JSON.stringify(zoomLevel))
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '设置了缩放范围是10-15',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
shanchusuoyoumarker() {
|
|||
|
|
this.$refs.amap.removeAllMarkers()
|
|||
|
|
},
|
|||
|
|
shanchumarker() {
|
|||
|
|
this.$refs.amap.removeSomeMarkers(JSON.stringify(_markers))
|
|||
|
|
},
|
|||
|
|
tianjiamarker() {
|
|||
|
|
this.$refs.amap.addMarkers(JSON.stringify(_markers))
|
|||
|
|
},
|
|||
|
|
suofangditu() {
|
|||
|
|
let zoomOptions = [0, 5, 10, 14, 17, 21]
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
title: '设置缩放级别(0到21都行)',
|
|||
|
|
itemList: zoomOptions.map(item => item + '级'),
|
|||
|
|
success: (res) => {
|
|||
|
|
let param = {
|
|||
|
|
zoomLevel: zoomOptions[res.tapIndex]
|
|||
|
|
}
|
|||
|
|
let paramString = JSON.stringify(param)
|
|||
|
|
this.$refs.amap.zoomTo(paramString)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
movedituzhongxindian() {
|
|||
|
|
const options = [{
|
|||
|
|
title: '北京天安门',
|
|||
|
|
lat: 39.909187,
|
|||
|
|
lng: 116.397455,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '上海迪士尼',
|
|||
|
|
lat: 31.231706,
|
|||
|
|
lng: 121.67269,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '敦煌莫高窟',
|
|||
|
|
lat: 40.037403,
|
|||
|
|
lng: 94.805872,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '广州塔',
|
|||
|
|
lat: 23.129163,
|
|||
|
|
lng: 113.26444,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '布达拉宫',
|
|||
|
|
lat: 29.654471,
|
|||
|
|
lng: 91.118463,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
title: '选择一个中心点',
|
|||
|
|
itemList: options.map(item => `${item.title}:${item.lat},${item.lng}`),
|
|||
|
|
success: (res) => {
|
|||
|
|
let param = {
|
|||
|
|
lng: options[res.tapIndex].lng,
|
|||
|
|
lat: options[res.tapIndex].lat,
|
|||
|
|
animate: false
|
|||
|
|
}
|
|||
|
|
let paramString = JSON.stringify(param)
|
|||
|
|
this.$refs.amap.moveTo(paramString)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
showbilichi() {
|
|||
|
|
this.$refs.amap.showScaleSize(!this.didShowScaleSize)
|
|||
|
|
this.didShowScaleSize = !this.didShowScaleSize
|
|||
|
|
},
|
|||
|
|
enabletuozhuaishoushi() {
|
|||
|
|
this.$refs.amap.enableScrollGesture(!this.enableScrollGesture)
|
|||
|
|
this.enableScrollGesture = !this.enableScrollGesture
|
|||
|
|
},
|
|||
|
|
enableqingxieshoushi() {
|
|||
|
|
this.$refs.amap.enableTiltGesture(!this.enableTiltGesture)
|
|||
|
|
this.enableTiltGesture = !this.enableTiltGesture
|
|||
|
|
},
|
|||
|
|
enablexuanzhuanshoushi() {
|
|||
|
|
this.$refs.amap.enableRotateGesture(!this.enableRotateGesture)
|
|||
|
|
this.enableRotateGesture = !this.enableRotateGesture
|
|||
|
|
},
|
|||
|
|
enablesuofangshoushi() {
|
|||
|
|
this.$refs.amap.enableZoomGesture(!this.enableZoomGesture)
|
|||
|
|
this.enableZoomGesture = !this.enableZoomGesture
|
|||
|
|
},
|
|||
|
|
showzhinanzhenanniu() {
|
|||
|
|
this.$refs.amap.showCompassBtn(!this.didShowCompassBtn)
|
|||
|
|
this.didShowCompassBtn = !this.didShowCompassBtn
|
|||
|
|
},
|
|||
|
|
showsuofanganniu() {
|
|||
|
|
this.$refs.amap.showZoomBtn(!this.didShowZoomBtn)
|
|||
|
|
this.didShowZoomBtn = !this.didShowZoomBtn
|
|||
|
|
},
|
|||
|
|
jianchadingweiquanxian() {
|
|||
|
|
checkAndRequestLocationPermission((res) => {
|
|||
|
|
console.log(`请求权限结果:${JSON.stringify(res)}`)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `请求权限结果:${res.msg}`,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
showzijiweizhi() {
|
|||
|
|
let params = {
|
|||
|
|
show: !this.didShowMyLocation, //是否展示自身位置
|
|||
|
|
updatingMapCenter: false //是否根据自身位置移动地图
|
|||
|
|
}
|
|||
|
|
this.$refs.amap.showMyLocation(JSON.stringify(params))
|
|||
|
|
this.didShowMyLocation = !this.didShowMyLocation
|
|||
|
|
},
|
|||
|
|
showlukuangxinxi() {
|
|||
|
|
this.$refs.amap.showTraffic(!this.didShowTraffic)
|
|||
|
|
this.didShowTraffic = !this.didShowTraffic
|
|||
|
|
},
|
|||
|
|
showguiweianniu() {
|
|||
|
|
this.$refs.amap.showMyLocationBtn(!this.didShowMyLocationBtn)
|
|||
|
|
this.didShowMyLocationBtn = !this.didShowMyLocationBtn
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.map-container {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 550rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: 750rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 550rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controlbtn {
|
|||
|
|
width: 120px;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
margin-top: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.options {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
width: 750rpx;
|
|||
|
|
padding-top: 10rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|