Skip to content

U
uni-app

yangkaifeng / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 3
Star 1
Fork 0
U
uni-app

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 c94eddf3 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat(H5 map): 支持高德地圖

上级 70eeb8fb
隐藏空白更改
内联 并排
Showing with 426 addition and 131 deletion
src/platforms/h5/helpers/location.js
浏览文件 @ c94eddf3
......@@ -6,21 +6,33 @@ export const ICON_PATH_TARGET =
export const MapType = {
QQ: 'qq',
GOOGLE: 'google',
AMAP: 'AMap',
UNKNOWN: ''
}
export function getMapInfo () {
let type = MapType.UNKNOWN
let key = ''
if (__uniConfig.qqMapKey) {
type = MapType.QQ
key = __uniConfig.qqMapKey
} else if (__uniConfig.googleMapKey) {
type = MapType.GOOGLE
key = __uniConfig.googleMapKey
return {
type: MapType.QQ,
key: __uniConfig.qqMapKey
}
}
if (__uniConfig.googleMapKey) {
return {
type: MapType.GOOGLE,
key: __uniConfig.googleMapKey
}
}
if (__uniConfig.sdkConfigs.maps.AMap && __uniConfig.sdkConfigs.maps.AMap.key) {
return {
type: MapType.AMAP,
key: __uniConfig.sdkConfigs.maps.AMap.key,
securityJsCode: __uniConfig.sdkConfigs.maps.AMap.securityJsCode,
serviceHost: __uniConfig.sdkConfigs.maps.AMap.serviceHost
}
}
return {
type,
key
type: MapType.UNKNOWN,
key: ''
}
}
src/platforms/h5/view/components/map/index.vue
浏览文件 @ c94eddf3
<template>
<uni-map
:id="id"
ref="mapContainer"
v-on="$listeners"
@touchend="handleAMapClick"
>
<map-marker
v-for="item in markers"
......@@ -46,7 +48,20 @@ import {
import mapMarker from './map-marker'
import mapPolygon from './map-polygon'
import { ICON_PATH_ORIGIN } from '../../../helpers/location'
import { ICON_PATH_ORIGIN, MapType, getMapInfo } from '../../../helpers/location'
const mapInfo = getMapInfo()
const ISAMAP = mapInfo.type === MapType.AMAP
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 ISAMAP ? getAMapPosition(maps, latitude, longitude) : getGoogleQQMapPosition(maps, latitude, longitude)
}
function getLat (latLng) {
if ('getLat' in latLng) {
......@@ -201,6 +216,9 @@ export default {
},
mounted () {
loadMaps(this.libraries, result => {
// 兼容高德地图
result.event = result.event || result.Event
result.Point = result.Point || result.BuryPoint
this._maps = result
this.init()
})
......@@ -212,6 +230,13 @@ export default {
this.removeLocation()
},
methods: {
handleAMapClick (e) {
if (ISAMAP) {
const { pageX, pageY } = e.changedTouches[0]
this.$trigger('click', { x: pageX, y: pageY }, {})
this.$trigger('tap', { x: pageX, y: pageY }, {})
}
},
_handleSubscribe ({
type,
data = {}
......@@ -247,10 +272,14 @@ export default {
case 'moveToLocation':
{
const { latitude, longitude } = data
var locationPosition = (latitude && longitude) ? new maps.LatLng(latitude, longitude) : this._locationPosition
const locationPosition = (latitude && longitude) ? getMapPosition(maps, latitude, longitude) : this._locationPosition
if (locationPosition) {
this._map.setCenter(locationPosition)
callback({})
callback({
latitude,
longitude
})
}
}
break
......@@ -267,7 +296,7 @@ export default {
rotation = marker.getRotation()
}
var a = marker.getPosition()
var b = new maps.LatLng(destination.latitude, destination.longitude)
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
......@@ -325,20 +354,26 @@ export default {
this.fitBounds(data.points)
break
case 'getRegion':
this.boundsReady(() => {
var latLngBounds = this._map.getBounds()
var southwest = latLngBounds.getSouthWest()
var northeast = latLngBounds.getNorthEast()
callback({
southwest: {
latitude: getLat(southwest),
longitude: getLng(southwest)
},
northeast: {
latitude: getLat(northeast),
longitude: getLng(northeast)
}
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 (ISAMAP) {
this.isBoundsReady = true
this.$emit('boundsready')
}
})
break
case 'getScale':
......@@ -352,7 +387,7 @@ export default {
},
init () {
const maps = this._maps
var center = new maps.LatLng(this.center.latitude, this.center.longitude)
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),
......@@ -442,7 +477,8 @@ export default {
this.center.longitude = longitude
if (this._map) {
this.mapReady(() => {
this._map.setCenter(new maps.LatLng(latitude, longitude))
const centerPosition = getMapPosition(maps, latitude, longitude)
this._map.setCenter(centerPosition)
})
}
}
......@@ -453,10 +489,13 @@ export default {
var polyline = this.polylineSync
this.removePolyline()
this.polyline.forEach(option => {
var path = []
const path = []
option.points.forEach(point => {
path.push(new maps.LatLng(point.latitude, point.longitude))
const pointPosition = ISAMAP ? [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)
......@@ -464,14 +503,23 @@ export default {
map,
clickable: false,
path,
strokeWeight: option.width + borderWidth,
strokeWeight: ((Number(option.width) || 0) + borderWidth) || 6,
strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
}
if (ISAMAP) {
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,
strokeWeight: option.width || 6,
strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
}
if ('Color' in maps) {
......@@ -486,7 +534,11 @@ export default {
if (borderWidth) {
polyline.push(new maps.Polyline(polylineBorderOptions))
}
polyline.push(new maps.Polyline(polylineOptions))
const _polyline = new maps.Polyline(polylineOptions)
if (ISAMAP) {
map.add(_polyline)
}
polyline.push(_polyline)
})
},
removePolyline () {
......@@ -498,12 +550,11 @@ export default {
},
createCircles () {
const maps = this._maps
var map = this._map
var circles = this.circlesSync
const map = this._map
const circles = this.circlesSync
this.removeCircles()
this.circles.forEach(option => {
var center = new maps.LatLng(option.latitude, option.longitude)
const center = ISAMAP ? [option.longitude, option.latitude] : getGoogleQQMapPosition(maps, option.latitude, option.longitude)
const circleOptions = {
map,
center,
......@@ -512,18 +563,30 @@ export default {
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)
if (ISAMAP) {
circleOptions.strokeColor = option.color
circleOptions.fillColor = option.fillColor || '#000'
} else {
circleOptions.fillColor = `rgb(${fr}, ${fg}, ${fb})`
circleOptions.fillOpacity = fa
circleOptions.strokeColor = `rgb(${sr}, ${sg}, ${sb})`
circleOptions.strokeOpacity = sa
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 (ISAMAP) {
map.add(circle)
}
var circle = new maps.Circle(circleOptions)
circles.push(circle)
})
},
......@@ -549,6 +612,8 @@ export default {
style.position = 'absolute'
style.width = 0
style.height = 0
style.top = 0
style.left = 0
img.onload = () => {
if (option.position.width) {
img.width = option.position.width
......@@ -569,8 +634,13 @@ export default {
controlId: option.id
})
}
$event.stopPropagation()
}
if (ISAMAP) {
this.$refs.mapContainer.appendChild(control)
} else {
map.controls[maps.ControlPosition.TOP_LEFT].push(control)
}
map.controls[maps.ControlPosition.TOP_LEFT].push(control)
controls.push(control)
})
},
......@@ -583,8 +653,8 @@ export default {
},
createLocation () {
const maps = this._maps
var map = this._map
var location = this._location
const map = this._map
let location = this._location
if (location) {
this.removeLocation()
}
......@@ -594,14 +664,30 @@ export default {
if (location !== this._location) {
return
}
var position = new maps.LatLng(res.latitude, res.longitude)
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
})
const position = getMapPosition(maps, res.latitude, res.longitude)
if (ISAMAP) {
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) {
......@@ -623,7 +709,7 @@ export default {
uni.getLocation({
type: 'gcj02',
success: (res) => {
var locationPosition = self._locationPosition = new maps.LatLng(res.latitude, res.longitude)
const locationPosition = self._locationPosition = getMapPosition(maps, res.latitude, res.longitude)
location.setPosition(locationPosition)
},
fail: e => {
......@@ -648,20 +734,35 @@ export default {
fitBounds (points, cb) {
const maps = this._maps
this.boundsReady(() => {
var map = this._map
var bounds = new maps.LatLngBounds()
const map = this._map
if (ISAMAP) {
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)
}
points.forEach(point => {
var longitude = point.longitude
var latitude = point.latitude
var latLng = new maps.LatLng(latitude, longitude)
bounds.extend(latLng)
})
map.fitBounds(bounds)
if (typeof cb === 'function') {
cb()
}
})
if (ISAMAP) {
this.isBoundsReady = true
this.$emit('boundsready')
}
},
mapReady (cb) {
if (this.isMapReady) {
......@@ -703,4 +804,16 @@ export default {
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>
src/platforms/h5/view/components/map/map-marker.js
浏览文件 @ c94eddf3
import {
MapType,
getMapInfo
} from '../../../helpers/location'
import getRealPath from 'uni-platform/helpers/get-real-path'
const mapInfo = getMapInfo()
const ISAMAP = mapInfo.type === MapType.AMAP
export default {
props: {
id: {
......@@ -97,26 +104,34 @@ export default {
this.updateMarker(props)
maps.event.addListener(marker, 'click', (e) => {
const callout = marker.callout
if (callout) {
const div = callout.div
const parent = div.parentNode
if (!callout.alwaysVisible) {
if (callout && !callout.alwaysVisible) {
if (ISAMAP) {
callout.visible = !callout.visible
if (callout.visible) {
marker.callout.createAMapText()
} else {
marker.callout.removeAMapText()
}
} else {
callout.set('visible', !callout.visible)
}
if (callout.visible) {
parent.removeChild(div)
parent.appendChild(div)
if (callout.visible) {
const div = callout.div
const parent = div.parentNode
parent.removeChild(div)
parent.appendChild(div)
}
}
}
if (this.idString) {
const { latitude, longitude } = this.getMarkerLatitudeLongitude(e)
this.$parent.$trigger('markertap', {}, {
markerId: Number(this.idString),
latitude: typeof e.latLng.lat === 'function' ? e.latLng.lat() : e.latLng.lat,
longitude: typeof e.latLng.lat === 'function' ? e.latLng.lng() : e.latLng.lng
latitude,
longitude
})
}
const event = e.event || e.domEvent
const event = e.event || e.domEvent || e.originEvent
event.stopPropagation()
})
},
......@@ -125,7 +140,7 @@ export default {
const maps = this._maps
const marker = this._marker
const title = option.title
const position = new maps.LatLng(option.latitude, option.longitude)
const position = ISAMAP ? new maps.LngLat(option.longitude, option.latitude) : new maps.LatLng(option.latitude, option.longitude)
const img = new Image()
img.onload = () => {
const anchor = option.anchor || {}
......@@ -143,6 +158,7 @@ export default {
}
const top = h - (h - y * h)
if ('MarkerImage' in maps) {
// 腾讯 & google
icon = new maps.MarkerImage(
img.src,
null,
......@@ -150,6 +166,14 @@ export default {
new maps.Point(x * w, y * h),
new maps.Size(w, h)
)
} else if ('Icon' in maps) {
// 高德
icon = new maps.Icon({
image: img.src,
size: new maps.Size(w, h),
imageSize: new maps.Size(w, h),
imageOffset: new maps.Pixel(x * w, y * h)
})
} else {
icon = {
url: img.src,
......@@ -182,8 +206,9 @@ export default {
marginTop: (Number(labelOpt.anchorY || labelOpt.y) || 0) + 'px'
}
if ('Label' in maps) {
// 腾讯
label = new maps.Label({
position: position,
position,
map: map,
clickable: false,
content: labelOpt.content,
......@@ -191,13 +216,36 @@ export default {
})
marker.label = label
} else if ('setLabel' in marker) {
const className = this.updateMarkerLabelStyle(this.idString, labelStyle)
marker.setLabel({
text: labelOpt.content,
color: labelStyle.color,
fontSize: labelStyle.fontSize,
className
})
// 高德
if (ISAMAP) {
const content =
`<div style="
margin-left:${labelStyle.marginLeft};
margin-top:${labelStyle.marginTop};
padding:${labelStyle.padding};
background-color:${labelStyle.backgroundColor};
border-radius:${labelStyle.borderRadius};
line-height:${labelStyle.lineHeight};
color:${labelStyle.color};
font-size:${labelStyle.fontSize};
">
${labelOpt.content}
<div>`
marker.setLabel({
content,
direction: 'bottom-right'
})
} else {
// google
const className = this.updateMarkerLabelStyle(this.idString, labelStyle)
marker.setLabel({
text: labelOpt.content,
color: labelStyle.color,
fontSize: labelStyle.fontSize,
className
})
}
}
}
const calloutOpt = option.callout || {}
......@@ -210,6 +258,8 @@ export default {
position,
map,
top,
// handle AMap callout offset
offsetY: -option.height / 2,
content: calloutOpt.content,
color: calloutOpt.color,
fontSize: calloutOpt.fontSize,
......@@ -223,26 +273,38 @@ export default {
position,
map,
top,
offsetY: -option.height / 2,
content: title,
boxShadow: boxShadow
}
if (callout) {
callout.setOption(calloutStyle)
} else {
callout = marker.callout = new maps.Callout(calloutStyle)
callout.div.onclick = ($event) => {
if (this.idString) {
this.$parent.$trigger('callouttap', $event, {
markerId: Number(this.idString)
})
if (ISAMAP) {
const callback = (self) => {
if (self.idString) {
self.$parent.$trigger('callouttap', {}, {
markerId: Number(self.idString)
})
}
}
callout = marker.callout = new maps.Callout(calloutStyle, callback, this)
} else {
callout = marker.callout = new maps.Callout(calloutStyle)
callout.div.onclick = ($event) => {
if (this.idString) {
this.$parent.$trigger('callouttap', $event, {
markerId: Number(this.idString)
})
}
$event.stopPropagation()
$event.preventDefault()
}
$event.stopPropagation()
$event.preventDefault()
}
}
} else {
if (callout) {
callout.setMap(null)
this.removeMarkerCallout(marker.callout)
delete marker.callout
}
}
......@@ -276,6 +338,22 @@ export default {
styleEl.innerText = `.${className}{${div.getAttribute('style')}}`
return className
},
getMarkerLatitudeLongitude (e) {
let latitude
let longitude
if (ISAMAP) {
latitude = e.lnglat.lat
longitude = e.lnglat.lng
} else if (mapInfo.type === MapType.QQ) {
latitude = e.latLng.lat
longitude = e.latLng.lng
} else if (mapInfo.type === MapType.GOOGLE) {
latitude = e.latLng.lat()
longitude = e.latLng.lng()
}
return { latitude, longitude }
},
removeMarker () {
const marker = this._marker
if (marker) {
......@@ -283,12 +361,19 @@ export default {
marker.label.setMap(null)
}
if (marker.callout) {
marker.callout.setMap(null)
this.removeMarkerCallout(marker.callout)
}
marker.setMap(null)
}
delete this.$parent._markers[this.idString]
this._marker = null
},
removeMarkerCallout (callout) {
if (ISAMAP) {
callout.removeAMapText()
} else {
callout.setMap(null)
}
}
},
render () {
......
src/platforms/h5/view/components/map/maps/callout.js
浏览文件 @ c94eddf3
import {
MapType,
getMapInfo
} from '../../../../helpers/location'
const mapInfo = getMapInfo()
const ISAMAP = mapInfo.type === MapType.AMAP
export function createCallout (maps) {
const overlay = new (maps.OverlayView || maps.Overlay)()
function onAdd () {
const div = this.div
const panes = this.getPanes()
......@@ -12,6 +18,38 @@ export function createCallout (maps) {
}
}
function createAMapText () {
const option = this.option
this.Text = new maps.Text({
text: option.content,
anchor: 'bottom-center', // 设置文本标记锚点
offset: new maps.Pixel(0, option.offsetY),
style: {
'margin-bottom': '1rem',
padding: (option.padding || 8) + 'px',
'line-height': (option.fontSize || 14) + 'px',
'border-radius': (option.borderRadius || 0) + 'px',
'border-color': `${option.bgColor || '#fff'} transparent transparent`,
'background-color': option.bgColor || '#fff',
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': (option.fontSize || 14) + 'px',
color: option.color || '#000'
},
position: option.position
})
maps.event.addListener(this.Text, 'click', () => {
this.callback(this.parent)
})
this.Text.setMap(option.map)
}
function removeAMapText () {
this.option.map.remove(this.Text)
}
class Callout {
option
position
......@@ -20,6 +58,9 @@ export function createCallout (maps) {
alwaysVisible
div
triangle
callback
parent
Text
set onclick (callback) {
this.div.onclick = callback
......@@ -29,43 +70,61 @@ export function createCallout (maps) {
return this.div.onclick
}
constructor (option = {}) {
constructor (option = {}, callback, parent) {
this.option = option || {}
const map = option.map
this.position = option.position
this.index = 1
const visible = (this.visible = this.alwaysVisible = option.display === 'ALWAYS')
const div = (this.div = document.createElement('div'))
const divStyle = div.style
divStyle.position = 'absolute'
divStyle.whiteSpace = 'nowrap'
divStyle.transform = 'translateX(-50%) translateY(-100%)'
divStyle.zIndex = '1'
divStyle.boxShadow = option.boxShadow || 'none'
divStyle.display = visible ? 'block' : 'none'
const triangle = (this.triangle = document.createElement('div'))
triangle.setAttribute(
'style',
'position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;'
)
this.setStyle(option)
div.appendChild(triangle)
if (map) {
this.setMap(map)
this.visible = this.alwaysVisible = option.display === 'ALWAYS'
if (ISAMAP) {
this.callback = callback
this.parent = parent
if (this.visible) {
this.createAMapText()
}
} else {
const map = option.map
this.position = option.position
this.index = 1
const div = (this.div = document.createElement('div'))
const divStyle = div.style
divStyle.position = 'absolute'
divStyle.whiteSpace = 'nowrap'
divStyle.transform = 'translateX(-50%) translateY(-100%)'
divStyle.zIndex = '1'
divStyle.boxShadow = option.boxShadow || 'none'
divStyle.display = this.visible ? 'block' : 'none'
const triangle = (this.triangle = document.createElement('div'))
triangle.setAttribute(
'style',
'position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;'
)
this.setStyle(option)
div.appendChild(triangle)
if (map) {
this.setMap(map)
}
}
}
createAMapText = createAMapText
removeAMapText = removeAMapText
onAdd = onAdd
construct = onAdd
setOption (option) {
this.option = option
this.setPosition(option.position)
if (option.display === 'ALWAYS') {
this.alwaysVisible = this.visible = true
} else {
this.alwaysVisible = false
}
this.setStyle(option)
if (ISAMAP) {
if (this.visible) {
this.removeAMapText()
this.createAMapText()
}
} else {
this.setPosition(option.position)
this.setStyle(option)
}
}
setStyle (option) {
......@@ -107,11 +166,15 @@ export function createCallout (maps) {
destroy = onRemove
}
const prototype = Callout.prototype
for (const key in overlay) {
if (!(key in prototype)) {
prototype[key] = overlay[key]
if (!ISAMAP) {
const prototype = Callout.prototype
const overlay = new (maps.OverlayView || maps.Overlay)()
for (const key in overlay) {
if (!(key in prototype)) {
prototype[key] = overlay[key]
}
}
}
return Callout
}
src/platforms/h5/view/components/map/maps/index.js
浏览文件 @ c94eddf3
......@@ -10,6 +10,7 @@ const GOOGLE_MAP_CALLBACKNAME = '__map_callback__'
export function loadMaps (libraries, callback) {
const mapInfo = getMapInfo()
const ISAMAP = mapInfo.type === MapType.AMAP
if (!mapInfo.key) {
console.error('Map key not configured.')
return
......@@ -21,7 +22,7 @@ export function loadMaps (libraries, callback) {
window[mapInfo.type] &&
window[mapInfo.type].maps
) {
maps = window[mapInfo.type].maps
maps = ISAMAP ? window[mapInfo.type] : window[mapInfo.type].maps
maps.Callout = maps.Callout || createCallout(maps)
callback(maps)
} else if (callbacks.length) {
......@@ -32,20 +33,24 @@ export function loadMaps (libraries, callback) {
const callbackName = GOOGLE_MAP_CALLBACKNAME + mapInfo.type
globalExt[callbackName] = function () {
delete globalExt[callbackName]
maps = window[mapInfo.type].maps
maps = ISAMAP ? window[mapInfo.type] : window[mapInfo.type].maps
maps.Callout = createCallout(maps)
callbacks.forEach((callback) => callback(maps))
callbacks.length = 0
}
const script = document.createElement('script')
let src =
mapInfo.type === MapType.GOOGLE ? 'https://maps.googleapis.com/maps/api/js?' : 'https://map.qq.com/api/js?v=2.exp&'
let src = getScriptBaseUrl(mapInfo.type)
if (mapInfo.type === MapType.QQ) {
libraries.push('geometry')
}
if (libraries.length) {
src += `libraries=${libraries.join('%2C')}&`
}
if (ISAMAP) {
handleAMapSecurityPolicy(mapInfo)
}
script.src = `${src}key=${mapInfo.key}&callback=${callbackName}`
script.onerror = function () {
console.error('Map load failed.')
......@@ -53,3 +58,20 @@ export function loadMaps (libraries, callback) {
document.body.appendChild(script)
}
}
function getScriptBaseUrl (mapType) {
const urlMap = {
qq: 'https://map.qq.com/api/js?v=2.exp&',
google: 'https://maps.googleapis.com/maps/api/js?',
AMap: 'https://webapi.amap.com/maps?v=2.0&'
}
return urlMap[mapType]
}
function handleAMapSecurityPolicy (mapInfo) {
window._AMapSecurityConfig = {
securityJsCode: mapInfo.securityJsCode || '',
serviceHost: mapInfo.serviceHost || ''
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或