关于使用高德地图的一些常用操作

Posted 2020-12-13 bella99

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