效果 npm install vue-baidu-map --save

組件使用

<queryBaidu:visible.sync="visible1"v-if="visible1"@onSuccess="getLatitude"></queryBaidu>

組件 queryBaidu

<template><el-dialogtitle="查詢經緯度":visible.sync="visible"width="900px"v-if="visible"@close="closeDialog"append-to-body:before-close="handleCloseBindWarnStandard"><div style="overflow: hidden;"><div class="mb10" v-if="addressBox[1]"><span style="margin-right:40px">詳細地址：{{ addressBox[1] }}</span><span>經緯度：{{addressBox[0].lng + " " + addressBox[0].lat}}</span></div><baidu-map:style="mapStyle"ak="你的密鑰":map-click="false":center="center":zoom="zoom":scroll-wheel-zoom="true"@click="getClickInfo"@moving="syncCenterAndZoom"@moveend="syncCenterAndZoom"@ready="onBaiduMapReady"@zoomend="syncCenterAndZoom"><bm-view style="width: 100%; height: 100%;" /><bm-marker:position="{ lng: center.lng, lat: center.lat }":dragging="true"animation="BMAP_ANIMATION_BOUNCE"/><bm-control :offset="{ width: '10px', height: '10px' }"><bm-auto-completev-model="keyword":sug-style="{ zIndex: 999999 }"><el-inputv-model="keyword"type="text"placeholder="請輸入地名關鍵字"clearable><islot="prefix"class="el-input__icon el-icon-search"/></el-input></bm-auto-complete></bm-control><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT"show-address-barauto-location/><bm-local-search:keyword="keyword":auto-viewport="true":panel="false"/></baidu-map></div><span slot="footer" class="dialog-footer"><el-button icon="el-icon-close" @click="cancel">取 消</el-button><el-button icon="el-icon-place" type="primary" @click="confirm">確 定</el-button></span></el-dialog> </template><script> import {BaiduMap,BmControl,BmView,BmAutoComplete,BmLocalSearch,BmMarker,BmGeolocation } from "vue-baidu-map"; export default {components: {BaiduMap,BmControl,BmView,BmAutoComplete,BmLocalSearch,BmMarker,BmGeolocation},props: {visible: {type: Boolean,default: false},// 在子組件中使用 props 選項去接收來自父組件傳遞過來的數據mapHeight: {type: Number,default: 450},title: {type: String,default: "選擇目標位置"},width: {type: [Number, String],default: "85%"},height: {type: [Number, String],default: "80%"}},data() {return {addressBox: [{}, ""],BMap: null, // 地圖組件是否就緒showMapComponent: this.dialogVisible,keyword: "", // 地區(qū)搜索的信息mapStyle: {width: "100%",height: this.mapHeight + "px"},center: { lng: 120.054791, lat: 29.296604 },choosedLocation: { province: "", city: "", district: "", addr: "" },zoom: 15,hosName: ""};},watch: {visible: function(currentValue) {this.showMapComponent = currentValue;if (currentValue) {this.keyword = "";}}},methods: {// ready事件：在你需要二次開發(fā)或手動控制其子組件，可以使用在此事件中使用返回的 BMap 類和 map 實例進行手動控制onBaiduMapReady(e) {// console.log('返回BMap類和map實例', e)const that = this;this.BMap = e.BMap;if (this.BMap) {// 獲取定位地址信息并賦值給聲明變量// Geolocation 對象的 getCurrentPosition()、watchPosition()、clearWatch() 方法詳解 ：https://blog.csdn.net/zyz00000000/article/details/82774543const geolocation = new this.BMap.Geolocation();// 通過 getCurrentPosition() 方法：獲取當前的位置信息geolocation.getCurrentPosition(res => {console.log("返回詳細地址和經緯度", res);const { lng, lat } = res.point;const {province,city,district,street,street_number} = res.address;that.center = { lng, lat };that.choosedLocation = {province,city,district,addr: street + street_number,lng,lat};});}},/** ** 地圖點擊事件。*/getClickInfo(e) {// 調整地圖中心位置this.center.lng = e.point.lng;this.center.lat = e.point.lat;// 此時已經可以獲取到BMap類if (this.BMap) {const that = this;// Geocoder() 類進行地址解析// 創(chuàng)建地址解析器的實例const geoCoder = new this.BMap.Geocoder();// getLocation() 類--利用坐標獲取地址的詳細信息// getPoint() 類--獲取位置對應的坐標geoCoder.getLocation(e.point, function(res) {console.log("獲取經緯度", e.point, "獲取詳細地址", res);// that.addressBox=[{lng:e.point.lng,lat:e.point.lat},res.address]// 百度地圖輸出 高德 的經緯度that.addressBox = [that.$commond.bMapTransQQMap(e.point.lng, e.point.lat),res.address];const addrComponent = res.addressComponents;const surroundingPois = res.surroundingPois;const province = addrComponent.province;const city = addrComponent.city;const district = addrComponent.district;let addr = addrComponent.street;if (surroundingPois.length > 0 &&surroundingPois[0].title) {if (addr) {addr += `-${surroundingPois[0].title}`;} else {addr += `${surroundingPois[0].title}`;}} else {addr += addrComponent.streetNumber;}that.choosedLocation = {province,city,district,addr,...that.center};});}},syncCenterAndZoom(e) {// 返回地圖當前的縮放級別this.zoom = e.target.getZoom();},/** ** 確認*/confirm: function() {// this.$emit("onSuccess",{lnBox:document.getElementById("result_").value,address:this.hosName})if (this.addressBox[1] == "") {this.$commond.warningMessage("請選取地址！");return false;}this.$emit("onSuccess", this.addressBox);this.$emit("update:visible", false);// this.showMapComponent = false// this.$emit('map-confirm', this.choosedLocation)},/** ** 取消*/cancel: function() {this.$emit("update:visible", false);// this.showMapComponent = false// this.$emit('cancel', this.showMapComponent)},closeDialog() {this.$emit("update:visible", false);// return false},onSuccess() {this.$emit("update:visible", false);},handleCloseBindWarnStandard() {this.$emit("update:visible", false);}} }; </script> <style scoped> .el-dialog__body {padding: 5px !important; } </style>

總結

以上是生活随笔為你收集整理的百度地图 地址查询经纬度 插件vue-baidu-map的全部內容，希望文章能夠幫你解決所遇到的問題。

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