vue引入百度地图

最新推荐文章于 2024-11-19 14:10:36 发布

原创最新推荐文章于 2024-11-19 14:10:36 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中引入并使用百度地图。首先通过npm安装vue-baidu-map库，然后在index.html中引入相关脚本。接着在Vue组件内编写地图模块的代码，最后说明了利用百度地图生成器获取地图坐标的步骤。

1.创建一个vue项目输入指令 npm install vue-baidu-map –-save
2.在index.html 里面引入

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD"></script>

3.vue地图模块的代码：

<template>
  <div class="home">
    <div class="home_wrapper">
       <bread :bcont="bcont"></bread>
      <div class="home_main">
        <div class="home_wrapper">
          <div class="area_title">
            <p>设备分布区域：</p>
            <p>武侯区</p>
          </div>
          <div class="area_map">
            
    <div class="map baidumap" id="allmap"></div>
            <div class="map_desc">
              <div class="desc_tit">
                <h4>成都白鹭湾湿地公园设备：</h4>
              </div>
              <ul class="desc">
                <li>海康威视萤石无线高清监控器摄像头设备</li>
                <li>海康威视萤石无线高清监控器摄像头设备</li>
                <li>海康威视萤石无线高清监控器摄像头设备</li>
                <li>海康威视萤石无线高清监控器摄像头设备</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD"></script>
<script>
import bread from "../components/bread";
export default {
  data(){
    return{
      bcont:'指挥中心'
    }
  },
  components: { bread },
  mounted() {
    this.baiduMap();
  },
  methods: {
    baiduMap() {
      var map = new BMap.Map("allmap"); // 创建地图实例

      var point = new BMap.Point(104.131866, 30.571863); // 创建点坐标
      map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
      //map.setMapStyle({ style: 'midnight' }) //地图风格

      var marker = new window.BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中

      //提示信息
      var infoWindow = new BMap.InfoWindow("白鹭湾湿地公园");
      // 鼠标移上标注点要发生的事
      marker.addEventListener("mouseover", function() {
        this.openInfoWindow(infoWindow);
      });

      // 鼠标移开标注点要发生的事
      marker.addEventListener("mouseout", function() {
        //this.closeInfoWindow(infoWindow)
      });
    }
  }
};
</script>

<style lang="less" scoped>
.baidumap {
  width: 500px;
  height: 517px;
  margin: auto;
}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}
.home {
  width: 100%;
  height: 100%;
  //   background: green;
  .home_wrapper {
    width: 1680px;
    margin: 0 auto;
    .home_main {
      width: 100%;
      height: 823px;
      background: #f7faff;
      .home_wrapper {
        width: 1649px;
        height: 776px;
        margin: 0 auto;
        background: #fff;
        padding-top: 30px;
        .area_title {
          width: 98%;
          height: 50px;
          background: #f7faff;
          margin-bottom: 20px;
          display: flex;
          align-items: baseline;
          padding: 13px 0 0 17px;
          margin: 0 auto;

          p:nth-child(1) {
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(46, 46, 46, 1);
          }
          p:nth-child(2) {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(137, 137, 137, 1);
          }
        }
        .area_map {
          width: 98%;
          height: 600px;
          margin: 0 auto;
          margin-top: 20px;
          //  background: turquoise;
          display: flex;
          .baidumap {
            width: 100%;
            height: 517px;
            margin: auto;
            .BMap_cpyCtrl {
              display: none !important;
            }
            .anchorBL {
              display: none !important;
            }
          }

          /* 去除百度地图版权那行字 和 百度logo */
          .map {
            width: 1164px;
            height: 100%;
            // background: brown;
          }
          .map_desc {
            width: 452px;
            height: 100%;
            // background: yellow;
            margin-left: 20px;
            .desc_tit {
              width: 100%;
              background: #f7faff;
              padding: 7px 0 7px 17px;
              font-size: 18px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: rgba(46, 46, 46, 1);
              opacity: 1;
            }
            .desc {
              list-style: none;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              li {
                border: 1px solid rgba(233, 234, 237, 1);
                padding: 8px 0 8px 17px;
                &:nth-child(odd) {
                  background: #e9eaed;
                }
                &:nth-child(even) {
                  background: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

4.寻找地图坐标需要使用到百度地图生成器

原文章出处