小记Vue2中百度地图的使用

近期项目需求相关地图限定使用百度地图，功能比较简单。为了防止忘记特此发帖帮助记忆一下。效果图如下：

接下来我将分步骤演示一下。
（1）引入地图

npm i vue-baidu-map --s

安装完依赖后在main.js中全局引入地图使用

//百度地图
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {/* 需要注册百度地图开发者来获取你的ak */ak: '你的ak'
})

(2) 实现过程
首先是在template中使用标签进行渲染

<template><div class="map-container relative"><div class="status-bar"><div class="status-item" v-for="(item, index) in statusArr" :key="index"><img :src="item.icon" />{{ item.text }}</div></div>
<!--      :map-style="mapStyle"--><baidu-map class="map" :center="markerPoint" :scroll-wheel-zoom="true" :zoom="16" :mapClick="false" @ready="handler" ><bm-marker v-for="marker in deviceList" :icon="markerIcon(marker)" :key="marker.id" :position="{ lng: +marker.longitude, lat: +marker.latitude }" @mouseover="infoWindowOpen(marker)" @mouseout="infoWindowClose"></bm-marker><bm-info-window :show="show" :offset="{width: -20, height: 10}" :position="{ lng: +marker.longitude, lat: +marker.latitude }"><div><div class="info-title">详情</div><div class="info-content"><div>回收机编号：<span>{{ marker.oid }}</span></div><div>回收机名称：<span>{{ marker.name }}</span></div><div>地址：<span>{{ marker.address }}</span></div><div>负责人：<span>{{ marker.manager }}</span></div><div>电话：<span>{{ marker.managerPhone }}</span></div></div></div></bm-info-window></baidu-map></div>
</template>

接下来是js部分：

