<template>
|
<uni-map
|
:id="id"
|
ref="mapContainer"
|
v-on="$listeners"
|
>
|
<map-marker
|
v-for="item in markers"
|
:key="item.id"
|
v-bind="item"
|
/>
|
<map-control
|
v-for="(item, index) in controls"
|
:key="item.id || index"
|
v-bind="item"
|
/>
|
<map-polygon
|
v-for="item in polygons"
|
:key="JSON.stringify(item.points)"
|
v-bind="item"
|
/>
|
<div
|
ref="map"
|
style="width: 100%; height: 100%; position: relative; overflow: hidden"
|
@click.stop
|
/>
|
<div
|
style="
|
position: absolute;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
pointer-events: none;
|
"
|
>
|
<slot />
|
</div>
|
</uni-map>
|
</template>
|
|
<script>
|
import {
|
subscriber
|
} from 'uni-mixins'
|
|
import { hexToRgba } from 'uni-shared'
|
|
import {
|
loadMaps
|
} from './maps'
|
|
import mapMarker from './map-marker'
|
import mapControl from './map-control'
|
import mapPolygon from './map-polygon'
|
|
import { ICON_PATH_ORIGIN, IS_AMAP } from '../../../helpers/location'
|
|
function getAMapPosition (maps, latitude, longitude) {
|
return new maps.LngLat(longitude, latitude)
|
}
|
function getGoogleQQMapPosition (maps, latitude, longitude) {
|
return new maps.LatLng(latitude, longitude)
|
}
|
function getMapPosition (maps, latitude, longitude) {
|
return IS_AMAP ? getAMapPosition(maps, latitude, longitude) : getGoogleQQMapPosition(maps, latitude, longitude)
|
}
|
|
function getLat (latLng) {
|
if ('getLat' in latLng) {
|
return latLng.getLat()
|
} else {
|
return latLng.lat()
|
}
|
}
|
|
function getLng (latLng) {
|
if ('getLng' in latLng) {
|
return latLng.getLng()
|
} else {
|
return latLng.lng()
|
}
|
}
|
|
export default {
|
name: 'Map',
|
components: {
|
mapMarker,
|
mapControl,
|
mapPolygon
|
},
|
mixins: [subscriber],
|
props: {
|
id: {
|
type: String,
|
default: ''
|
},
|
latitude: {
|
type: [String, Number],
|
default: 39.92
|
},
|
longitude: {
|
type: [String, Number],
|
default: 116.46
|
},
|
scale: {
|
type: [String, Number],
|
default: 16
|
},
|
markers: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
covers: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
includePoints: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
polyline: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
circles: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
controls: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
showLocation: {
|
type: [Boolean, String],
|
default: false
|
},
|
libraries: {
|
type: Array,
|
default () {
|
return []
|
}
|
},
|
polygons: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data () {
|
return {
|
center: {
|
latitude: 116.46,
|
longitude: 116.46
|
},
|
isMapReady: false,
|
isBoundsReady: false,
|
polylineSync: [],
|
circlesSync: []
|
}
|
},
|
watch: {
|
latitude () {
|
this.centerChange()
|
},
|
longitude () {
|
this.centerChange()
|
},
|
scale (val) {
|
this.mapReady(() => {
|
this._map.setZoom(Number(val) || 16)
|
})
|
},
|
polyline (val) {
|
this.mapReady(() => {
|
this.createPolyline()
|
})
|
},
|
circles () {
|
this.mapReady(() => {
|
this.createCircles()
|
})
|
},
|
includePoints () {
|
this.mapReady(() => {
|
this.fitBounds(this.includePoints)
|
})
|
},
|
showLocation (val) {
|
this.mapReady(() => {
|
this[val ? 'createLocation' : 'removeLocation']()
|
})
|
}
|
},
|
created () {
|
this._markers = {}
|
var latitude = this.latitude
|
var longitude = this.longitude
|
if (latitude && longitude) {
|
this.center.latitude = latitude
|
this.center.longitude = longitude
|
}
|
},
|
mounted () {
|
loadMaps(this.libraries, result => {
|
// 兼容高德地图
|
result.event = result.event || result.Event
|
result.Point = result.Point || result.BuryPoint
|
this._maps = result
|
this.init()
|
})
|
},
|
beforeDestroy () {
|
this.removePolyline()
|
this.removeCircles()
|
this.removeLocation()
|
},
|
methods: {
|
_handleSubscribe ({
|
type,
|
data = {}
|
}) {
|
const maps = this._maps
|
function callback (res, err) {
|
res = res || {}
|
res.errMsg = `${type}:${err ? 'fail' + err : 'ok'}`
|
var cb = err ? data.fail : data.success
|
if (typeof cb === 'function') {
|
cb(res)
|
}
|
if (typeof data.complete === 'function') {
|
data.complete(res)
|
}
|
}
|
|
switch (type) {
|
case 'getCenterLocation':
|
this.mapReady(() => {
|
var latitude
|
var longitude
|
var center = this._map.getCenter()
|
latitude = getLat(center)
|
longitude = getLng(center)
|
|
callback({
|
latitude: latitude,
|
longitude: longitude
|
})
|
})
|
break
|
case 'moveToLocation':
|
{
|
const { latitude, longitude } = data
|
const locationPosition = (latitude && longitude) ? getMapPosition(maps, latitude, longitude) : this._locationPosition
|
|
if (locationPosition) {
|
this._map.setCenter(locationPosition)
|
callback({
|
latitude,
|
longitude
|
})
|
}
|
}
|
break
|
case 'translateMarker':
|
this.mapReady(() => {
|
try {
|
var marker = this.getMarker(data.markerId)
|
var destination = data.destination
|
var duration = data.duration
|
var autoRotate = !!data.autoRotate
|
var rotate = Number(data.rotate) ? data.rotate : 0
|
let rotation = 0
|
if ('getRotation' in marker) {
|
rotation = marker.getRotation()
|
}
|
var a = marker.getPosition()
|
const b = getMapPosition(maps, destination.latitude, destination.longitude)
|
var distance = maps.geometry.spherical.computeDistanceBetween(a, b) / 1000
|
var time = ((typeof duration === 'number') ? duration : 1000) / (1000 * 60 * 60)
|
var speed = distance / time
|
var movingEvent = maps.event.addListener(marker, 'moving', e => {
|
var latLng = e.latLng
|
var label = marker.label
|
if (label) {
|
label.setPosition(latLng)
|
}
|
var callout = marker.callout
|
if (callout) {
|
callout.setPosition(latLng)
|
}
|
})
|
var event = maps.event.addListener(marker, 'moveend', e => {
|
event.remove()
|
movingEvent.remove()
|
marker.lastPosition = a
|
marker.setPosition(b)
|
var label = marker.label
|
if (label) {
|
label.setPosition(b)
|
}
|
var callout = marker.callout
|
if (callout) {
|
callout.setPosition(b)
|
}
|
var cb = data.animationEnd
|
if (typeof cb === 'function') {
|
cb()
|
}
|
})
|
var lastRtate = 0
|
if (autoRotate) {
|
if (marker.lastPosition) {
|
lastRtate = maps.geometry.spherical.computeHeading(marker.lastPosition, a)
|
}
|
rotate = maps.geometry.spherical.computeHeading(a, b) - lastRtate
|
}
|
if ('setRotation' in marker) {
|
marker.setRotation(rotation + rotate)
|
}
|
if ('moveTo' in marker) {
|
marker.moveTo(b, speed)
|
} else {
|
marker.setPosition(b)
|
maps.event.trigger(marker, 'moveend', {})
|
}
|
} catch (error) {
|
callback(null, error)
|
}
|
})
|
break
|
case 'includePoints':
|
this.fitBounds(data.points)
|
break
|
case 'getRegion':
|
this.mapReady(() => {
|
this.boundsReady(() => {
|
const latLngBounds = this._map.getBounds()
|
const southwest = latLngBounds.getSouthWest()
|
const northeast = latLngBounds.getNorthEast()
|
callback({
|
southwest: {
|
latitude: getLat(southwest),
|
longitude: getLng(southwest)
|
},
|
northeast: {
|
latitude: getLat(northeast),
|
longitude: getLng(northeast)
|
}
|
})
|
})
|
if (IS_AMAP) {
|
this.isBoundsReady = true
|
this.$emit('boundsready')
|
}
|
})
|
break
|
case 'getScale':
|
this.mapReady(() => {
|
callback({
|
scale: this._map.getZoom()
|
})
|
})
|
break
|
}
|
},
|
init () {
|
const maps = this._maps
|
const center = getMapPosition(maps, this.center.latitude, this.center.longitude)
|
var map = this._map = new maps.Map(this.$refs.map, {
|
center,
|
zoom: Number(this.scale),
|
// scrollwheel: false,
|
disableDoubleClickZoom: true,
|
mapTypeControl: false,
|
zoomControl: false,
|
scaleControl: false,
|
panControl: false,
|
fullscreenControl: false,
|
streetViewControl: false,
|
keyboardShortcuts: false,
|
minZoom: 5,
|
maxZoom: 18,
|
draggable: true
|
})
|
var boundsChangedEvent = maps.event.addListener(map, 'bounds_changed', e => {
|
boundsChangedEvent.remove()
|
this.isBoundsReady = true
|
this.$emit('boundsready')
|
})
|
maps.event.addListener(map, 'click', (e) => {
|
this.$trigger('click', {}, {})
|
})
|
maps.event.addListener(map, 'dragstart', () => {
|
this.$trigger('regionchange', {}, {
|
type: 'begin',
|
causedBy: 'gesture'
|
})
|
})
|
function getMapInfo () {
|
var center = map.getCenter()
|
return {
|
scale: map.getZoom(),
|
centerLocation: {
|
latitude: getLat(center),
|
longitude: getLng(center)
|
}
|
}
|
}
|
maps.event.addListener(map, 'dragend', () => {
|
this.$trigger('regionchange', {}, Object.assign({
|
type: 'end',
|
causedBy: 'drag'
|
}, getMapInfo()))
|
})
|
|
const zoomChangedCallback = () => {
|
this.$emit('update:scale', map.getZoom())
|
this.$trigger('regionchange', {}, Object.assign({
|
type: 'end',
|
causedBy: 'scale'
|
}, getMapInfo()))
|
}
|
// QQ or Google
|
maps.event.addListener(map, 'zoom_changed', zoomChangedCallback)
|
// AMAP
|
maps.event.addListener(map, 'zoomend', zoomChangedCallback)
|
|
maps.event.addListener(map, 'center_changed', () => {
|
var latitude
|
var longitude
|
var center = map.getCenter()
|
latitude = getLat(center)
|
longitude = getLng(center)
|
this.$emit('update:latitude', latitude)
|
this.$emit('update:longitude', longitude)
|
})
|
if (this.polyline && Array.isArray(this.polyline) && this.polyline.length) {
|
this.createPolyline()
|
}
|
if (this.circles && Array.isArray(this.circles) && this.circles.length) {
|
this.createCircles()
|
}
|
if (this.showLocation) {
|
this.createLocation()
|
}
|
if (this.includePoints && Array.isArray(this.includePoints) && this.includePoints.length) {
|
this.fitBounds(this.includePoints, () => {
|
map.setCenter(center)
|
})
|
}
|
this.isMapReady = true
|
this.$emit('mapready')
|
this.$trigger('updated', {}, {})
|
},
|
centerChange () {
|
const maps = this._maps
|
var latitude = Number(this.latitude)
|
var longitude = Number(this.longitude)
|
if (latitude !== this.center.latitude || longitude !== this.center.longitude) {
|
this.center.latitude = latitude
|
this.center.longitude = longitude
|
if (this._map) {
|
this.mapReady(() => {
|
const centerPosition = getMapPosition(maps, latitude, longitude)
|
this._map.setCenter(centerPosition)
|
})
|
}
|
}
|
},
|
createPolyline () {
|
const maps = this._maps
|
var map = this._map
|
var polyline = this.polylineSync
|
this.removePolyline()
|
this.polyline.forEach(option => {
|
const path = []
|
|
option.points.forEach(point => {
|
const pointPosition = IS_AMAP ? [point.longitude, point.latitude] : getGoogleQQMapPosition(maps, point.latitude, point.longitude)
|
path.push(pointPosition)
|
})
|
|
const borderWidth = Number(option.borderWidth) || 0
|
const { r: sr, g: sg, b: sb, a: sa } = hexToRgba(option.color)
|
const { r: br, g: bg, b: bb, a: ba } = hexToRgba(option.borderColor)
|
const polylineOptions = {
|
map,
|
clickable: false,
|
path,
|
strokeWeight: ((Number(option.width) || 0) + borderWidth) || 6,
|
strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
|
}
|
|
if (IS_AMAP) {
|
polylineOptions.strokeColor = option.strokeColor
|
polylineOptions.strokeStyle = option.dottedLine ? 'dashed' : 'solid'
|
polylineOptions.isOutline = !!option.borderWidth
|
polylineOptions.borderWeight = option.borderWidth
|
polylineOptions.outlineColor = option.borderColor
|
}
|
|
const polylineBorderOptions = {
|
map,
|
clickable: false,
|
path,
|
strokeWeight: option.width || 6,
|
strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
|
}
|
if ('Color' in maps) {
|
polylineOptions.strokeColor = new maps.Color(sr, sg, sb, sa)
|
polylineBorderOptions.strokeColor = new maps.Color(br, bg, bb, ba)
|
} else {
|
polylineOptions.strokeColor = `rgb(${sr}, ${sg}, ${sb})`
|
polylineOptions.strokeOpacity = sa
|
polylineBorderOptions.strokeColor = `rgb(${br}, ${bg}, ${bb})`
|
polylineBorderOptions.strokeOpacity = ba
|
}
|
if (borderWidth) {
|
polyline.push(new maps.Polyline(polylineBorderOptions))
|
}
|
const _polyline = new maps.Polyline(polylineOptions)
|
if (IS_AMAP) {
|
map.add(_polyline)
|
}
|
polyline.push(_polyline)
|
})
|
},
|
removePolyline () {
|
var polyline = this.polylineSync
|
polyline.forEach(line => {
|
line.setMap(null)
|
})
|
polyline.splice(0, polyline.length)
|
},
|
createCircles () {
|
const maps = this._maps
|
const map = this._map
|
const circles = this.circlesSync
|
this.removeCircles()
|
this.circles.forEach(option => {
|
const center = IS_AMAP ? [option.longitude, option.latitude] : getGoogleQQMapPosition(maps, option.latitude, option.longitude)
|
const circleOptions = {
|
map,
|
center,
|
clickable: false,
|
radius: option.radius,
|
strokeWeight: Number(option.strokeWidth) || 1,
|
strokeDashStyle: 'solid'
|
}
|
|
const { r: fr, g: fg, b: fb, a: fa } = hexToRgba(option.fillColor || '#00000000')
|
const { r: sr, g: sg, b: sb, a: sa } = hexToRgba(option.color || '#000000')
|
if ('Color' in maps) {
|
// 腾讯
|
circleOptions.fillColor = new maps.Color(fr, fg, fb, fa)
|
circleOptions.strokeColor = new maps.Color(sr, sg, sb, sa)
|
} else {
|
// Google & 高德
|
circleOptions.fillColor = `rgb(${fr}, ${fg}, ${fb})`
|
circleOptions.fillOpacity = fa
|
circleOptions.strokeColor = `rgb(${sr}, ${sg}, ${sb})`
|
circleOptions.strokeOpacity = sa
|
}
|
|
const circle = new maps.Circle(circleOptions)
|
if (IS_AMAP) {
|
map.add(circle)
|
}
|
circles.push(circle)
|
})
|
},
|
removeCircles () {
|
var circles = this.circlesSync
|
circles.forEach(circle => {
|
circle.setMap(null)
|
})
|
circles.splice(0, circles.length)
|
},
|
createLocation () {
|
const maps = this._maps
|
const map = this._map
|
let location = this._location
|
if (location) {
|
this.removeLocation()
|
}
|
uni.getLocation({
|
type: 'gcj02',
|
success: (res) => {
|
if (location !== this._location) {
|
return
|
}
|
const position = getMapPosition(maps, res.latitude, res.longitude)
|
if (IS_AMAP) {
|
location = new maps.Marker({
|
position,
|
map,
|
flat: true,
|
rotation: 0
|
})
|
const icon = new maps.Icon({
|
size: new maps.Size(44, 44),
|
image: ICON_PATH_ORIGIN,
|
imageSize: new maps.Size(44, 44)
|
})
|
location.setIcon(icon)
|
map.add(location)
|
} else {
|
location = new maps.Marker({
|
position,
|
map,
|
icon: new maps.MarkerImage(ICON_PATH_ORIGIN, null, null, new maps.Point(22, 22), new maps.Size(44, 44)),
|
flat: true,
|
rotation: 0
|
})
|
}
|
this._location = location
|
refreshLocation()
|
this.__onCompassChange = function (res) {
|
if ('setRotation' in location) {
|
location.setRotation(res.direction)
|
}
|
}
|
uni.onCompassChange(this.__onCompassChange)
|
},
|
fail: e => {
|
console.error(e)
|
}
|
})
|
var self = this
|
|
function refreshLocation () {
|
if (location !== self._location) {
|
return
|
}
|
setTimeout(() => {
|
uni.getLocation({
|
type: 'gcj02',
|
success: (res) => {
|
const locationPosition = self._locationPosition = getMapPosition(maps, res.latitude, res.longitude)
|
location.setPosition(locationPosition)
|
},
|
fail: e => {
|
console.error(e)
|
},
|
complete: () => {
|
refreshLocation()
|
}
|
})
|
}, 30000)
|
}
|
},
|
removeLocation () {
|
var location = this._location
|
if (location) {
|
location.setMap(null)
|
this._location = null
|
this._locationPosition = null
|
uni.offCompassChange(this.__onCompassChange)
|
}
|
},
|
fitBounds (points, cb) {
|
const maps = this._maps
|
this.boundsReady(() => {
|
const map = this._map
|
|
if (IS_AMAP) {
|
const _points = []
|
points.forEach(point => {
|
_points.push([point.longitude, point.latitude])
|
})
|
const bounds = new maps.Bounds(..._points)
|
map.setBounds(bounds)
|
} else {
|
const bounds = new maps.LatLngBounds()
|
points.forEach(point => {
|
const longitude = point.longitude
|
const latitude = point.latitude
|
const latLng = getGoogleQQMapPosition(maps, latitude, longitude)
|
bounds.extend(latLng)
|
})
|
map.fitBounds(bounds)
|
}
|
|
if (typeof cb === 'function') {
|
cb()
|
}
|
})
|
|
if (IS_AMAP) {
|
this.isBoundsReady = true
|
this.$emit('boundsready')
|
}
|
},
|
mapReady (cb) {
|
if (this.isMapReady) {
|
cb()
|
} else {
|
this.$once('mapready', () => {
|
cb()
|
})
|
}
|
},
|
boundsReady (cb) {
|
if (this.isBoundsReady) {
|
cb()
|
} else {
|
this.$once('boundsready', () => {
|
cb()
|
})
|
}
|
},
|
getMarker (id) {
|
var marker = this._markers[id]
|
if (!marker) {
|
throw new Error('translateMarker: fail cannot find marker with id ' + id)
|
}
|
return marker
|
}
|
}
|
}
|
</script>
|
|
<style>
|
uni-map {
|
position: relative;
|
width: 300px;
|
height: 150px;
|
display: block;
|
}
|
|
uni-map[hidden] {
|
display: none;
|
}
|
|
/* 处理高德地图 marker label 默认样式 */
|
.amap-marker-label{
|
padding:0;
|
border:none;
|
background-color: transparent;
|
}
|
/* 处理高德地图 open-location icon 被遮挡问题 */
|
.amap-marker>.amap-icon>img{
|
left:0!important;
|
top:0!important;
|
}
|
</style>
|
