前言
在利用高德地图进行开发时，我们经常需要使用不同的API来实现特定的功能。为了帮助开发者快速定位所需API并掌握正确的使用方法，本文将以可视化任意公交站点路线为例，分享相关经验。
根据需求粗略匹配参考示例
在开始写代码我都会思考一下该功能的实现逻辑是什么：
1、通过什么方式确定站点的位置？是传入定位信息还是用浏览点击来搜索附近站点
2、如何获取到站点和线路的有关信息？这里用到哪些方法，返回什么样的数据，如何处理
3、将最后得到的结果该怎么展现？设置哪些样式和交互？
在捋顺上面的需求后，我们可以先将公交 作为关键字在参考示例搜索，可以看到有公交站点查询和公交线路查询这两个结果，并且参考示例提供有完整运行的代码，我们可以试着改变里面的参数运行调试一下
深入了解使用规范
比如在公交站点搜索这个参考示例中，是通过传入字符串来搜索得到站点，那如果我想通过传入定位信息或者是点击地图获取到经纬度来搜索是否可行呢？这里我们需要进入参考手册-地图 JS API 2.0进行了解。建议使用英文来查询，能更方便找到相关内容。从这里我们可以看到参数说明，方法，成员函数等等这些，真的非常详细。
可以看到并不支持传入经纬度数组来查询。因此，我们可以改变思路，在参考手册输入search这里看看有没有其他方式获取。根据翻译，placesearch大概率可以获取到公交站点信息
为了验证一下，通过添加 console.log打印出来看看
var placeSearch = new AMap.PlaceSearch(placeSearchOptions);
map.on('click', function(e) {
// 移除原有marker
map.remove(markers);
markers = [];
// 使用点击位置的坐标进行公交站点搜索
placeSearch.searchNearBy('公交', e.lnglat, 500, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
placeSearch_CallBack(result);
console.log(result)
} else {
document.getElementById('tip').innerHTML = JSON.stringify(result);
}
});
});
证明确实可行
实现过程
首先依旧是准备好js开发key和jscode，创建好地图示例。这里值得注意的是，一定要添加上用到的插件,即plugin后面
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&&plugin=AMap.LineSearch,AMap.PlaceSearch,AMap.InfoWindow">
通过刚才控制台打印的内容，我们需要清理出公交线路的名称。这里可以写一个函数来实现
placeSearch.searchNearBy('公交', e.lnglat, 500, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
placeSearch_CallBack(result);
function extractBusLines(result) {
if (result.poiList && result.poiList.pois.length > 0) {
// 获取第一个poi对象的address字段
var address = result.poiList.pois[0].address;
// 用分号分割address字符串并过滤掉包含'(停运)'的字符串
var busLines = address.split(';').filter(function(line) {
return !/(停运)/.test(line);
});
// 进一步清理线路数据，去除可能的空格
busLines = busLines.map(function(line) {
return line.trim();
});
return busLines;
} else {
// 如果没有找到有效的pois数据，返回空数组
return [];
}
}
再将列表的数据传入给线路查询，并绘制出来
busLines.forEach(function(busLineName) {
if(!linesearch){
linesearch = new AMap.LineSearch({
city: "北京",
pageSize: 1,
extensions: 'all'
});
}
linesearch.search(busLineName, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
lineSearch_Callback(result);
} else {
alert('线路 ' + busLineName + ' 查询失败: ' + result);
}
});
});
} else {
document.getElementById('tip').innerHTML = JSON.stringify(result);
}
});
});
function lineSearch_Callback(data) {
var lineArr = data.lineInfo;
var lineNum = lineArr.length;
if (lineNum == 0) {
alert('没有查询到相关线路');
} else {
for (var i = 0; i < lineNum; i++) {
var pathArr = lineArr[i].path;
var stops = lineArr[i].via_stops;
var startPot = stops[0].location;
var endPot = stops[stops.length - 1].location;
drawbusLine(startPot, endPot, pathArr);
}
}
}
function drawbusLine(startPot, endPot, BusArr) {
new AMap.Marker({
map: map,
position: startPot,
icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
zIndex: 10,
anchor: 'bottom-center',
});
new AMap.Marker({
map: map,
position: endPot,
icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
zIndex: 10,
anchor: 'bottom-center',
});
var busPolyline = new AMap.Polyline({
map: map,
path: BusArr,
strokeColor: "#09f",
strokeOpacity: 0.8,
isOutline: true,
outlineColor: 'white',
strokeWeight: 6
});
map.setFitView(busPolyline, false, [60,200,60,60],11);
}
成果初步展示
这里为了展示更加可观，还需要给不同线路设置不同颜色以便区分
.line-info {
overflow: auto;
max-height: none;
height: auto;
}
#infoPanel {
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
.legend-item {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 10px;
}
}
<div id="container">
<div id="infoPanel">
<h4>线路信息</h4>
<div id="lineName" class="line-info"></div>
</div>
function generateRandomColor() {
var hue = Math.floor(Math.random() * 360); // 生成0-359之间的随机数作为色调
var saturation = 80; // 提高饱和度到80%
var lightness = 50; // 设置亮度为50%，避免太暗或太亮
var color = 'hsl(' + hue + ', ' + saturation + '%, ' + lightness + '%)';
return color;
}
function drawbusLine(startPot, endPot, BusArr, color) {
//省略代码
var busPolyline = new AMap.Polyline({
map: map,
path: BusArr,
strokeColor: color, // 使用传入的颜色
strokeOpacity: 0.7,
isOutline: true,
outlineColor: 'white',
strokeWeight: 6
});
map.setFitView(busPolyline, false, [60,200,60,60],11);
}
// 修改lineSearch_Callback函数，以生成随机颜色
function lineSearch_Callback(data) {
//省略代码
if (lineNum == 0) {
alert('没有查询到相关线路');
} else {
for (var i = 0; i < lineNum; i++) {
//省略代码
var color = generateRandomColor(); // 生成随机颜色
drawbusLine(startPot, endPot, pathArr, color); // 传递颜色
var lineName = lineArr[i].name;
var legendColor = '<div class="legend-color" style="background-color:' + color + ';"></div>';
setTimeout(function(ln) {
document.getElementById('lineName').innerHTML += ln + '<br>' + legendColor;
}, 1000 * i, lineName);
}
}
}
最后成果展示（这里运用上了官方地图样式远山黛）
总结
这里的可视化公交线路还是有许多不足之处的，比如当线路太多的话随机生成的颜色会过于接近和无法区分，需要进一步考虑展示的相关交互设计。当然，本篇文章最主要通过案例分享一下使用高德地图开发的经验和体会，希望能对大家有所帮助。
标签：function,map,为例,color,JS,result,公交站点,var From： https://blog.51cto.com/u_16507376/12067128