300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html5百度地图展示运动轨迹 百度地图根据经纬度获取运动轨迹

html5百度地图展示运动轨迹 百度地图根据经纬度获取运动轨迹

时间:2023-05-21 12:49:09

相关推荐

html5百度地图展示运动轨迹 百度地图根据经纬度获取运动轨迹

body, html, #allmap{width:100%; height:100%; overflow:hidden; margin:0; font-family:"微软雅黑";}

走航轨迹测试

var startLong = 111.149396; // 开始时的经度

var startLat = 27.485042; // 开始时的纬度

var endLong = 111.149396;

var endLat = 27.485042;

var latData = new Array(27.662692,27.485743,27.486456,27.486676,27.48934,27.491936,27.512411,27.52191,27.532354,27.531649,27.536358,27.544237,27.549074,27.553061,27.554727,27.558554);

var longData = new Array(111.166895,111.149472,111.149445,111.149333,111.147339,111.148632,111.123785,111.104562,111.094716,111.10104,111.111029,111.117605,111.121629,111.123336,111.126319,111.127486);

var iter = 0;

// 百度地图API功能

var map = new BMap.Map("allmap"); // 创建Map实例

map.centerAndZoom(new BMap.Point(111.149863,27.485358), 18); // 初始化地图,设置中心点坐标和地图级别

map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

map.setCurrentCity("高坪汽车站"); // 设置地图显示的城市

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

setInterval(goWay,2000); // 0.8秒画一次线

setInterval(getLocation,2000); // 0.8秒画一次线

var carMk;

var myIcon = new BMap.Icon("/jsdemo/img/Mario.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});//马里奥

function goWay(){

iter = iter + 1;

if (iter < latData.length){

startLat = endLat;

startLong = endLong;

endLong = longData[iter]; // 读取经纬度

endLat = latData[iter];

drawIcon(startLong,startLat,endLong,endLat);

}else{

pass;

}

}

function drawGreenLine(startLong,startLat,endLong,endLat){

var polyline = new BMap.Polyline([

new BMap.Point(startLong,startLat),//起始点的经纬度

new BMap.Point(endLong,endLat)//终止点的经纬度

], {strokeColor:"forestgreen",//设置颜色

strokeWeight:5, //宽度

strokeOpacity:1});//透明度

map.addOverlay(polyline); //将标注添加到地图中

}

function drawIcon(startLong,startLat,endLong,endLat){

if(carMk){

map.removeOverlay(carMk);

}

carMk = new BMap.Marker(

new BMap.Point(endLong,endLat),

{icon:myIcon});

map.addOverlay(carMk);

drawGreenLine(startLong,startLat,endLong,endLat);

}

/*******************************************************************自动获取手机经纬度************************************************************************************8*/

function getLocation(){

var options={

enableHighAccuracy:true,

maximumAge:1000

}

if(navigator.geolocation){

//浏览器支持geolocation

navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

}else{

//浏览器不支持geolocation

alert('您的浏览器不支持地理位置定位');

}

}

//成功时

function onSuccess(position){

//返回用户位置

//经度

var longitude =position.coords.longitude;

//纬度

var latitude = position.coords.latitude;

alert('经度'+longitude+',纬度'+latitude);

//根据经纬度获取地理位置,不太准确,获取城市区域还是可以的

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

var point = new BMap.Point(longitude,latitude);

var gc = new BMap.Geocoder();

gc.getLocation(point, function(rs){

var addComp = rs.addressComponents;

alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

});

}

//失败时

function onError(error){

switch(error.code){

case 1:

alert("位置服务被拒绝");

break;

case 2:

alert("暂时获取不到位置信息");

break;

case 3:

alert("获取信息超时");

break;

case 4:

alert("未知错误");

break;

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。