有時候做企業(yè)網(wǎng)站經(jīng)常用到指引地圖。用默認(rèn)的吧，樣式可能又不太符合主題，所以就有了下面這個版本。

基于百度官方demo樣式修改，改得不好請輕噴。我看過有的是直接打開頁面就定位個地址然后跳轉(zhuǎn)搜索路線，我覺得這樣用戶可能不太買賬，我個人不喜歡這樣，以下樣式均可修改。兼容性請自行測試。

最終效果：

js部分:

css部分：

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

.position-map .outset {

width:170px;

min-height: 20px;

vertical-align: middle;

}

.position-map .input {

display: block;

margin-top: 10px;

}

textarea, input[type="text"], input[type="password"], input[type="search"] {

padding: 15px 8px;

line-height: 1;

height: 18px;

border: 1px solid #ddd;

background-color: #fff;

transition: border linear .2s,box-shadow linear .2s;

vertical-align: middle;

}

.position-map .btn {

margin-left: 5px;

vertical-align: middle;

}

.btn {

display: inline-block;

border: 0;

text-align: center;

background: #0089e1;

color: #fff;

min-height: 34px;

line-height: 34px;

padding: 0 15px;

-webkit-transition: background .3s,border .3s;

transition: background .3s,border .3s;

}

html部分

順帶做了個手機版的，需要申請百度地圖API AK

打包下載地址

總結(jié)

以上是生活随笔為你收集整理的html利用百度地图查找路线,html调用百度地图API实现查找路线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。