vue使用高德地图API,定位,搜索,拖拽选址
生活随笔
收集整理的這篇文章主要介紹了
vue使用高德地图API,定位,搜索,拖拽选址
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?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,定位,搜索,拖拽选址的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 批量修改图片后缀名
- 下一篇: vue+高德地图 点击地图获取经纬度和详