devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小记Vue2中百度地图的使用_vue2项目引入百度地图

作者：我家小花儿 | 2024-02-18 18:41:36

赞

踩

vue2项目引入百度地图

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

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

npm i vue-baidu-map --s

  • 1

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

//百度地图
import BaiduMap from 'vue-baidu-map'

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

(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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

接下来是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 : weiman
        return { url: img,  size: { width: 28, height: 42 }}
      }
    }
  }
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

以及一些样式的修改：

<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96

至此地图上显示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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

js代码实现如下：

methods: {
	handleSelect(e) {
        this.locData.address = e.address
        this.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.longitude
        this.form.latitude = this.locData.latitude
        this.form.address = this.locData.address
        this.mapVisible = false
      },
      mapShow(){
        this.mapVisible = true
      },
      //点击地图监听
      clickEvent(e){
        this.keyword = ''
        this.showSearch = false
        map.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;
      },
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

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

<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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/109813?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号