I haven't written CSDN blog for a long time. Today I wrote two at a time. This is the third one. I can't stop at all. Haha, the last one let us know how to call Baidu map to locate. This time, I'll tell you how to call Baidu single point mobile function.
The so-called single point mobile function, in fact, is that Baidu will recommend a line to you according to your starting point and destination, and there will be pictures running on the line, so that you can clearly see how the line should run, and there will be the next step function in each stage.
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2017/11/23
Time: 16:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta name="viewport"
content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"Microsoft YaHei ";}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=. . . . . . "></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<title>Rescue route</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// Baidu map API function
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
/* var myP1 = new BMap.Point(116.380967,39.913285); //Starting point
var myP2 = new BMap.Point(116.424374,39.914668); //End */
var lng=${customer.lng};
var lat=${customer.lat};
/* var myP1 = new BMap.Point(114.510417,36.870056); */ //Starting point
var myP1 = new BMap.Point(114.525124,36.863133); //Starting point
var myP2 = new BMap.Point(lng,lat); //End
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 60), { //Car picture
//offset: new BMap.Size(0, -5), / / equivalent to CSS Wizard
imageOffset: new BMap.Size(0, 0) //Offset of the picture. So that the bottom center of the image is aligned with the coordinate point.
});
var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //Driving example
driving2.search(myP1, myP2); //Show a bus line
window.run = function (){
var driving = new BMap.DrivingRoute(map); //Driving example
driving.search(myP1, myP2);
driving.setSearchCompleteCallback(function(){
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //Through the driving example, a series of point arrays are obtained
var paths = pts.length; //There are several points
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
map.addOverlay(carMk);
i=0;
function resetMkPoint(i){
carMk.setPosition(pts[i]);
if(i < paths){
setTimeout(function(){
i++;
resetMkPoint(i);
},100);
}
}
setTimeout(function(){
resetMkPoint(5);
},100)
});
}
setTimeout(function(){
run();
},1500);
</script>
Note: the first step is to fill in the key; the second step is to dynamically transfer in the customer's address, and then if the destination is dynamic, it also needs to dynamically transfer in. If it is dead, just write it dead directly. Note here that the incoming value is latitude and longitude, not name. One of the names is not accurate, and the other estimation is difficult to find out; the third step is to dynamically transfer in the customer's address It's ready to run.
If you have any questions or suggestions, please leave me a message. Thank you.