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

bella99 2021-09-14 原文

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