<template>
<view class="index">
<map
id="map"
ref="map"
:style="'width: 100%; height:' + height"
:latitude="latitude"
:longitude="longitude"
:markers="covers"
:circles="circles"
:show-location="true"
:scale="scale"
:max-scale="18"
:show-scale="true"
@markertap="markertap"
@callouttap="callouttap"
@regionchange="regionchange"
@controltap="controltap"
>
</map>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
title: 'map',
latitude: 39.909,
longitude: 116.39742,
scale: 16,
mapContext: '',
covers: [
{
id: 1,
latitude: 39.909,
longitude: 116.39742,
iconPath: '../../static/map.png',
width: 30,
height: 30,
data: {
name: '雨奇科技',
list: 'wawaw',
},
customCallout: {
display: 'BYCLICK',
anchorY: 0,
anchorX: 0,
},
},
{
id: 2,
latitude: 39.9,
longitude: 116.39,
iconPath: '../../static/map.png',
width: 30,
height: 30,
data: {
name: '峰值时刻',
list: 'dadada',
},
customCallout: {
display: 'BYCLICK',
anchorY: 0,
anchorX: 0,
},
},
],
// 地图控件
controls: [
{
id: 1,
iconPath: '../../static/map.png',
position: {
top: 700,
},
clickable: true,
},
],
// 显示圆配置
circles: [
{
//在地图上显示圆
latitude: 139,
longitude: 35,
fillColor: '#D9E6EF', //填充颜色
color: '#A7B6CB', //描边的颜色
radius: 50000, //半径
strokeWidth: 2, //描边的宽度
},
],
}
},
props: {
height: {
type: String,
default: '100vh',
},
},
onShow() {},
mounted() {
this.getLocation()
//获取map上下文
this.mapContext = uni.createMapContext('map', this)
// 缩放视野展示所有经纬度 [上,右,下,左]
this.mapContext.includePoints({
padding: [150, 150, 150, 150], // 设置地图边缘与 marker 的间距
})
},
methods: {
getLocation() {
uni.getLocation({
type: 'gcj02',
success:
this.circles.push({
//在地图上显示圆
latitude: res.latitude,
longitude: res.longitude,
fillColor: '#D9E6EF', //填充颜色
color: '#A7B6CB', //描边的颜色
radius: 50000, //半径
strokeWidth: 2, //描边的宽度
})
this.covers[0].latitude = res.latitude
this.covers[0].longitude = res.longitude
this.latitude = res.latitude
this.longitude = res.longitude
this.renderMarkers()
this.scale = 16
this.mapContext.getScale({
success: () => {
this.$nextTick(() => {
this.scale = 16
})
},
})
},
})
},
// 点击标记点
markertap(e) {
console.log(e, '点击标记点')
const filteredData = this.covers.filter((item) => item.id === e.detail.markerId)[0]
this.latitude = filteredData.latitude
this.longitude = filteredData.longitude
this.mapContext.moveToLocation({
latitude: this.latitude,
longitude: this.longitude,
})
},
// 获取当前地图中心的经纬度
getCenterLocation() {
this.mapContext.getCenterLocation({
success: (res) => {
this.circles.splice(0, 1, {
//在地图上显示圆
latitude: res.latitude,
longitude: res.longitude,
fillColor: '#D9E6EF', //填充颜色
color: '#A7B6CB', //描边的颜色
radius: 50000, //半径
strokeWidth: 2, //描边的宽度
})
this.covers[0].latitude = res.latitude
this.covers[0].longitude = res.longitude
this.renderMarkers()
},
})
},
// 移动地图
regionchange(e) {
// 缩放级别
if (e.causedBy != 'drag') {
this.mapContext.getScale({
success: (res) => {
this.scale = res.scale
},
})
}
if (e.type === 'end' && e.causedBy === 'drag') {
this.getCenterLocation() // 地图移动时获取中心点的经纬度
//在安卓中是 end 事件
} else if (e.type === 'regionchange' && e.causedBy != 'drag') {
// 在ios中是 regionchange
this.getCenterLocation()
}
},
//重新渲染 markers
renderMarkers() {
this.mapContext.addMarkers({
markers: this.covers,
clear: true,
})
},
// 点击控件
controltap(e) {
const id = e.detail.controlId
if (id === 1) {
this.getLocation()
}
},
},
}
</script>
<style>
</style>
1 个回复
前端熊二 (作者)