高德地图某一城市地铁路线高亮解决方案

• 项目刚好有一个需求，在地图上按需高亮全部或者某一条地铁线路。找了蛮久没找到什么好的解决方案（也可能是自己菜），那就只能自己投机取巧咯。不多说上代码。

<!-- 部分关键HTML和css -->
<!-- 引入高德地图js API，key后面的参数是秘钥，需要去官网申请。AMap.LineSearch要用到，在这里加上参数，不然AMap.LineSearch会提示undifind -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.LineSearch"></script> 

<!-- 挂载地图的元素 -->
<div id="map-container"></div>

/* CSS */
#map-container {width:300px; height: 180px; }  

/* js部分 */
// 初始化地图
var map = new window.AMap.Map('map-container', {
      zoom: 9,
      resizeEnable: true,
      center: [113.324269, 23.13091]
})

// 实例化某以城市公交地铁线路查询类（以广州为例）
var linesearch = new window.AMap.LineSearch({
	pageIndex: 1, // 第一页的线路
    city: '广州',
    pageSize: 1, // 每一页的线路条数
    extensions: 'all' // 所有线路类型
 })

// 开始搜索
var name = '2号线'
linesearch.search(name, (status, result) => {
	if (status === 'complete' && result.info === 'OK') {
		// 查询成功调用
        lineSearch_Callback(result)
     } else {
        console.log('查询出错')
     }
})

/* 地铁路线查询服务返回数据解析概况 */
function lineSearch_Callback (data) {
  var lineArr = data.lineInfo;
  var lineNum = data.lineInfo.length;
  if (lineNum == 0) {
     console.log(lineNum)
   } else {
      for (var i = 0; i < lineNum; i++) {
        var pathArr = lineArr[i].path;
        if (i == 0) // 只绘制一条线路，就是需要高亮的地铁线路
          drawbusLine(pathArr);
      }
    }
}

/* 绘制路线 */
drawbusLine(BusArr) {
   let busPolyline = new window.AMap.Polyline({
	     map: map,
	     path: BusArr,
	     strokeColor: '#ddd',// 线颜色
	     strokeOpacity: 0.8,// 线透明度
	     isOutline: true,
	     outlineColor: 'white',
	     strokeWeight: 3 // 线宽
	})
 }

• 至此就可以画出一条高亮的某一城市的某一条地铁线路，如果你要画全部地铁线路（1号线、2号线等等），只要改下逻辑然后抽象方法循环调用就可以。虽然像菜鸡做法，但我感觉先把需求实现程序可以用再考虑别的才是正道，以后有更好的再换就是了。（希望可以给你们带来帮助）