项目已放到github上
在线预览
结果截图
import BaiduMap from '@/assets/scripts/map'
import Vue from 'vue'
import router from '@/router'
var map = null
var addfixCtrl = null
var addSearchCtrl = null
var addinfoCtrl = null
const initMap = (obj) => {
if(!obj.ak) return
let ak = obj.ak,
icon = obj.icon,
locationIcon = obj.locationIcon,
apiurl = obj.apiUrl,
clickIcon = obj.clickIcon,
locationControl = obj.locationControl,
repairControl = obj.repairControl,
searchRouter = obj.searchRouter,
infoRouter = obj.infoRouter,
mapZIndex = obj.mapZIndex BaiduMap.init(ak).then((BMap) => {
map = new BMap.Map('allmap')
map.centerAndZoom(new BMap.Point(116.404, 39.915), mapZIndex);
let geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), mapZIndex)
let mk = new BMap.Marker(r.point)
map.panTo(r.point)
iconMap(r.point, locationIcon)
getPoint(apiurl, r.point, icon, clickIcon, repairControl, infoRouter)
getSearchControl(searchRouter, r.point, r.address.city)
} else {
console.log('failed' + this.getStatus())
}
}, {enableHighAccuracy: true})
getAddGeolocationControl(locationControl, mapZIndex)
// getinfoControl()
map.addEventListener("click", cloceInfo)
})
}//增加点图标
/*
* @param：pt - object 经纬度
* @param: icons - object 图标url和size
* //背景猎取以后的点
* @param: points - object 定位点的经纬度
* @param: markers - object ajax猎取数据
* @param: clickIcon - object 点击以后图标url和size,
* @param: repairControl -object 报修图标设置
* @param: infoRouter - string 信息跳转链接
* */
const iconMap = (pt, icons, points, markers, clickIcon, repairControl, infoRouter) => {
if(typeof pt !== 'object') return
let point = new BMap.Point(pt.lng, pt.lat)
let myIcon = new BMap.Icon(icons.url, new BMap.Size(icons.size.width, icons.size.height), {imageSize: new BMap.Size(icons.size.width, icons.size.height)})
let marker = new BMap.Marker(point, {icon: myIcon})
marker.disableMassClear() map.addOverlay(marker)
if (points && markers) {
marker.addEventListener('click', function (e) {
getWalking(points, pt, clickIcon, markers, infoRouter)
if(addfixCtrl) {
map.removeControl(addfixCtrl)
}
if(addinfoCtrl) {
map.removeControl(addinfoCtrl)
}
getinfoControl(markers, infoRouter)
getAddFixControl(repairControl, markers.eId)
})
}
}//轮回增加多个点图标
/*
* @param: point - object 定位点的经纬度
* @param: markers - object ajax猎取的数据
* @param: icon - object 图标的url和size
* @param: clickIcon - object 点击以后图标url和size，
* @param: repairControl -object 报修图标设置
* */
const multiMaker = (point, markers, icon, clickIcon, repairControl, infoRouter) => {
if(!(markers instanceof Array)) return
for (let i = 0, max = markers.length; i < max; i++) {
let pt = {}
pt.lng = markers[i].longitude
pt.lat = markers[i].latitude
iconMap(pt, icon, point, markers[i], clickIcon, repairControl, infoRouter)
}
console.log('百度舆图建立胜利......')
}//ajax猎取背景数据
/*
* @param: apiUrl - string 链接
* @param: pt - object 定位点的经纬度
* @param: icon - object 图标url和size
* @param: clickIcon - object 点击以后图标url和size，
* @param: repairControl -object 报修图标设置
* */
const getPoint = (apiurl, pt, icon, clickIcon, repairControl, infoRouter) => {
if(apiurl === '' && typeof apiurl !== 'string') return
Vue.http({
url: apiurl,
method: 'POST',
params: {
longitude: pt.lng,
latitude: pt.lat
}
}).then((response) => {
if (response.body.result && response.body.locationsList.length) {
let markers = response.body.locationsList
multiMaker(pt, markers, icon, clickIcon, repairControl, infoRouter)
}
})
}//猎取步行计划线路
/*
* @param: start-object 定位点的经纬度（及出发点）
* @param: end -object 点击图标的经纬度（及尽头）
* @param: clickIcon- object 点击以后图标url和size
* @param: markars - object ajax猎取数据
* @param: infoRouter - string 信息跳转链接
* */
const getWalking = (start, end, clickIcon, markers, infoRouter) => {
if(typeof start !== 'object' && typeof end !== 'object') return
let startPoint = new BMap.Point(start.lng, start.lat)
let endPoint = new BMap.Point(end.lng, end.lat)
let walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, autoViewport: true}});
walking.search(startPoint, endPoint)
//修正线路的款式
walking.setSearchCompleteCallback((e) => {
map.clearOverlays()
let pts = walking.getResults().getPlan(0).getRoute(0).getPath()
map.addOverlay(new BMap.Polyline(pts, { strokeColor: '#0CBB8D', strokeWeight: 5, strokeOpacity: 1 }))
}) //修正起尽头的图标
walking.setMarkersSetCallback((e) => {
map.removeOverlay(e[0].marker)
map.removeOverlay(e[e.length - 1].marker)
let point = new BMap.Point(end.lng, end.lat)
let endIcon = new BMap.Icon(clickIcon.url, new BMap.Size(clickIcon.size.width, clickIcon.size.height), {imageSize: new BMap.Size(clickIcon.size.width, clickIcon.size.height)})
let endmarker = new BMap.Marker(point, {icon: endIcon})
endmarker.setZIndex(1)
map.addOverlay(endmarker)
endmarker.addEventListener('click', function (e) {
if(addinfoCtrl) {
map.removeControl(addinfoCtrl)
}
getinfoControl(markers, infoRouter)
})
}) walking.setPolylinesSetCallback( (e) => {
let polyline = e[0]
})
}
//增加定位控件
const getAddGeolocationControl = (locationControl, mapZIndex) => {
if(typeof locationControl !== 'object') return
let offsetVal = locationControl.offset
let iconVal = locationControl.icon
function addGeolocationControl () {
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT
this.defaultOffset = new BMap.Size(offsetVal.horizontal, offsetVal.direction)
}
addGeolocationControl.prototype = new BMap.Control()
addGeolocationControl.prototype.initialize = function(map){
let div = document.createElement('div')
div.style.cursor = 'pointer'
div.style.width = iconVal.size.width + 'px'
div.style.height = iconVal.size.height + 'px'
div.style.borderRadius = '50%'
div.style.background = 'url(' + iconVal.url + ')'
div.style.backgroundSize = '100% 100%' div.onclick = function(e){
let geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), mapZIndex)
let mk = new BMap.Marker(r.point)
map.panTo(r.point)
} else {
console.log('failed'+this.getStatus())
}
}, {enableHighAccuracy: true})
}
map.getContainer().appendChild(div)
return div;
}
// 建立控件
var addGeolocationCtrl = new addGeolocationControl()
// 增加到舆图当中
map.addControl(addGeolocationCtrl)
}//增加报修自定义控件
const getAddFixControl = (repairControl, eId) => {
if(typeof repairControl !== 'object') return
let offsetVal = repairControl.offset
let iconVal = repairControl.icon
let routerUrl = repairControl.routerUrl
function AddFixControl () {
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT
this.defaultOffset = new BMap.Size(offsetVal.horizontal, offsetVal.direction)
}
AddFixControl.prototype = new BMap.Control()
AddFixControl.prototype.initialize = function (map) {
let div = document.createElement('div')
div.style.cursor = 'pointer'
div.style.width = iconVal.size.width + 'px'
div.style.height = iconVal.size.height + 'px'
div.style.borderRadius = '50%'
div.style.background = 'url(' + iconVal.url + ')'
div.style.backgroundSize = '100% 100%'div.onclick = function (e) {
router.push({name: routerUrl, params: {eId: eId}})
}
map.getContainer().appendChild(div)
return div
}
// 建立控件
addfixCtrl = new AddFixControl()
// 增加到舆图当中
map.addControl(addfixCtrl)
}
//增加搜刮自定义控件
const getSearchControl = (searchRouter, pt, city) => {
if(typeof searchRouter !== 'string') return
let routerUrl = searchRouter
function addSearchControl () {
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT
this.defaultOffset = new BMap.Size(0, 10)
}
addSearchControl.prototype = new BMap.Control() addSearchControl.prototype.initialize = function (map) {
let div = document.createElement('div')
div.appendChild(document.createElement('span'))
div.appendChild(document.createTextNode('地区查找体检站'))
div.className = 'seach-control'
div.style.cursor = 'pointer'
div.style.zIndex = '31'
div.onclick = function (e) {
router.push({name: routerUrl, params: {lng: pt.lng, lat: pt.lat, city: city}})
}
map.getContainer().appendChild(div)
return div
}
// 建立控件
addSearchCtrl = new addSearchControl()
// 增加到舆图当中
map.addControl(addSearchCtrl)
}//增加信息自定义控件
const getinfoControl = (markers, infoRouter) => {
if(typeof markers !== 'object') return
let titleName = markers.eName
let distanceVal = markers.distance
function addinfoControl () {
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT
this.defaultOffset = new BMap.Size(0, 8)
}
addinfoControl.prototype = new BMap.Control()
addinfoControl.prototype.initialize = function(map){
let div = document.createElement('div')
let Img = document.createElement('img')
let Imgwrap = document.createElement('div')
let wrap = document.createElement('div')
let title = document.createElement('p')
let info = document.createElement('div')
let locationIcon = document.createElement('i')
let locatText = document.createElement('span')
let icon = document.createElement('i')
div.appendChild(Imgwrap)Imgwrap.appendChild(Img)
div.appendChild(wrap)
div.appendChild(icon)
wrap.appendChild(title)
wrap.appendChild(info)
info.appendChild(locationIcon)
info.appendChild(locatText)
div.id = 'infoControl'
div.className = 'info-control'
div.style.cursor = 'pointer'
div.style.zIndex = '31'
wrap.className = 'wrap-info'
Imgwrap.className = 'info-img'
info.className = 'info-div'
locationIcon.className = 'location-icon'
icon.className = 'icon-arrow'
title.innerHTML = titleName
locatText.innerHTML = '间隔' + distanceVal + 'km'
Img.src = require('../images/common/baseList.png')
div.onclick = function (e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true
router.push({name: infoRouter, params: {eId: markers.eId}})
}map.getContainer().appendChild(div)
return div
}
// 建立控件
addinfoCtrl = new addinfoControl()
// 增加到舆图当中
map.addControl(addinfoCtrl)
}
//点击舆图封闭信息窗口
const cloceInfo = (e) => {
if(!e) return
if(!(e.overlay instanceof BMap.Marker) && addinfoCtrl) {
map.removeControl(addinfoCtrl)
}
}
export default {
init (obj) {
if(typeof obj !== 'object') return
initMap(obj)
}
}