JS框架_(JQuery.js)高德地圖api

時間 2020-08-18

標籤框架 jquery.js jquery 地圖 api 欄目 JavaScript 简体版

原文原文鏈接

百度雲盤　　傳送門　　密碼 :ko30javascript

高德地圖api效果css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>jQuery高德地圖api開發實例代碼</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=c93e1e293e5b1c3dc581f3ff633144d3&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Riding"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="myPageTop">
<a href="javascript:void(0);" id="show">
    Gary_點擊試試———路線工具（展開/收縮）
</a>
<div class="pageShow">
    <h3>搜索地址</h3>
    <input id="tipinput" placeholder="模糊地址搜索">
    <h3>搜索行車路徑</h3>
    <input id="star" placeholder="行車開始地址">
    <span>—&nbsp;—</span>
    <input id="end" placeholder="行車結束地址">
    <span>—&nbsp;—</span>
    <a id="car" href="javascript:void(0);">
        點擊搜索
    </a>

    <h3>搜索騎行路徑</h3>
    <input id="cStar" placeholder="騎行開始地址">
    <span>—&nbsp;—</span>
    <input id="cEnd" placeholder="騎行結束地址">
    <span>—&nbsp;—</span>
    <a id="riding" href="javascript:void(0);">
        點擊搜索
    </a>

    <h3>搜索步行路徑</h3>
    <input id="wStar" placeholder="步行開始地址">
    <span>—&nbsp;—</span>
    <input id="wEnd" placeholder="步行結束地址">
    <span>—&nbsp;—</span>
    <a id="walk" href="javascript:void(0);">
        點擊搜索
    </a>
    <div style="margin:20px 0;">
        <a id="box" href="javascript:void(0);">
            鼠標右鍵拖取選框放大地圖
        </a>
        <a id="meter" href="javascript:void(0);">
            測量距離
        </a>
    </div>
</div>
</div>
<div id="container"></div>
<div id="panel"></div>
<script src="js/main.js"></script>


</body>
</html>

index.html

#myPageTop{
    position: absolute;
    z-index:10;
    top:0;
    left:50%;
    transform: translateX(-60%);
    background: #fff;
    width:70%;
    padding:20px;
}
#myPageTop a{
    display: inline-block;
    text-align: center;
    padding:10px 20px;
    color:#fff;
    background: #ff950e;
    text-decoration:none;
}
#myPageTop #show{
    display: block;
}
#myPageTop input{
    font-size:14px;
    padding:6px 8px;
    border:1px solid #ccc;
    outline:none;
}
.pageShow h3{
    margin:20px 0 10px;
}
#panel {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 10px;
    right: 10px;
    width: 280px;
}
.infowindow-content{
    padding:12px 8px;
    color:#fff;
    background:#ccc;
}

h3{
    font-family: "Microsoft YaHei";
    !important;
}
.pageShow{
    display:none;
}

style.css

實現過程html

CSSjava

頁面頂端jquery

#myPageTop{
    position: absolute;
    z-index:10;
    top:0;
    left:50%;
    transform: translateX(-60%);
    background: #fff;
    width:70%;
    padding:20px;
}

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面　　傳送門web

transform：translateX(x) 定義轉換，只是用 X 軸的值api

提交按鈕ide

#myPageTop input{
    font-size:14px;
    padding:6px 8px;
    border:1px solid #ccc;
    outline:none;
}

outline：設置 4 個邊框的樣式工具

　　outline-color 規定邊框的顏色ui

　　outline-style 規定邊框的樣式

　　outline-width 規定邊框的寬度

    overflow-y: auto;

overflow-y: 裁剪 div 元素中內容的左/右邊緣

　　auto 若是溢出框，則應該提供滾動機制

visible    不裁剪內容，可能會顯示在內容框以外
hidden    裁剪內容 - 不提供滾動機制
scroll    裁剪內容 - 提供滾動機制
auto    若是溢出框，則應該提供滾動機制
no-display    若是內容不適合內容框，則刪除整個框
no-content    若是內容不適合內容框，則隱藏整個內容

overflow-y: 參數

h3{
    font-family: "Microsoft YaHei";
    !important;
}

!important ：樣式表條目提高指定樣式規則的應用優先權

　　通說說法：!important 是最高優先級的 ‘!’就是強調的意思。important!

DOM

調用高德地圖api

<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=c93e1e293e5b1c3dc581f3ff633144d3&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Riding"></script>

搜索路徑

<div class="pageShow">
    <h3>搜索地址</h3>
    <input id="tipinput" placeholder="模糊地址搜索">
    <h3>搜索行車路徑</h3>
    <input id="star" placeholder="行車開始地址">
    <span>—&nbsp;—</span>
    <input id="end" placeholder="行車結束地址">
    <span>—&nbsp;—</span>
    <a id="car" href="javascript:void(0);">
        點擊搜索
    </a>

    <h3>搜索騎行路徑</h3>
    <input id="cStar" placeholder="騎行開始地址">
    <span>—&nbsp;—</span>
    <input id="cEnd" placeholder="騎行結束地址">
    <span>—&nbsp;—</span>
    <a id="riding" href="javascript:void(0);">
        點擊搜索
    </a>

    <h3>搜索步行路徑</h3>
    <input id="wStar" placeholder="步行開始地址">
    <span>—&nbsp;—</span>
    <input id="wEnd" placeholder="步行結束地址">
    <span>—&nbsp;—</span>
    <a id="walk" href="javascript:void(0);">
        點擊搜索
    </a>
    <div style="margin:20px 0;">
        <a id="box" href="javascript:void(0);">
            鼠標右鍵拖取選框放大地圖
        </a>
        <a id="meter" href="javascript:void(0);">
            測量距離
        </a>
    </div>
</div>

    <a id="car" href="javascript:void(0);">
        點擊搜索
    </a>

href="#"與href="javascript:void(0)"的區別

　　# 包含了一個位置信息，默認的錨是#top 也就是網頁的上端

　　而javascript:void(0), 僅僅表示一個死連接

　　在頁面很長的時候會使用 # 來定位頁面的具體位置，格式爲：# + id

　　若是你要定義一個死連接請使用 javascript:void(0)

高德地圖開放平臺：傳送門

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。