百度地圖使用

jay_tian 發(fā)布于2019-08-22 15:01 / 986人閱讀

摘要：項(xiàng)目已放到上在線預(yù)覽效果截圖添加點(diǎn)圖標(biāo)經(jīng)緯度圖標(biāo)和后臺(tái)獲取之后的點(diǎn)定位點(diǎn)的經(jīng)緯度獲取數(shù)據(jù)點(diǎn)擊之后圖標(biāo)和報(bào)修圖標(biāo)配置信息跳轉(zhuǎn)鏈接循環(huán)添加多個(gè)點(diǎn)圖標(biāo)定位點(diǎn)的經(jīng)緯度獲取的數(shù)據(jù)圖標(biāo)的和點(diǎn)擊之后圖標(biāo)和，報(bào)修圖標(biāo)配置百度地圖創(chuàng)建

項(xiàng)目已放到github上

在線預(yù)覽

效果截圖

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)
  })
}

//添加點(diǎn)圖標(biāo)
  /*
  * @param：pt - object 經(jīng)緯度
  * @param: icons - object 圖標(biāo)url和size
  * //后臺(tái)獲取之后的點(diǎn)
  * @param: points - object 定位點(diǎn)的經(jīng)緯度
  * @param: markers - object ajax獲取數(shù)據(jù)
  * @param: clickIcon - object 點(diǎn)擊之后圖標(biāo)url和size,
  * @param: repairControl -object 報(bào)修圖標(biāo)配置
  * @param: infoRouter - string 信息跳轉(zhuǎn)鏈接
  * */
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)
    })
  }
}

//循環(huán)添加多個(gè)點(diǎn)圖標(biāo)
/*
*  @param: point - object  定位點(diǎn)的經(jīng)緯度
*  @param: markers - object ajax獲取的數(shù)據(jù)
*  @param: icon - object 圖標(biāo)的url和size
*  @param: clickIcon - object 點(diǎn)擊之后圖標(biāo)url和size，
*  @param: repairControl -object 報(bào)修圖標(biāo)配置
* */
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("百度地圖創(chuàng)建成功......")
}

//ajax獲取后臺(tái)數(shù)據(jù)
/*
* @param: apiUrl - string 鏈接
* @param: pt - object 定位點(diǎn)的經(jīng)緯度
* @param: icon - object 圖標(biāo)url和size
* @param: clickIcon - object 點(diǎn)擊之后圖標(biāo)url和size，
* @param: repairControl -object 報(bào)修圖標(biāo)配置
* */
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)
    }
  })
}

//獲取步行規(guī)劃路線
/*
* @param: start-object 定位點(diǎn)的經(jīng)緯度（及起點(diǎn)）
* @param: end -object 點(diǎn)擊圖標(biāo)的經(jīng)緯度（及終點(diǎn)）
* @param: clickIcon- object 點(diǎn)擊之后圖標(biāo)url和size
* @param: markars - object ajax獲取數(shù)據(jù)
* @param: infoRouter - string 信息跳轉(zhuǎn)鏈接
* */
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 }))
  })

  //修改起終點(diǎn)的圖標(biāo)
  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;
  }
  // 創(chuàng)建控件
  var addGeolocationCtrl = new addGeolocationControl()
  // 添加到地圖當(dāng)中
  map.addControl(addGeolocationCtrl)
}

//添加報(bào)修自定義控件
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
  }
  // 創(chuàng)建控件
  addfixCtrl = new AddFixControl()
  // 添加到地圖當(dāng)中
  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("區(qū)域查找體檢站"))
    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
  }
  // 創(chuàng)建控件
  addSearchCtrl = new addSearchControl()
  // 添加到地圖當(dāng)中
  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
  }
  // 創(chuàng)建控件
  addinfoCtrl = new addinfoControl()
  // 添加到地圖當(dāng)中
  map.addControl(addinfoCtrl)
}

//點(diǎn)擊地圖關(guān)閉信息窗口
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)
  }
}

云服務(wù)器 GPU云服務(wù)器 ios百度地圖使用百度地圖百度地圖百度地圖標(biāo)注

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93099.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jay_tian

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

云主機(jī)能夠做什么-云主機(jī)能做什么？

閱讀 1198·2021-09-22 15:24
anchor-link-with-fixed-header

閱讀 2298·2019-08-30 15:44
Spring Boot + Mybatis + Shiro 后臺(tái)權(quán)限管理系統(tǒng)

閱讀 2626·2019-08-30 10:55
拓端數(shù)據(jù)tecdat:DT模型打好用戶流失預(yù)防針——電信客戶流失淺析

閱讀 3366·2019-08-29 13:25
CSS教你玩轉(zhuǎn)背景background-position（1）

閱讀 1651·2019-08-29 13:09
React組件中的constructor和super

閱讀 1405·2019-08-26 14:05
React 項(xiàng)目結(jié)構(gòu)和組件命名規(guī)范

閱讀 1397·2019-08-26 13:58
前端學(xué)習(xí)筆記之this——懂不懂由你，反正我是懂了

閱讀 1988·2019-08-26 11:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

百度地圖使用

相關(guān)文章

Android Studio導(dǎo)入并顯示國(guó)內(nèi)地圖SDK步驟對(duì)比以及需要注意的點(diǎn)（百度地圖和高德地圖為例

Android Studio導(dǎo)入并顯示國(guó)內(nèi)地圖SDK步驟對(duì)比以及需要注意的點(diǎn)（百度地圖和高德地圖為例

百度地圖開發(fā)實(shí)例番外篇--實(shí)用方法（持續(xù)更新）

百度地圖開發(fā)實(shí)例文章（一）

百度地圖 osm地圖 leaflet echarts webapck的組合使用時(shí)的踩坑記錄

發(fā)表評(píng)論

0條評(píng)論

jay_tian

男|高級(jí)講師

TA的文章

云主機(jī)能夠做什么-云主機(jī)能做什么？

anchor-link-with-fixed-header

Spring Boot + Mybatis + Shiro 后臺(tái)權(quán)限管理系統(tǒng)

拓端數(shù)據(jù)tecdat:DT模型打好用戶流失預(yù)防針——電信客戶流失淺析

CSS教你玩轉(zhuǎn)背景background-position（1）

React組件中的constructor和super

React 項(xiàng)目結(jié)構(gòu)和組件命名規(guī)范

前端學(xué)習(xí)筆記之this——懂不懂由你，反正我是懂了

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

百度地圖使用

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！