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

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

最終效果：

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部分

順帶做了個(gè)手機(jī)版的，需要申請(qǐng)百度地圖API AK

打包下載地址

總結(jié)

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

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