關於使用高德地圖的一些常用操作

1.引入高德地圖如何去掉地圖上的logo

.amap-logo {
    display: none;
}

2.地圖上添加圖標

new AMap.Marker ({
  icon: require('../../../assets/img/platform.png'),
  offset: new AMap.Pixel(-12, -16),
  position: [120.236522,30.183376],
  map: map
})

3.設定自己想要的地圖風格

首先注冊成為高德的開發者，然后添加項目生成key，ui設計師可以在控制台設計相應的地圖風格並發布，讓風格鏈接給前端即可引入。

map.setMapStyle('amap://styles/5fb842579a8dd26c87034dcc8a074234')

4.地圖中調用公交線路並顯示

let linesearch = new AMap.LineSearch({
  pageIndex: 1,
  city: '杭州',
  pageSize: 1,
  extensions: 'all'
})
linesearch.search('315', function(status, result) {
  map.clearMap()
  if (status === 'complete' && result.info === 'OK') {
    lineSearch_Callback(result)
  } else {
    alert(result)
  }
})
/*公交路線查詢服務返回數據解析概況*/
function lineSearch_Callback(data) {
  let lineArr = data.lineInfo
  let lineNum = data.lineInfo.length
  if (lineNum == 0) {
  } else {
    for (let i = 0; i < lineNum; i++) {
      let pathArr = lineArr[i].path
      let stops = lineArr[i].via_stops
      let startPot = stops[0].location
      let endPot = stops[stops.length - 1].location
      if (i == 0) //作為示例，只繪制一條線路
        drawbusLine(startPot, endPot, pathArr)
    }
  }
}
/*繪制路線*/
function drawbusLine(startPot, endPot, BusArr) {
  //繪制起點，終點
  new AMap.Marker({
    map: map,
    position: startPot, //基點位置
    icon: require('../../../assets/img/busEnd.png'),
    zIndex: 10
  })
  new AMap.Marker({
    map: map,
    position: endPot, //基點位置
    icon: require('../../../assets/img/busStart.png'),
    zIndex: 10
  })
  //繪制乘車的路線
  let busPolyline = new AMap.Polyline({
    map: map,
    path: BusArr,
    strokeColor: "#FF3A68",//線顏色
    strokeOpacity: 1,//線透明度
    isOutline:true,
    outlineColor: "rgba(255, 255, 255, .4)",
    strokeWeight: 4//線寬
  })
  map.setFitView()
}