本文介绍: 调用百度地图API接口,并设置了一个标记点标识基站的位置。地图容器的样式通过CSS设置,具有100%的宽度和600px的高度。定义了多个基站的位置坐标,并指定了基站的名称。创建了一个特定的终点,例如 “武汉站”。将起点、途经点和终点的信息展示在页面上,包括基站名称和物流路线信息。根据基站的位置,在地图上添加了相应的标注,使用了自定义的图标。每个标注附带基站的名称,以及起点和终点的标注有额外的标签。鼠标滚轮可以缩放地图。
快递物流模拟系统
一、目的
调用百度地图 JavaScript API 创建的简单的基站物流GPS定位与监控系统的示例网页
二、技术实现:
- 使用百度地图 JavaScript API 版本 2.0。
- 利用
BMap
对象创建地图、标注、标签和路线轨迹。 - 自定义图标用于标注基站的位置。
- 使用
DrivingRoute
类计算和绘制物流路线轨迹。
三、网页功能具体介绍
htmlCopy code
<div id="map"></div>
htmlCopy code
<div id="result"></div>
javascriptCopy codevar icon = new BMap.Icon(locations[i].name === specificEndPoint.name ? '00.png' : '11.png', new BMap.Size(20, 20), {
anchor: new BMap.Size(10, 25)
});
4、路线轨迹展示:
javascriptCopy codevar polyline = new BMap.Polyline(points, {
strokeWeight: 5,
strokeColor: "blue",
strokeStyle: "solid"
});
map.addOverlay(polyline);
javascriptCopy codevar logisticsRouteInfo = "<p>物流路线:";
for (var k = 0; k < locations.length; k++) {
logisticsRouteInfo += locations[k].name;
if (k < locations.length - 1) {
logisticsRouteInfo += " ➤ ";
}
}
logisticsRouteInfo += "</p>";
document.getElementById("result").innerHTML += logisticsRouteInfo;
原文地址:https://blog.csdn.net/m0_54024707/article/details/134734460
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_45190.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。