####功能简述: 网页版高德地图开发,主要支持地图选点(没做导航),搜索选点.(功能类似微信与好友聊天中的选择位置,发送位置,如下图) 
###第一步:先成为高德地图的开发者(获取高德地图的key);获取key
###第二步:引入高德地图js文件
1 <!-- 高德地图 --> 2 <script src="https://webapi.amap.com/maps?v=1.4.14&key=你申请到高德地图开发者key&plugin=AMap.Driving"></script> 3 <!-- UI组件库 -->(这个看情况引入,不要则不引入) 4 <script src="https://my.oschina.net//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
###第三部:po代码
(1) html部分的:
1<div class="map-container" v-if="showMapContainer"> 2 <div class="map-nav"> 3 <div class="cancel-btn" @click="cancelChooseAdress"> 取消 </div> 4 <div class="map-title"> 位置 </div> 5 <div class="confirm-btn" @click="confirmAdress"> 确定 </div> 6 <div id="pickerBox"> 7 <input id="pickerInput" placeholder="输入关键字选取地点" /> 8 <div id="poiInfo"></div> 9 </div> 10 </div> 11 <div id="container" style="width:100%;height:8rem;" class="map" tabindex="0"></div> 12 13 <div class="adress"> 14 <div style="display:none"> 15 <div> 16 <div class='title'>选择模式</div> 17 <input type='radio' name='mode' value='dragMap' checked>拖拽地图模式</input> 18 </br> 19 <input type='radio' name='mode' value='dragMarker'>拖拽Marker模式</input> 20 </div> 21 <div> 22 <button id='start'>开始选点</button> 23 <button id='stop'>关闭选点</button> 24 </div> 25 </div> 26 <div class="adress-info"> 27 <div class='title'>选址结果</div> 28 <div class='c'> 29 <span class="adress-info-label">经纬度:</span> 30 <span id='lnglat' v-model="addressInfo.position"></span> 31 </div> 32 <div class='c'> 33 <span class="adress-info-label">地址:</span> 34 <span id='address'></span> 35 </div> 36 <div class='c'> 37 <span class="adress-info-label">最近的路口:</span> 38 <span id='nearestJunction'></span> 39 </div> 40 <div class='c'> 41 <span class="adress-info-label">最近的路:</span> 42 <span id='nearestRoad'></span> 43 </div> 44 <div class='c'> 45 <span class="adress-info-label">最近的POI:</span> 46 <span id='nearestPOI'></span> 47 </div> 48 </div> 49 </div> 50 </div>
(2) ts部分的(有一些变量没有放,大家自己补充哈.注意:::::declare const AMapUI: any; declare const AMap: any;这两句在typescript中必须写,不写功能虽然正常,但是会报语法错误 ):
1declare const AMapUI: any; 2declare const AMap: any; 3 4getLocation() { 5 var self = this 6 AMapUI.loadUI(['misc/PositionPicker', 'misc/PoiPicker'], function (PositionPicker: any, PoiPicker: any) { 7 8 var poiPicker = new PoiPicker({ 9 input: 'pickerInput' //输入框的id 10 }); 11 12 var map = new AMap.Map('container', { 13 zoom: 15, //缩放层级 14 center: self.postionArray //[121.596739, 31.194049],//当前地图中心点 15 }) 16 17 var positionPicker = new PositionPicker({ 18 mode: 'dragMap', 19 map: map, 20 }); 21 22 positionPicker.on('success', function (positionResult: any) { 23 document.getElementById('lnglat')!.innerHTML = positionResult.position; 24 document.getElementById('address')!.innerHTML = positionResult.address; 25 document.getElementById('nearestJunction')!.innerHTML = positionResult.nearestJunction; 26 document.getElementById('nearestRoad')!.innerHTML = positionResult.nearestRoad; 27 document.getElementById('nearestPOI')!.innerHTML = positionResult.nearestPOI; 28 29 self.addressInfo.address = positionResult.address; 30 self.addressInfo.position = positionResult.position; 31 }); 32 positionPicker.on('fail', function (positionResult: any) { 33 document.getElementById('lnglat')!.innerHTML = ' '; 34 document.getElementById('address')!.innerHTML = ' '; 35 document.getElementById('nearestJunction')!.innerHTML = ' '; 36 document.getElementById('nearestRoad')!.innerHTML = ' '; 37 document.getElementById('nearestPOI')!.innerHTML = ' '; 38 39 self.addressInfo.address = positionResult.address; 40 self.addressInfo.position = positionResult.position; 41 }); 42 positionPicker.start(); 43 map.panBy(0, 1); 44 45 46 //初始化poiPicker 47 poiPickerReady(poiPicker); 48 // 搜索框 49 function poiPickerReady(poiPicker: any) { 50 (window as any).poiPicker = poiPicker; 51 var marker = new AMap.Marker(); 52 var infoWindow = new AMap.InfoWindow({ 53 offset: new AMap.Pixel(0, -20) 54 }); 55 //选取了某个POI 56 poiPicker.on('poiPicked', function (poiResult: any) { 57 var source = poiResult.source, 58 poi = poiResult.item, 59 info = { 60 source: source, 61 id: poi.id, 62 name: poi.name, 63 location: poi.location.toString(), 64 address: poi.address 65 }; 66 infoWindow.setMap(map); 67 marker.setPosition(poi.location); 68 infoWindow.setPosition(poi.location); 69 infoWindow.open(map, marker.getPosition()); 70 map.setCenter(marker.getPosition()); 71 }); 72 } 73 }); 74 } 75
(3)css部分:
1.map-container { 2 width: 100%; 3 overflow: scroll; 4 height: 100%; 5 position: absolute; 6 top: 0; 7 left: 0; 8 background-color: #fff; 9 z-index: 10; 10 overflow: hidden; 11 12 .map-nav { 13 display: flex; 14 justify-content: space-between; 15 align-items: center; 16 flex-wrap: wrap; 17 padding: 0.2rem; 18 padding-bottom: 0; 19 background-color: #EDEDED; 20 height: 2.5rem; 21 22 .map-title { 23 font-size: 0.4rem; 24 height: 0.7rem; 25 font-weight: bold; 26 } 27 28 .confirm-btn { 29 background-color: #57BE69; 30 color: #fff; 31 padding: 0.1rem 0.2rem; 32 border-radius: 4px; 33 font-size: 0.377rem; 34 } 35 36 .cancel-btn { 37 font-size: 0.377rem; 38 padding: 0.1rem 0.2rem; 39 border-radius: 4px; 40 } 41 } 42 } 43 44
###最后在po一张搜索的图 
####整个复制我也不知道能不能跑起来,有什么问题也随时可以交流.你若是喷我,不好意思,你是小狗.