基礎設定
// 配置地圖初始參數
setMapOptions() {
let mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
gestureHandling: 'greedy', // 地圖上的手勢
mapTypeControl: false, // Map類型控件
mapTypeControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
clickableIcons: false, // 地圖圖示不可點選
streetViewControl: false, // 街景街景小人物
fullscreenControl: false, // 全屏控件
panControl: false, // 平移控件--沒效果
panControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
zoomControl: true, // 地圖縮放級别
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
return mapOptions
},
// 建立中心點
centerZoom(map, point, zoom) {
map.setCenter(point)
map.setZoom(zoom)
},
// 擷取點坐标
createPoint(lng, lat) {
// lat:緯度，lng:經度
return new google.maps.LatLng(lat, lng) // 順序和其它地圖api的不一樣
},
// 切換城市
toggleCity(args) {
const {map, cityName, zoom} = {...args}
let geocoder = new google.maps.Geocoder()
geocoder.geocode({
'address': cityName
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
let point = results[0].geometry.location
// results數組裡有很多有用的資訊，包括坐标和傳回的标準位置資訊
map.setCenter(point)
map.setZoom(zoom)
} else {
console.warn('Address resolution error!!!')
}
})
},
資訊窗
// 建立資訊窗
createInfoWindow() {
let infoWindow = new google.maps.InfoWindow({
pixelOffset: new google.maps.Size(0, -40),
maxWidth: 345,
disableAutoPan: true // 打開時禁用自動平移
})
return infoWindow
},
// 打開資訊窗
openInfoWindow(map, infoWd, point) {
infoWd.setPosition(point)
infoWd.open(map)
},
// 關閉資訊窗
closeInfoWindow(map, infoWd) {
infoWd && infoWd.close()
},
覆寫物
// 建立實時路況圖層
createTraffic() {
return new google.maps.TrafficLayer()
},
// 加載markerwithlabel檔案
getMarkerWithLabel(googleMaps) {
// 在npm上查詢到markerwithlabel
MarkerWithLabel = require('./js/markerwithlabel')(googleMaps)
},
// 建立marker
createMarker(args) {
const { point, iconPath, isLabelMarker = false } = {...args}
let marker
// 預設是沒有label的marker，如需要有lable的marker配置傳入的參數isLabelMarker為true即可
if (isLabelMarker) {
marker = new MarkerWithLabel({
position: point,
icon: iconPath,
raiseOnDrag: true,
labelContent: '', // label的内容
labelAnchor: new google.maps.Point(-25, 32),
labelClass: 'google-labels', // the CSS class for the label
labelStyle: {
'color': '#666',
'background-color': '#fff'
},
labelInBackground: false
})
// 給marker添加靜态方法，用于設定label的内容、樣式
marker.setText = function (labelTxt) {
marker.labelContent = labelTxt
}
marker.setStyle = function (styleOpts) {
marker.labelStyle = {...marker.labelStyle, ...styleOpts}
}
} else {
marker = new google.maps.Marker({
icon: iconPath,
position: point
})
}
return marker
},
圓形/矩形/多邊形/折線
// 繪制圓
createCircle(point, radius) {
let circle = new google.maps.Circle({
center: point, // 圓心位置
radius: radius, // 半徑
fillColor: '#1989fa', // 圓形填充顔色
strokeWeight: 2, // 圓形邊線的寬度
strokeColor: '#1989fa', // 圓形邊線顔色
fillOpacity: 0.3 // 圓形填充的透明度
// strokeOpacity: 0.3 // 圓形邊線的透明度
})
return circle
},
// 繪制矩形
createRectangle(pointObj) {
let rectangle = new google.maps.Rectangle({
bounds: pointObj,
editable: false // 設定是否可編輯
})
return rectangle
},
// 繪制多邊形
createPolygon(pointArr) {
let polygon = new google.maps.Polygon({
path: pointArr,
fillColor: '#1989fa', // 圓形填充顔色
strokeWeight: 2, // 圓形邊線的寬度
strokeColor: '#1989fa', // 圓形邊線顔色
fillOpacity: 0.3 // 圓形填充的透明度
})
return polygon
},
// 繪制折線
createPolyline(pointArr) {
let polyline = new google.maps.Polyline({
path: pointArr,
geodesic: true,
strokeColor: '#B89AE5',
strokeWeight: 4,
strokeOpacity: 1
})
return polyline
},
滑鼠繪制工具
drawingManager(map) {
// https://developers.google.com/maps/documentation/javascript/drawinglayer
let styleOptions = {
strokeColor: '#1989fa', // 邊線顔色。
fillColor: '#6130CA', // 填充顔色。當參數為空時，圓形将沒有填充效果。
strokeWeight: 2, // 邊線的寬度，以像素為機關。
// strokeOpacity: 0.8, // 邊線透明度，取值範圍0 - 1。
fillOpacity: 0.2, // 填充的透明度，取值範圍0 - 1。
strokeStyle: 'solid', // 邊線的樣式，solid或dashed。
clickable: false, // 是否可點選
editable: false // 是否可編輯
}
let drawingManager = new google.maps.drawing.DrawingManager({
map: map,
// drawingMode: google.maps.drawing.OverlayType.MARKER, // 繪制模式 CIRCLE MARKER POLYGON POLYLINE RECTANGLE
drawingControl: false, // 繪圖控件的啟用
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
},
rectangleOptions: styleOptions, // 矩形的樣式
circleOptions: styleOptions, // 圓形的樣式
polygonOptions: styleOptions, // 多邊形的樣式
polylineOptions: styleOptions // 線的樣式
})
return drawingManager
}
計算類
// 判斷點是否在可視區域内
pointInVisibleArea(map, point) {
let flag = false
let gpsamap = point
let bs = map.getBounds() // 擷取可視區域
let bssw = bs.getSouthWest() // 可視區域左下角
let bsne = bs.getNorthEast() // 可視區域右上角
let gpsamap_lon = gpsamap.lng()
let gpsamap_lat = gpsamap.lat()
if ((bssw.lng() <= gpsamap_lon && gpsamap_lon <= bsne.lng()) && (bssw.lat() <= gpsamap_lat && gpsamap_lat <= bsne.lat())) {
flag = true
}
return flag
},
// 擷取兩點之間的距離
getDistance(startPoint, endPoint) {
return google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)
},
// 擷取多邊形的面積
getComputeArea (pointArr) {
return google.maps.geometry.spherical.computeArea(pointArr)
},
// 根據坐标點自動縮放
setViewArea(map, bounds) {
map.fitBounds(bounds)
},
處理谷歌地圖marker旋轉
/*
* 功能：使用canvas旋轉圖示，并生成路徑
* 參數：options（Object）
* 用途：處理谷歌地圖marker旋轉
* */
const setRotation = (options) => {
return new Promise((resolve, reject) => {
let w = options.width || 40
let h = options.height || 40
let canvas = document.createElement('canvas')
canvas.width = w
canvas.height = h
let ctx = canvas.getContext('2d')
let angle = options.deg ? options.deg * Math.PI / 180 : 0
let centerX = w / 2
let centerY = h / 2
let dataURL = ''
let img = new Image()
img.src = options.url
img.onload = function() {
ctx.clearRect(0, 0, w, h)
ctx.save()
ctx.translate(centerX, centerY)
ctx.rotate(angle)
ctx.translate(-centerX, -centerY)
ctx.drawImage(img, centerX/2, 0)
ctx.restore()
dataURL = canvas.toDataURL('image/png')
resolve({
size: options.size,
origin: options.origin,
url: dataURL
})
}
})
}
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)