引用百度地图做的导航路径
*主要有的功能为 输入地址 进行导航 *
**用的话修改好自己的百度地图key 还有 你的目的地改一下 就可以直接用 也添加了 单击事件 适用于移动端 **
这是模糊查询
下面引入代码
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2481775_o0wpis3e0p.css">
<!--引用百度地图API-->
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icondingwei,
.icontubiao210 {
color: #1891EE;
margin-right: 8px;
}
.iw_poi_title {
display: none;
}
.iw_poi_content {
font: 12px arial, sans-serif;
overflow: visible;
padding-top: 4px;
white-space: -moz-pre-wrap;
word-wrap: break-word;
width: 270px;
line-height: 2;
font-weight: 600;
font-size: 14px;
}
.pop img:nth-child(10) {
display: none !important;
}
.pop div:nth-child(1),
.pop div:nth-child(3),
.pop div:nth-child(5),
.pop div:nth-child(7) {
display: none !important;
}
.pop .top,
.pop .bottom {
left: 0px !important;
width: 300px !important;
}
.pop .top {
border-left: none !important;
border-top: none !important;
border-radius: 8px 8px 0 0;
}
.pop .center {
border-left: none !important;
border-right: none !important;
}
.pop .bottom {
border-bottom: none !important;
border-radius: 0 0 8px 8px;
}
.BMapLabel {
left: 22px !important;
}
.btn {
margin-top: 10px;
margin-left: 75px;
border: 2px solid #1891EE;
border-radius: 10px;
background-color: #fff;
font-size: 10px;
color: #1891EE;
}
.road-type {
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
input {
background: none;
outline: none;
border: none;
}
input {
background: none;
outline: none;
border: 1px solid #ccc;
}
input:focus {
border: none;
}
.searchbox {
position: relative;
margin: 10px;
background-color: #fff;
}
.dot {
position: absolute;
top: 15px;
left: 11px;
box-sizing: border-box;
width: 10px;
height: 10px;
background-color: #fff;
border: 2px solid #7FDF7F;
border-radius: 50%;
}
.dot-end {
top: 55px;
left: 11px;
border: 3px solid #FF8D8D;
}
.txt {
box-sizing: border-box;
margin-left: 30px;
border: none;
width: 250px;
height: 40px;
background-color: #fff;
}
.start-text {
border-bottom: 1px solid #EAEBED;
}
.btn-search {
background-color: #3385FF;
border: none;
color: #fff;
width: 55px;
height: 27px;
border-radius: 15px;
margin-right: 10px;
}
#box {
display: none;
}
.total {
position: relative;
}
.boxpanel {
position: absolute;
top: 90px;
left: 10px;
background-color: #fff;
padding: 0 20px;
}
.box-group {
display: flex;
justify-content: flex-start;
align-items: center;
}
.box-group p a {
text-decoration: none;
color: #666666;
}
.startPanel {
color: #666666;
}
</style>
<!-- 需要引入自己的地图key src -->
<script type="text/javascript" src="http://"></script>
</head>
<body>
<div class="total">
<div class="road-type">
<div class="searchbox">
<span class="dot"></span> <input id='startInput' class="txt start-text" type="text" value=""
placeholder="请输入起始地址" oninput="startInputChange(value)" /><br /> <span
class="dot dot-end"></span><input class="txt end-text" type="text" value="目的地最终" disabled
id="endInput" /> <input type="button" class="btn-search" value="搜索" onclick="goHere()" />
</div>
</div>
<!--百度地图容器-->
<div style="width:650px;height:350px;border:#ccc solid 1px;" id="dituContent"></div>
<div class="boxpanel hidden" id="box">
<div class="">
<!-- <div>起点选择 </div> -->
<div class="startPanel" id="startPanel"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap() {
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(109.023023, 34.251607);//定义一个中心点坐标
map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
var startInfowin = new BMap.InfoWindow("<p class='t-c'><input value='选为起点' type='button' οnclick='startDeter();' /></p>");
var startResults = null;
var startPoint;
}
//地图事件设置函数：
function setMapEvent() {
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//标注点数组
var markerArr = [{ title: "西安**********", content: "<i class='icon iconfont icondingwei' ></i>陕西省西*******<br><i class='icon iconfont icontubiao210' ></i>02945678450 <button class='btn' οnclick=goHere()>去这里</button>", point: "109.023019|34.251631", isOpen: 0, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 } }
];
//创建marker
function addMarker() {
for (var i = 0; i < markerArr.length; i++) {
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0, p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point, { icon: iconImg });
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor: "#808080",
color: "#333",
cursor: "pointer"
});
(function () { // 控制弹出框的显示和隐藏
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.openInfoWindow(_iw);
_marker.addEventListener("click", function () {
_marker.openInfoWindow(_iw);
});
_iw.addEventListener("open", function () {
_marker.getLabel().hide();
})
_iw.addEventListener("close", function () {
_marker.getLabel().show();
})
label.addEventListener("click", function () {
_marker.openInfoWindow(_iw);
})
if (!!json.isOpen) {
label.hide();
_marker.openInfoWindow(_iw);
}
})()
//创建右键菜单
this.rightKeyContextMenu();
}
}
//创建InfoWindow
function createInfoWindow(i) {
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
return iw;
}
//创建一个Icon iconlogo
function createIcon(json) {///img
var icon = new BMap.Icon("./logo.jpg", new BMap.Size(40, 40))
return icon;
}
//创建右键菜单
function rightKeyContextMenu() {
var _self = this;
map.enableScrollWheelZoom(true);
var menu = new BMap.ContextMenu();
var txtMenuItem = [
{
text: '去********',
callback: function (e) {
console.log()
_self.dingwei(e)
}
}
];
for (var i = 0; i < txtMenuItem.length; i++) {
menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
}
map.addContextMenu(menu);
}
function dingwei(e) {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
document.getElementById("lng").value = r.point.lng;
document.getElementById("lat").value = r.point.lat;
var city_name = r.address.province + r.address.city;
document.getElementById("where").value = city_name
}
else {
console.log('获取失败');
}
});
}
function goHere() {
// var allOverlay = map.getOverlays();//获取所有标注点
// for (var i = 0; i < allOverlay.length; i++) {
// allOverlay[i].setAnimation(); //清除跳动动画
// if (allOverlay[i].point.lat == x && allOverlay[i].point.lng == y) {
// allOverlay[i].setAnimation(BMAP_ANIMATION_BOUNCE); //为当前点添加跳动动画
// }
// }
// document.getElementById("startPanel").innerHTML
map.clearOverlays();
addMarker();//向地图中添加marker
var starting = '';
var startPlace = document.getElementById("startInput").value;
if (startPlace) {
starting = startPlace
}
console.log(starting)
map.enableScrollWheelZoom();
var point = new BMap.Point(109.023023, 34.251607);//定义一个中心点坐标
map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
walking.search(starting, '西安************');
}
// 键盘输入
function startInputChange(e) {
console.log(e)
document.getElementById('box').style.display = 'block'
if (document.getElementById("startInput").value == '') {
console.log(123)
document.getElementById('box').style.display = 'none'
return;
}
var startOption = {
onSearchComplete: function (results) {
// 判断状态是否正确
if (startSearch.getStatus() == BMAP_STATUS_SUCCESS) {
startResults = results;
var s = [];
for (var i = 0; i < results.getCurrentNumPois(); i++) {
s.push("<div class='box-group'><p><a id='check" + i + " ' οnclick='startDeter(id)' οnmοuseοver='map.openInfoWindow(startInfowin,startResults.getPoi(" + i + ").point);' href='#'>");
s.push(results.getPoi(i).title);
s.push("</a></p><p>");
s.push("</p></div>");
}
document.getElementById("startPanel").innerHTML = s.join("");
} else { startResults = null; }
}
};
//创建2个搜索实例
var startSearch = new BMap.LocalSearch(map, startOption);
var startPlace = document.getElementById("startInput").value;
document.getElementById("startInput").style.innerHTML = startPlace;
startSearch.search(startPlace);
document.getElementById("box").style.display = "block";
};
function startDeter(res) {
var tag = document.getElementById(res)
document.getElementById('startInput').value = tag.innerText
document.getElementById('box').style.display = 'none'
}
initMap();//创建和初始化地图
map.addEventListener("click", function (e) {//地图单击事件
var geocoder = new BMap.Geocoder();
var point = new BMap.Point(e.point.lng, e.point.lat);
geocoder.getLocation(point, function (geocoderResult, LocationOptions) {
map.clearOverlays()
addMarker();//向地图中添加marker
map.addControl(new BMap.NavigationControl());
var marker = new BMap.Marker(point); // 创建标注
this.map.addOverlay(marker);
//定位成功
var address = geocoderResult.address;
console.log(address)
document.getElementById("startInput").value = address
});
});
</script>
</html>
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
