js百度地图小车html,Web js实现百度地图实时轨迹画线 小车车行驶轨迹 | 彬菌

版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！

恰饭广告

注意：

1.百度地图ak换成自己在百度地图官网申请

2.建议使用firefox浏览器，google被墙无法调用gps

3.发布到服务器必须使用https，对于localhost和本地测试不用

4.电脑开启位置服务，手机打开gps定位

5.百度地图坐标和gps坐标不一致，要在百度地图正确显示位置必须把gps坐标转为百度坐标

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

百度地图的动态行驶轨迹

走一段距离打个点，两个点连成一条线

打点

var map = new BMap.Map("mapId");

map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放

getMyLocation();

//获取现在的经纬度

function getMyLocation() {

if (navigator.geolocation) {

//判断是否有这个对象

navigator.geolocation.getCurrentPosition(function (pos) {

var bd = GpsToBaiduPoint(pos.coords);//转换为百度坐标

var place = new BMap.Point(bd.lng, bd.lat);

map.centerAndZoom(place, 15);// 根据经纬度显示地图的范围

//map.setViewport([new BMap.Point(place.lng, place.lat)]);// 根据提供的地理区域或坐标设置地图视野

addStartMarker(new BMap.Point(place.lng, place.lat), '起点', map);

})

} else {

console.log("当前系统不支持GPS API")

}

}

var carMk;

//小车行驶图标

var drivingPoint = new BMap.Icon('car.png', new BMap.Size(52, 26), {

anchor: new BMap.Size(27, 13),

imageSize: new BMap.Size(52, 26)

});

//终点图标

var terminalPoint = new BMap.Icon('endMap.png', new BMap.Size(45, 45), {

anchor: new BMap.Size(20, 45),

imageSize: new BMap.Size(45, 45)

});

// 划线

function drowLine(map, PointArr, PointArrNext) {

if (PointArrNext != undefined) {

var polyline = new BMap.Polyline(

[

new BMap.Point(PointArr[0], PointArr[1]),

new BMap.Point(PointArrNext[0], PointArrNext[1])

],

{

strokeColor: "red",

strokeWeight: 7,

strokeOpacity: 1

}); //创建折线

map.addOverlay(polylin