####功能簡述: 網頁版高德地圖開發,主要支持地圖選點(沒作導航),搜索選點.(功能相似微信與好友聊天中的選擇位置,發送位置,以下圖) css
###第一步:先成爲高德地圖的開發者(獲取高德地圖的key);獲取keyhtml
###第二步:引入高德地圖js文件web
<!-- 高德地圖 --> <script src="https://webapi.amap.com/maps?v=1.4.14&key=你申請到高德地圖開發者key&plugin=AMap.Driving"></script> <!-- UI組件庫 -->(這個看狀況引入,不要則不引入) <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
###第三部:po代碼typescript
(1) html部分的:api
<div class="map-container" v-if="showMapContainer"> <div class="map-nav"> <div class="cancel-btn" @click="cancelChooseAdress"> 取消 </div> <div class="map-title"> 位置 </div> <div class="confirm-btn" @click="confirmAdress"> 肯定 </div> <div id="pickerBox"> <input id="pickerInput" placeholder="輸入關鍵字選取地點" /> <div id="poiInfo"></div> </div> </div> <div id="container" style="width:100%;height:8rem;" class="map" tabindex="0"></div> <div class="adress"> <div style="display:none"> <div> <div class='title'>選擇模式</div> <input type='radio' name='mode' value='dragMap' checked>拖拽地圖模式</input> </br> <input type='radio' name='mode' value='dragMarker'>拖拽Marker模式</input> </div> <div> <button id='start'>開始選點</button> <button id='stop'>關閉選點</button> </div> </div> <div class="adress-info"> <div class='title'>選址結果</div> <div class='c'> <span class="adress-info-label">經緯度:</span> <span id='lnglat' v-model="addressInfo.position"></span> </div> <div class='c'> <span class="adress-info-label">地址:</span> <span id='address'></span> </div> <div class='c'> <span class="adress-info-label">最近的路口:</span> <span id='nearestJunction'></span> </div> <div class='c'> <span class="adress-info-label">最近的路:</span> <span id='nearestRoad'></span> </div> <div class='c'> <span class="adress-info-label">最近的POI:</span> <span id='nearestPOI'></span> </div> </div> </div> </div>
(2) ts部分的(有一些變量沒有放,你們本身補充哈.注意:::::declare const AMapUI: any; declare const AMap: any;這兩句在typescript中必須寫,不寫功能雖然正常,可是會報語法錯誤 ):微信
declare const AMapUI: any; declare const AMap: any; getLocation() { var self = this AMapUI.loadUI(['misc/PositionPicker', 'misc/PoiPicker'], function (PositionPicker: any, PoiPicker: any) { var poiPicker = new PoiPicker({ input: 'pickerInput' //輸入框的id }); var map = new AMap.Map('container', { zoom: 15, //縮放層級 center: self.postionArray //[121.596739, 31.194049],//當前地圖中心點 }) var positionPicker = new PositionPicker({ mode: 'dragMap', map: map, }); positionPicker.on('success', function (positionResult: any) { document.getElementById('lnglat')!.innerHTML = positionResult.position; document.getElementById('address')!.innerHTML = positionResult.address; document.getElementById('nearestJunction')!.innerHTML = positionResult.nearestJunction; document.getElementById('nearestRoad')!.innerHTML = positionResult.nearestRoad; document.getElementById('nearestPOI')!.innerHTML = positionResult.nearestPOI; self.addressInfo.address = positionResult.address; self.addressInfo.position = positionResult.position; }); positionPicker.on('fail', function (positionResult: any) { document.getElementById('lnglat')!.innerHTML = ' '; document.getElementById('address')!.innerHTML = ' '; document.getElementById('nearestJunction')!.innerHTML = ' '; document.getElementById('nearestRoad')!.innerHTML = ' '; document.getElementById('nearestPOI')!.innerHTML = ' '; self.addressInfo.address = positionResult.address; self.addressInfo.position = positionResult.position; }); positionPicker.start(); map.panBy(0, 1); //初始化poiPicker poiPickerReady(poiPicker); // 搜索框 function poiPickerReady(poiPicker: any) { (window as any).poiPicker = poiPicker; var marker = new AMap.Marker(); var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -20) }); //選取了某個POI poiPicker.on('poiPicked', function (poiResult: any) { var source = poiResult.source, poi = poiResult.item, info = { source: source, id: poi.id, name: poi.name, location: poi.location.toString(), address: poi.address }; infoWindow.setMap(map); marker.setPosition(poi.location); infoWindow.setPosition(poi.location); infoWindow.open(map, marker.getPosition()); map.setCenter(marker.getPosition()); }); } }); }
(3)css部分:post
.map-container { width: 100%; overflow: scroll; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; z-index: 10; overflow: hidden; .map-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0.2rem; padding-bottom: 0; background-color: #EDEDED; height: 2.5rem; .map-title { font-size: 0.4rem; height: 0.7rem; font-weight: bold; } .confirm-btn { background-color: #57BE69; color: #fff; padding: 0.1rem 0.2rem; border-radius: 4px; font-size: 0.377rem; } .cancel-btn { font-size: 0.377rem; padding: 0.1rem 0.2rem; border-radius: 4px; } } }
###最後在po一張搜索的圖 flex
####整個複製我也不知道能不能跑起來,有什麼問題也隨時能夠交流.你如果噴我,很差意思,你是小狗.ui