?index.html，body中引入全局api

<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'你的秘鑰',} </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script> <script src="//webapi.amap.com/ui/1.1/main.js"></script> <template><div><my-in-content><!-- 高德地圖 --><div id="container"></div><div id="details"><Card style="width:340px;height:280px"><div style="text-align:lef;"><p>經緯度：{{this.lnglat}}</p><br/><p>地址：{{this.address}}</p><br/><p>最近的路口：{{this.nearestJunction}}</p><br/><p>最近的路：{{this.nearestRoad}}</p><br/><p>最近的POI：{{this.nearestPOI}}</p><br/></div></Card></div><!-- 搜索 --><div id="search"><Input v-model="searchValue" placeholder="請輸入要搜索的位置" style="width: 300px" /><Button type="primary" @click="seachAddress">搜索</Button><Button style="margin-left:5px;" type="primary" @click="reporAddress">上報位置</Button></div></my-in-content></div> </template> <script> export default {name:'gdmap',data() {return {searchValue:'',gdmap: null,/* 當前位置 */thisPosition: {location: '',lng: '',lat: ''},/* 選取的位置 */chosePosition: {location: '',lng: '',lat: ''},/* 范圍圓的數據 */myCircle: {},/* 簽到圓對象 */circle: {},/* 編輯器對象 */circleEditor: null,/* 拖拽對象 */positionPickerObj: {},//經緯度lnglat:'',//地址address:'',//最近的路口nearestJunction:'',//最近的路nearestRoad:'',//最近的POInearestPOI:'',/* 當前城市編碼 */citycode: '020',//標記marker:[],}},created() {},mounted() {//地圖初始化this.gdmap = new AMap.Map('container', {resizeEnable: true,//是否監控地圖容器尺寸變化zoom: 15,//地圖顯示的縮放級別zooms: [3, 18],//地圖顯示的縮放級別范圍在PC上，默認為[3,18]，取值范圍[3-18]；viewMode: '2D',//默認為‘2D’，可選’3D’，選擇‘3D’會顯示 3D 地圖效果})//加載工具條this.addTool();//獲取當前位置this.thisLocation();},methods:{//工具條addTool () {AMap.plugin(['AMap.ToolBar'], () => {let toolbar = new AMap.ToolBar()this.gdmap.addControl(toolbar)})},//定位thisLocation () {this.gdmap.plugin('AMap.Geolocation', () => {let geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默認:truetimeout: 100, //超過10秒后停止定位，默認：無窮大maximumAge: 0, //定位結果緩存0毫秒，默認：0convert: true, //自動偏移坐標，偏移后的坐標為高德坐標，默認：trueshowButton: true, //顯示定位按鈕，默認：truebuttonPosition: 'RB', //定位按鈕?？课恢?#xff0c;默認：'LB'，左下角buttonOffset:new AMap.Pixel(10,20),showMarker: true, //定位成功后在定位到的位置顯示點標記，默認：trueshowCircle: true, //定位成功后用圓圈表示定位精度范圍，默認：truepanToLocation: true, //定位成功后將定位到的位置作為地圖中心點，默認：truezoomToAccuracy:true, //定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：false})this.gdmap.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', (data) => {console.log(data);//當前城市編碼this.citycode = data.addressComponent.cityCode;//經緯度this.thisPosition = data.position;//地址this.formattedAddress=data.formattedAddress;this.chosePosition = this.thisPosition;/* 畫圓 */this.cancelLocation()this.addCircle()/* 拖拽選址 */this.positionPicker();})AMap.event.addListener(geolocation, 'error', function (data) {alert('定位失敗');})})},/* 拖拽選址 */positionPicker () {AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {this.positionPickerObj = new PositionPicker({mode: 'dragMarker', // 設定為拖拽地圖模式，可選'dragMap'、'dragMarker'，默認為'dragMap'map: this.gdmap // 依賴地圖對象})this.positionPickerObj.on('success', (positionResult) => {console.log(positionResult,"positionResult");this.chosePosition = positionResult.position;//經緯度console.log("經緯度:"+positionResult.position);this.lnglat=positionResult.position;//地址console.log("地址:"+positionResult.address);this.address=positionResult.address;//最近的路口console.log("最近的路口:"+positionResult.nearestJunction);this.nearestJunction=positionResult.nearestJunction;//最近的路console.log("最近的路:"+positionResult.nearestRoad);this.nearestRoad=positionResult.nearestRoad;//最近的POIconsole.log("最近的POI:"+positionResult.nearestPOI);this.nearestPOI=positionResult.nearestPOI;/* 畫圓 */this.cancelLocation();this.addCircle();})this.positionPickerObj.start([this.chosePosition.lng, this.chosePosition.lat])})},/* 取消圓 */cancelLocation() {this.gdmap.remove(this.circle)if (this.circleEditor) {this.circleEditor.close()}},/* 畫圖 */addCircle() {this.myCircle = {center: [this.chosePosition.lng, this.chosePosition.lat], // 圓心位置radius: 50, // 半徑strokeColor: '#FFFF00', // 線顏色strokeOpacity: 0.2, // 線透明度strokeWeight: 1, // 線粗細度fillColor: '#222222', // 填充顏色fillOpacity: 0.2 // 填充透明度}this.circle = new AMap.Circle(this.myCircle)this.circle.setMap(this.gdmap)// 引入多邊形編輯器插件this.gdmap.plugin(['AMap.CircleEditor'], () => {// 實例化多邊形編輯器，傳入地圖實例和要進行編輯的多邊形實例this.circleEditor = new AMap.CircleEditor(this.gdmap, this.circle)// 開啟編輯模式this.circleEditor.open()//this.myCircle.radius = this.circle.Mg.radiusthis.circleEditor.on('adjust', (data) => {this.myCircle.radius = data.radius})this.circleEditor.on('move', (data) => {console.log('移動')this.chosePosition.lng = data.lnglat.lngthis.chosePosition.lat = data.lnglat.lat})})},//搜索seachAddress(){if(this.searchValue!=''){//清楚地圖上的覆蓋物this.gdmap.clearMap();console.log("搜索");this.gdmap.plugin('AMap.PlaceSearch', () => {let placeSearch = new AMap.PlaceSearch({// city 指定搜索所在城市，支持傳入格式有：城市名、citycode和adcodecity: '0797',map: this.gdmap});let that=this;placeSearch.search(this.searchValue, function (status, result) {// 查詢成功時，result即對應匹配的POI信息console.log(result)var pois = result.poiList.pois;for(var i = 0; i < pois.length; i++){var poi = pois[i];var marker = [];marker[i] = new AMap.Marker({position: poi.location, // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]title: poi.name});// 將創建的點標記添加到已有的地圖實例：that.gdmap.add(marker[i]);}that.gdmap.setFitView(); AMap.event.addListener(placeSearch,'markerClick',function(data){console.log(data);let result=data;//經緯度let lng=result.event.lnglat.lng;let lat=result.event.lnglat.lat;that.lnglat=lng+","+lat;//地址that.address=result.data.address;//最近路口that.nearestJunction='';//最近的路that.nearestRoad='';//最近的POIthat.nearestPOI='';})});})} },//位置上報reporAddress(){},} } </script> <style>#container {width:100%; height: 600px; }#search{z-index:999;position:absolute;left:100px;top:30px;opacity:0.8; }#details{z-index:999;position:absolute;right:0px;top:0px;opacity:0.8;} </style>

效果圖

總結

以上是生活随笔為你收集整理的vue使用高德地图API,定位，搜索，拖拽选址的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。