摘要：項目已放到上在線預覽效果截圖添加點圖標經緯度圖標和后臺獲取之后的點定位點的經緯度獲取數據點擊之后圖標和報修圖標配置信息跳轉鏈接循環添加多個點圖標定位點的經緯度獲取的數據圖標的和點擊之后圖標和，報修圖標配置百度地圖創建

項目已放到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)
  }
}