<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
html,body{
margin:0;
width:100%;
height:100%;
background:#ffffff;
}
#panel {
position: absolute;
top:30px;
left:10px;
z-index: 999;
color: #fff;
}
#login{
position:absolute;
width:300px;
height:40px;
left:50%;
top:50%;
margin:-40px 0 0 -150px;
}
#login input[type=password]{
width:200px;
height:30px;
padding:3px;
line-height:30px;
border:1px solid #000;
}
#login input[type=submit]{
width:80px;
height:38px;
display:inline-block;
line-height:38px;
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>车路线+急加减速点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
function load(filename) {
let xhr = new XMLHttpRequest(),
okStatus = document.location.protocol === "file:" ? 0 : 200;
xhr.open('GET', filename, false);
xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
xhr.send(null);
return xhr.status === okStatus ? xhr.responseText : null;
}//读取文件
function formatting(text){
text = text.split('\n');
window.text = text;
var arr = [];
for (var i = 0; i < text.length-1; i++) {
if (i === 0) {
continue;
}
var _ele = text[i].split(',');
arr.push({x: _ele[1], y:_ele[0]});
}
return arr;
}//解析文件数据
function plotpoints(ar,map,colo,siz){
var points=[];
for(var i in ar){
var _data=new BMap.Point(ar[i].x, ar[i].y);
points.push(_data);
}
if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
var options = {
size: siz,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: colo
}
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
pointCollection.addEventListener('click', function (e) {
alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); // 监听点击事件
});
map.addOverlay(pointCollection); // 添加Overlay
} else {
alert('请在chrome、safari、IE8+以上浏览器查看本示例');
}
}//地图上添加点
let text = load("string1.txt");
var arr = formatting(text);
let text1 = load("rapidly_acc_points1.txt");
var arr1 = formatting(text1);
let text2 = load("sharp_slow_points1.txt");
var arr2 = formatting(text2);
mapLoad(arr, arr1, arr2);
function mapLoad(arr, arr1, arr2) {
var pois=[];
for(var i in arr){
var _data=new BMap.Point(arr[i].x, arr[i].y);
pois.push(_data);
}
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var view = map.getViewport(eval(pois));
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint,mapZoom);// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 0.6,//图标缩放大小
strokeColor:'#fff',//设置矢量图标的线填充颜色
strokeWeight: '3',//设置线宽
});
var icons = new BMap.IconSequence(sy, '100', '1000');
// 创建polyline对象
var polyline =new BMap.Polyline(pois, {
enableEditing: false,//是否启用线编辑，默认为false
enableClicking: true,//是否响应点击事件，默认为true
// icons:[icons], //折线上的白色箭头
strokeWeight:'4',//折线的宽度，以像素为单位
strokeOpacity: 0.6,//折线的透明度，取值范围0 - 1
strokeColor:"#18a45b" //折线颜色
});
map.addOverlay(polyline); //增加折线
plotpoints(arr1,map,'#DB7093',BMAP_POINT_SIZE_SMALL);
plotpoints(arr2,map,'#6495ED',BMAP_POINT_SIZE_SMALL);
//点大小参数：BMAP_POINT_SIZE_SMALLER ，BMAP_POINT_SIZE_NORMAL ，BMAP_POINT_SIZE_BIG
}
</script>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
