Score
0
Watch 21 Star 53 Fork 12

一枚前端 / bMap-mapSmoothMarkerJavaScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
百度地图标注平移、网约车方案 spread retract

Clone or download
index-gd.ejs 5.06 KB
Copy Edit Web IDE Raw Blame History
一枚前端 authored 2018-08-13 15:49 . 首次提交
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/expand-path.html -->
<!-- <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" /> -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>高德地图平移</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="/javascripts/socket.io-client/socket.io.js"></script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.8&key=fa377a69f324103dd2b2e3dd1bc3d10a&plugin=AMap.Driving'></script>
<!-- UI组件库 1.0 -->
<script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
<script>
//连接socket后端服务器
var socket = io.connect("ws://127.0.0.1:33660");
socket.on('connect', function () {
//连接成功
console.log("Socket->ok:33660", new Date());
socket.send('欢迎连接Socket!');
});
socket.on('disconnect', function (data) {
//连接断开
console.error("Socket->Error", data, new Date());
});
</script>
<script>
//转换经纬度
var toLnglats = function (lng, lat) {
var lnglats = gcoord.transform([lng, lat], // 经纬度坐标
gcoord.BD09, // 当前坐标系
gcoord.GCJ02, // 目标坐标系
);
return lnglats;
}
</script>
<script type="text/javascript">
//创建地图
var map = new AMap.Map('container', {
zoom: 12,
center: [106.757, 31.873],
});
</script>
<script>
//构造路线导航类
var driving = new AMap.Driving({
map: map,
autoFitView: true,
hideMarkers: true,
});
var startLngLat = new AMap.LngLat(toLnglats(106.7632446289062, 31.862472517752668)[0], toLnglats(106.7632446289062, 31.862472517752668)[1]);
var endLngLat = new AMap.LngLat(toLnglats(106.75643157958979, 31.876993165787926)[0], toLnglats(106.75643157958979, 31.876993165787926)[1]);
var zts1LngLat = new AMap.LngLat(toLnglats(106.75920483336039, 31.866551324204966)[0], toLnglats(106.75920483336039, 31.866551324204966)[1]);
var waypoints = [zts1LngLat];
// 根据起终点经纬度规划驾车导航路线
driving.search(startLngLat, endLngLat, {
waypoints: waypoints,
});
</script>
<script>
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas!');
return;
};
var pathSimplifierIns = new PathSimplifier({
zIndex: 999999999,
autoSetFitView: false,
map: map, //所属的地图实例
getPath: function (pathData, pathIndex) {
return pathData.path;
},
renderOptions: {
renderAllPointsIfNumberBelow: 100 //绘制路线节点,如不需要可设置为-1
}
});
window.pathSimplifierIns = pathSimplifierIns;
var allPioit = [toLnglats(106.7632446289062, 31.862472517752668)];
var data = [{
name: '动态路线',
path: [allPioit[0]]
}];
pathSimplifierIns.setData(data);
//对第一条线路(即索引 0)创建一个巡航器
var navg1 = pathSimplifierIns.createPathNavigator(0, {
loop: true, //循环播放
speed: 100 //巡航速度,单位千米/小时
});
navg1.start();
socket.on('message-client', function (res) {//接受到车辆移动->地图推送
var cursor = navg1.getCursor().clone(), status = navg1.getNaviStatus();
var zts1LngLat = new AMap.LngLat(toLnglats(res.lon, res.lat)[0], toLnglats(res.lon, res.lat)[1]);
waypoints.push(zts1LngLat);
// driving.search(startLngLat, endLngLat, {
// waypoints: [zts1LngLat]
// });
allPioit.push(toLnglats(res.lon, res.lat));
data[0].path = allPioit;
pathSimplifierIns.setData(data); //延展路径
//重新建立一个巡航器
navg1 = pathSimplifierIns.createPathNavigator(0, {
speed: 500, //巡航速度,单位千米/小时
pathNavigatorStyle: {
width: 24,
height: 24,
//使用图片
content: PathSimplifier.Render.Canvas.getImageContent('/stationPoint.png', onload, onerror),
strokeStyle: null,
fillStyle: null,
//经过路径的样式
pathLinePassedStyle: {
lineWidth: 6,
strokeStyle: 'black',
dirArrowStyle: {
stepSpace: 15,
strokeStyle: 'red'
}
}
}
});
if (status !== 'stop') {
navg1.start();
}
//恢复巡航器的位置
if (cursor.idx >= 0) {
navg1.moveToPoint(cursor.idx, cursor.tail);
}
});
});
</script>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/zbproject/bMap-mapSmoothMarker.git
git@gitee.com:zbproject/bMap-mapSmoothMarker.git
zbproject
bMap-mapSmoothMarker
bMap-mapSmoothMarker
master

Help Search