VUE使用百度地图插件

实现功能
百度地图的使用
相关代码片段

实现功能

需求: 使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索

百度地图的使用

参考
Vue Baidu Map手册
百度地图API

相关代码片段

//html 地图弹框显示
<el-dialog title="地图" :visible.sync="dialogBaiduMap" width="60%"><div id="map-wrap" class="map-maker-wrapper"><baidu-map ak="3isqLYGym4Pz60BiOY4NZyLXVdxAMx6H"class="map-wrap":center="mapCenter":zoom="mapZoom"@click="getLocation":scroll-wheel-zoom="true"@ready="mapHandler"><bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation><!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list> --><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":showAddressBar="true":autoLocation="true"></bm-geolocation></baidu-map><div class="search-wrap"><div class="search_box"><input class="search-input" type="text" v-model="keyword"  @input="autoSearch"/><el-button class="search-button" size="small" type="info" plain icon="el-icon-search" @click="handleSearch"></el-button></div><!-- 检索结果 --><div v-show="showResultFlag" class="search-result"><div v-for="(item, index) in searchResult" class="item" :key="index" @click="handleSelect(item)"><p class="title">{{ item.title }}</p><!-- <p class="address">{{ item.address }}</p> --></div></div></div></div><div class="info"><span>详细地址</span><el-input v-model="businessDetail.address"></el-input><div v-if="!isChangeBusinessDetail"><span>经度: </span> {{businessDetail.longitude}},<span>纬度: </span> {{businessDetail.latitude}}<i class="el-icon-edit" @click="changeBusinessDetail" style="color:#1890ff;font-size:16px;margin-left:20px;"></i></div><div v-if="isChangeBusinessDetail">经度: <el-input v-model="businessDetail.longitude" class="input_box"></el-input>纬度: <el-input v-model="businessDetail.latitude" class="input_box"></el-input><el-button size="small" type="info" @click="cancelBusinessDetail">取消</el-button><el-button size="small" type="primary" @click="sureBusinessDetail">保存</el-button></div></div><div slot="footer" class="dialog-footer"><el-button size="small" type="primary" @click="dialogBaiduMap = false">确 定</el-button></div></el-dialog>

//局部引用百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmLocalSearch, BmNavigation, BmGeolocation, BmCityList } from 'vue-baidu-map'components:{BaiduMap,BmLocalSearch,  //地区检索BmNavigation,  //缩放BmGeolocation,  //定位BmCityList  //城市列表},

mapHandler({BMap, map}){this.BMap = BMapthis.map = mapmap.clearOverlays() //清除地图上所有覆盖物let lng = this.businessDetail.longitudelet lat = this.businessDetail.latitudemap.addOverlay(new BMap.Marker({ lng, lat }))
},//在地图上选择区域  click事件
getLocation(e) {//设置经度this.businessDetail.longitude = e.point.lng//设置纬度this.businessDetail.latitude = e.point.lat//百度地图类let BMapGL = this.BMap//地图对象let map = this.map//清除地图上所有的覆盖物(保证每次点击只有一个标记)map.clearOverlays()//创建定位标记let marker = new BMapGL.Marker(new BMapGL.Point(e.point.lng, e.point.lat))//将标记添加到地图上map.addOverlay(marker)//创建坐标解析对象let geoc = new BMapGL.Geocoder()//解析当前的坐标成地址geoc.getLocation(e.point, (rs) => {//获取地址对象let addressComp = rs.addressComponents//拼接出详细地址this.businessDetail.address =addressComp.province +addressComp.city +addressComp.district +addressComp.street +addressComp.streetNumber})},//通过经纬度定点, 然后创建坐标解析对象解析当前的坐标成地址
setLocation() {let BMapGL = this.BMaplet map = this.mapmap.clearOverlays()let point = new BMapGL.Point(this.businessDetail.longitude,this.businessDetail.latitude)let marker = new BMapGL.Marker(point)map.addOverlay(marker)let geoc = new BMapGL.Geocoder()geoc.getLocation(point, (rs) => {let addressComp = rs.addressComponentsthis.businessDetail.address =addressComp.province +addressComp.city +addressComp.district +addressComp.street +addressComp.streetNumber})
},//手动搜索地址, 出现一串下拉地址
handleSearch() {let self = thisself.showResultFlag = trueself.selectInfo = Object.assign({}, defaultInfo)let local = new this.BMap.LocalSearch(this.map, {renderOptions: {map: this.map,selectFirstResult: false},onSearchComplete: function (res) {if (res && res.Kr) {self.searchResult = [...res.Kr]}}})local.search(this.keyword)
},//选中一个地址, 在地图上显示
handleSelect(item) {let self = thislet title = item.titlelet { lng, lat } = item.marker.pointlet point = new this.BMap.Point(lng, lat)let geoc = new this.BMap.Geocoder()geoc.getLocation(point, function (res) {let addString =res.addressComponents.province + res.addressComponents.city + res.addressComponents.district + titleself.showResultFlag = falseself.keyword = addStringself.map.clearOverlays() //清除地图上所有覆盖物self.map.addOverlay(new self.BMap.Marker({ lng, lat }))self.mapCenter.lng = lngself.mapCenter.lat = latself.mapZoom = 15})
},

VUE使用百度地图插件相关推荐

Vue的百度地图插件尝试
百度地图插件安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引 ...
vue集成百度地图(含搜索框获取经纬度)
vue-baidu-map文档地址 https://dafrok.github.io/vue-baidu-map/#/zh/index 第一步:vue下载百度地图插件 npm install vue- ...
mysql 百度地图插件_GitHub - huizhong/grafana-baidumap-panel: Grafana 百度地图插件
Baidumap Panel Plugin for Grafana Grafana的百度地图插件,基于WorldMap修改.主要的可视化功能有:更换AK.添加/删除控件.更换主题.更改地图级别,测距工 ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
vue自定义百度地图弹窗
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=& ...

VUE使用百度地图插件

VUE使用百度地图插件

实现功能

百度地图的使用

相关代码片段

VUE使用百度地图插件相关推荐

最新文章

热门文章