<script>import { getDeviceMap } from '@/api'import kuaiman from '../assets/imgs/kuaiman-icon.png'import weiman from '../assets/imgs/weiman-icon.png'import yiman from '../assets/imgs/yiman-icon.png'const styleJson = require('./mapStyle.json')export default {data() {return {statusArr: [{icon: weiman,text: '未满'},{icon: kuaiman,text: '快满'},{icon: yiman,text: '已满'}],marker: {},deviceList: [],markerPoint:{ lng: 120.90102, lat: 31.986646 },show:false,// mapStyle: {    //自定义地图样式//   // styleJson// }}},created() {getDeviceMap({}).then((res) => {this.deviceList= res.data})},methods: {handler({BMap, map}) {},infoWindowClose () {this.show = false},infoWindowOpen (marker) {this.marker = Object.assign(marker)this.show = true},markerIcon(marker) {let img = marker.over == 2 ? kuaiman : marker.over == 1 ? yiman : weimanreturn { url: img,  size: { width: 28, height: 42 }}}}}
</script>

以及一些样式的修改：

<style lang="less" scoped>.map-container {width: 100%;height: calc(100vh - 124px);.map {width: 100%;height: 100%;}}/deep/ .info-title {color: #333;font-size: 16px;font-weight: 600;line-height: 48px;width: 100%;border-bottom: 1px solid #dedede;background: #fff;text-indent: 20px;}/deep/ .info-content {min-height: 120px;background: #fff;color: #333;font-size: 14px;padding: 20px;div {line-height: 2;color: #666;span {color: #333;}}}/deep/ .BMap_bottom {display: none;}/deep/ .BMap_pop {> div,> img:nth-child(10) {display: none;overflow: unset;}> div:nth-child(9) {display: block;overflow: unset;width: 340px !important;}> div:nth-child(8){/*display: block;*/}.BMap_top {display: none;}.BMap_center {background: transparent;border: none;position: sticky !important;height: 100%;}}/deep/ .BMap_bubble_content{background: rgba(0, 0, 0, .5);border-radius: 8px;}/deep/ .BMap_shadow {display: none;}.status-bar {position: absolute;display: flex;left: 20px;top: 10px;z-index: 99;width: 400px;justify-content: space-between;padding: 7px 20px;box-sizing: border-box;height: 44px;box-shadow: 0px 2px 3px 0px rgba(51, 51, 51, 0.22);border-radius: 4px;background: #fff;opacity: .8;.status-item {font-size: 14px;color: #010101;img {width: 18px;height: 30px;vertical-align: middle;margin-right: 6px;}}}
</style>

至此地图上显示markers就实现了。此外再记录一下在地图上点击地点获取具体的经纬度信息和位置信息的功能实现。代码如下：

<el-dialog title="定位设置" :visible.sync="mapVisible" width="60%" id="mapDialog" :close-on-click-modal="false"><div class="map-container"><baidu-map  class="map" :center="center" :zoom="zoom" @ready="handler":scroll-wheel-zoom="true"@click="clickEvent":mapClick="false"ak="ZzYlvuckB72Cto3IoxEFeN7SUBt4vh7F"><bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation><el-input v-model="keyword" @focus="showSearch = true" size="mini" class="search-input" placeholder="请输入关键词"></el-input><bm-local-search v-show="showSearch" class="search" :keyword="keyword" :auto-viewport="true" :location="center" @infohtmlset="handleSelect"></bm-local-search><bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation><bm-view :style="{width:'100%',height: this.clientHeight+'px',flex: 1,marginBottom:'-30px'}"></bm-view></baidu-map></div><div class="demo-input-suffix" ><el-link :underline="false" type="info">经度：</el-link><el-input  class="lineinput"  style="width:120px" size="mini" v-model.number="locData.longitude"></el-input><el-link :underline="false" type="info">维度：</el-link><el-input  class="lineinput"  style="width:120px" size="mini" v-model.number="locData.latitude"></el-input><el-link :underline="false" type="info">地址：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model="locData.address"></el-input></div><div slot="footer" class="dialog-footer"><el-button size="small" @click.native="mapVisible = false">取消</el-button><el-button type="primary" size="small" @click.native="findlocation">保存</el-button></div></el-dialog>

js代码实现如下：

methods: {handleSelect(e) {this.locData.address = e.addressthis.locData.longitude = e.point.lng;this.locData.latitude = e.point.lat;},handler ({BMap, map}) {// 自动获取当前设备位置并设置marker// let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；// let geolocation = new BMap.Geolocation();// geolocation.getCurrentPosition(function(r){//   _this.center = {lng: r.longitude, lat: r.latitude};        // 设置center属性值//   _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};      // 自定义覆盖物//   _this.initLocation = true;// },{enableHighAccuracy: true})window.map = map;window.Bmap = BMap;},//定位成功回调getLoctionSuccess(point, AddressComponent, marker){map.clearOverlays();let Icon_0 = new BMap.Icon("icon/map_marker_check.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});let myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});map.addOverlay(myMarker);this.locData.longitude = point.point.lng;this.locData.latitude = point.point.lat;},findlocation(){this.form.lngLat = String(this.locData.longitude) + ',' + String(this.locData.latitude)this.form.longitude = this.locData.longitudethis.form.latitude = this.locData.latitudethis.form.address = this.locData.addressthis.mapVisible = false},mapShow(){this.mapVisible = true},//点击地图监听clickEvent(e){this.keyword = ''this.showSearch = falsemap.clearOverlays();let Icon_0 = new BMap.Icon(makerIcon, new BMap.Size(32, 32), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});let myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});map.addOverlay(myMarker);//用所定位的经纬度查找所在地省市街道等信息let point = new BMap.Point(e.point.lng, e.point.lat);let gc = new BMap.Geocoder();let _this = this;gc.getLocation(point, function (rs) {_this.locData.address = rs.address;});this.locData.longitude = e.point.lng;this.locData.latitude = e.point.lat;},
}

以及页面上一些样式细节代码如下：

<style scoped lang="less">.search-input {width: 240px;position: absolute;right: 20px;top: 14px;z-index: 99;}.search {width: 239px;position: absolute;z-index: 99;top: 40px;right: 20px;max-height: 400px;overflow: scroll;background: #fff;/deep/ div {border: none !important;}/deep/ a {display: none !important;}}.map-container {height: 450px;.map {height: 100%;position: relative;}}/deep/ .BMap_cpyCtrl .BMap_noprint .anchorBL {display: none;}/deep/ .citylist_popup_main .city_content_top {border-bottom: none;}/deep/ .BMap_bubble_title {a {display: none !important;}}
</style>

至此在vue项目中百度地图的简单使用就实现完成了。新手发帖，内容空洞，多多包涵~
在此祝大家新年快乐！虎虎生威！

小记Vue2中百度地图的使用相关推荐

vue2实现百度地图定位
用的是vue2的地图定位插件 https://dafrok.github.io/vue-baidu-map/#/zh/control/city-list 1.首先肯定是先下载了 npm i vue-b ...
vue中百度地图使用及自定义点聚合样式
百度地图使用及点聚合功能由于后台固定了百度地图,百度地图和高德地图经纬度转换有次数限制,不能满足项目的正常运行,所以切换了百度地图,下面对使用中遇到的问题进行记录: 安装及使用百度地图: npm i ...
js中百度地图API获取本地搜索全部结果自定义显示效果
最近碰到一个关于百度地图api的问题: 1.首先我需要获取到一个本地搜索的全部结果: 2.然后需要对获取的结果信息进行读取以及对这些信息的个性化展示大致操作如下,首先通过result.getNumP ...
震惊——JS中百度地图开放平台API尽然是这样使用
百度地图js--API使用基本使用引用百度API资源   <script type="text/jav ...
深入毛细血管供能细节规划，在未来城市中百度地图扮演了何种角色？
在一个城市的日常生活中,出行体验可谓是决定了生活体验的重要因素:交通是否拥堵.公共交通设施分布是否合理.停车位好不好找--我们会发现,这些关乎日常出行是否通畅的小细节,其实都隶属于城市发展规划的一部分 ...
android中百度地图的使用（一）
因为公司主要是做旅游类app的,所以对地图的使用是比较频繁的,之前做过图吧地图,图吧地图可以说是地图届比较老的了,但是相对于开发来说用的比较少,这个有时间会总结一下.现在先开始我们的百度地图之旅吧. ...
前端vue3项目中百度地图的使用api及实例
目录一.使用百度地图的准备工作? 二.百度地图的简单Demo 三.百度地图的常用api有哪些? 1.百度地图的类型? 2.百度地图控件一.使用百度地图的准备工作? 1.先注册百度账号 --> ...
vue 项目中百度地图 API 使用流程
文章目录一.在百度地图开放平台注册账号并登录.认证二.创建 ak 三.项目使用四.丰富的功能一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...
Vue中百度地图（vue-baidu-map）的使用
1.开始 vue-map-baidu:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 百度地图开发者平台申请密钥详见: h ...

小记Vue2中百度地图的使用

小记Vue2中百度地图的使用相关推荐

最新文章

热门文章