百度地图地址查询经纬度插件vue-baidu-map

效果 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: "", // 地区搜索的信息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事件：在你需要二次开发或手动控制其子组件，可以使用在此事件中使用返回的 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() 类进行地址解析// 创建地址解析器的实例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相关推荐

网站调用百度地图根据地址查询经纬度
百度地图API简单应用-根据地址查询经纬度简单几步注册获得一个ak,就能直接调用(PS:好像1.3版本前的无需注册获取ak,就能直接调用api). 闲话不多,下面就直接给大家介绍下,具体要怎么调用百 ...
根据城市的三字代码查询经纬度_百度地图API简单应用——1.根据地址查询经纬度...
这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的.只要简单几步注册下,就可以获得一个Key,就能直接调用(P ...
java 百度地图demo,百度地图api demo 根据地址查询经纬度
根据地址查询经纬度要查询的地址: 查询结果(经纬度): style="position: absolute; margin-top:30px; width: 730px; height: ...
根据两个经纬度点调用百度地图应用查询路线适用android或者ios中及网页浏览(手机网页同样适用)
Intent intent = null;try {// 如果有安装百度地图就启动百度地图StringBuffer sbs = new StringBuffer();sbs.append(" ...
百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
利用百度地图，根据经纬度找到对应的具体街道
利用百度地图,根据经纬度找到对应的具体街道最近在做一个数据处理的工作,偶然碰到了要根据经纬度匹配对应的地点.因为百度地图和真实的地理信息比较有一点的差距,于是可以先对数据进行一些处理. 下面上代码 ...
qichacha/知乎/国家统计局最新4级地区划/百度地图API获取经纬度/Google play app评论等分数据爬取
1.企查查数据抓取 1.1 关键公司LOGO # -*-coding:utf-8-*-import pandas as pd import requests import json import ra ...
html根据地点名称查坐标,根据地址查询经纬度Js
根据地址查询经纬度要查询的地址:查询结果(经纬度): var map = new BMap.Map("container"); map.centerAndZoom("郑 ...

百度地图地址查询经纬度插件vue-baidu-map

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

组件使用

组件 queryBaidu

百度地图地址查询经纬度插件vue-baidu-map相关推荐

最新文章

热门文章

百度地图 地址查询经纬度 插件vue-baidu-map

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

组件使用

组件 queryBaidu

百度地图 地址查询经纬度 插件vue-baidu-map相关推荐

最新文章

热门文章

百度地图地址查询经纬度插件vue-baidu-map

百度地图地址查询经纬度插件vue-baidu-map相关推荐