首先使用高德地圖api需要去官網(wǎng)申請 key ，跟著官網(wǎng)過流程就好，不多贅述

?

直接引入，使用申請好的key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key= 申請來的key "></script>

創(chuàng)建地圖

// css #container {width:100%; height: 100vh; } // html <div id="container"></div> // js var map = new AMap.Map('container');

使用幾個常用的工具：?

使用鷹眼，定位，比例尺，切換衛(wèi)星圖，路況和路網(wǎng)圖層

批量添加：

// 同時引入工具條插件，比例尺插件和鷹眼插件 AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.Geolocation', ], function(){// 在圖面添加工具條控件，放大縮小功能，還有更多選項， 左上角map.addControl(new AMap.ToolBar({position:"LT"}));// 在圖面添加比例尺控件，展示地圖在當(dāng)前層級和緯度下的比例尺 左下角map.addControl(new AMap.Scale());// 在圖面添加鷹眼控件，在地圖右下角顯示地圖的縮略圖 右下角，沒有打開map.addControl(new AMap.HawkEye({isOpen:false}));// 在圖面添加類別切換控件，實(shí)現(xiàn)默認(rèn)圖層與衛(wèi)星圖、實(shí)施交通圖層之間切換的控制 右上角map.addControl(new AMap.MapType());// 在圖面添加定位控件，用來獲取和展示用戶主機(jī)所在的經(jīng)緯度位置 右下角圓形控件map.addControl(new AMap.Geolocation()); });

?單個添加：

搜索和自動補(bǔ)全

// css #myPageTop {background: rgb(56, 56, 56,0.2);border-radius: 10px;position: fixed;top: 10px;left: calc(50% - 91px); }// html <div id="myPageTop"><table><tr><td><label>請輸入關(guān)鍵字：</label></td></tr><tr><td><input id="tipinput"/></td></tr></table> </div>// 引入提示數(shù)據(jù) <script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'755d02e49b26938914a932a492798009',} </script> // jsAMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){var auto = new AMap.AutoComplete({input: "tipinput"});var placeSearch = new AMap.PlaceSearch({map: map}); //構(gòu)造地點(diǎn)查詢類auto.on("select", select);//注冊監(jiān)聽，當(dāng)選中某條記錄時會觸發(fā)function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //關(guān)鍵字查詢查詢} });

高德api官網(wǎng)：高德開放平臺 | 高德地圖API (amap.com)?

總結(jié)

以上是生活随笔為你收集整理的高德地图基础控件使用 搜索定位等的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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