百度地图_路线规划，起点终点标记弹窗显示信息
1.引入百度地图脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu">
2.定义HTML容器
<div id="container"></div>
3.js脚本代码
<script>
var map = new BMap.Map("container");
var point = new BMap.Point(114.025973657, 22.5460535462);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
// 弹窗
var opts = {
width: 270, // 信息窗口宽度
height: 100, // 信息窗口高度
enableMessage: true //设置允许信息窗发送短息
};
// 弹窗点击事件
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
// 创建信息窗口对象
var infoWindow = new BMap.InfoWindow(`<div>名称：<span>`+content.name+`</span></div><div>道路：<span>`+content.road+`</span></div><div>里程数：<span>`+content.milage+`</span></div>`, opts);
//开启信息窗口
map.openInfoWindow(infoWindow, point);
}
searchByStationName1()
var from;
var to;
//定义方法
function searchByStationName1() {
var startAddrr = "深圳北站";
var localSearch = new BMap.LocalSearch(map);
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0); //获得起点经纬度坐标
if (poi != null) {
//判断地名是否存在
from = poi.point;
searchByStationName2();
} else {
alert("请输入正确的地名！");
}
});
localSearch.search(startAddrr);
}
function searchByStationName2() {
var endAddrr = "东部华侨城";
var localSearch = new BMap.LocalSearch(map);
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0); //获得目的地经纬度坐标
if (poi != null) {
//判断目的地是否存在
to = poi.point;
run();
} else {
alert("请输入正确的地名！");
}
});
localSearch.search(endAddrr);
}
function run() {
// map.clearOverlays(); // 清除地图上所有的覆盖物
var walking = new BMap.WalkingRoute(map); // 创建步行实例
walking.search(this.from, this.to); // 第一个步行搜索
walking.setSearchCompleteCallback(function () {
console.log("completeCallback start!");
var pts = walking
.getResults()
.getPlan(0)
.getRoute(0)
.getPath(); // 通过步行实例，获得一系列点的数组
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
console.log("pollyline!", polyline);
var m1 = new BMap.Marker(from); // 创建2个marker
var m2 = new BMap.Marker(to);
map.addOverlay(m1);
map.addOverlay(m2);
m1.addEventListener("click", function (e) {
openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
});
m2.addEventListener("click", function (e) {
openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
});
var lab1 = new BMap.Label("起点", {
position: from
}); // 创建2个label
var lab2 = new BMap.Label("终点", {
position: to
});
map.addOverlay(lab1);
map.addOverlay(lab2);
console.log("setTimeout!");
setTimeout(function () {
map.setViewport([from, to]); // 调整到最佳视野
}, 1000);
});
}
</script>
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu">
</script>
<title>Document</title>
</head>
<body>
<style>
#container {
width: 100%;
height: 500px;
}
</style>
<div id="container"></div>
<div id="info"></div>
<script>
var map = new BMap.Map("container");
var point = new BMap.Point(114.025973657, 22.5460535462);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
// 弹窗
var opts = {
width: 270, // 信息窗口宽度
height: 100, // 信息窗口高度
enableMessage: true //设置允许信息窗发送短息
};
// 弹窗点击事件
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
// 创建信息窗口对象
var infoWindow = new BMap.InfoWindow(`<div>名称：<span>`+content.name+`</span></div><div>道路：<span>`+content.road+`</span></div><div>里程数：<span>`+content.milage+`</span></div>`, opts);
//开启信息窗口
map.openInfoWindow(infoWindow, point);
}
searchByStationName1()
var from;
var to;
//定义方法
function searchByStationName1() {
var startAddrr = "深圳北站";
var localSearch = new BMap.LocalSearch(map);
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0); //获得起点经纬度坐标
if (poi != null) {
//判断地名是否存在
from = poi.point;
searchByStationName2();
} else {
alert("请输入正确的地名！");
}
});
localSearch.search(startAddrr);
}
function searchByStationName2() {
var endAddrr = "东部华侨城";
var localSearch = new BMap.LocalSearch(map);
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0); //获得目的地经纬度坐标
if (poi != null) {
//判断目的地是否存在
to = poi.point;
run();
} else {
alert("请输入正确的地名！");
}
});
localSearch.search(endAddrr);
}
function run() {
// map.clearOverlays(); // 清除地图上所有的覆盖物
var walking = new BMap.WalkingRoute(map); // 创建步行实例
walking.search(this.from, this.to); // 第一个步行搜索
walking.setSearchCompleteCallback(function () {
console.log("completeCallback start!");
var pts = walking
.getResults()
.getPlan(0)
.getRoute(0)
.getPath(); // 通过步行实例，获得一系列点的数组
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
console.log("pollyline!", polyline);
var m1 = new BMap.Marker(from); // 创建2个marker
var m2 = new BMap.Marker(to);
map.addOverlay(m1);
map.addOverlay(m2);
m1.addEventListener("click", function (e) {
openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
});
m2.addEventListener("click", function (e) {
openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
});
var lab1 = new BMap.Label("起点", {
position: from
}); // 创建2个label
var lab2 = new BMap.Label("终点", {
position: to
});
map.addOverlay(lab1);
map.addOverlay(lab2);
console.log("setTimeout!");
setTimeout(function () {
map.setViewport([from, to]); // 调整到最佳视野
}, 1000);
});
}
</script>
</body>
</html>
“世界是个叙述者, 而我们却蒙上黑布, 嗤之以鼻。”
