百度地图+vue2：地面叠加层

城南已开979

已于 2024-02-28 11:48:13 修改

阅读量718

点赞数

分类专栏： echart+地图文章标签： javascript 开发语言百度

于 2023-06-02 16:35:48 首次发布

本文链接：https://blog.csdn.net/weixin_66948502/article/details/131009857

版权

echart+地图专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单示例

vue-bmap-gl地面叠加层示例
https://vue-bmap-gl.guyixi.cn/zh-cn/component/marker/ground-overlay.html

百度地图api
https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b16

地图api

百度地图js api示例地址
https://lbsyun.baidu.com/jsdemo.htm#gImageGround

开发平台示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地面图片叠加层</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
map.enableScrollWheelZoom(true);
map.setTilt(45);
map.setDisplayOptions({
    poiText: false,  // 隐藏poi标注
    poiIcon: false,  // 隐藏poi图标
    building: false  // 隐藏楼块
});


var pStart = new BMapGL.Point(117.19635, 36.24093);
  
var pEnd = new BMapGL.Point(117.20350, 36.24764);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'image',
    url: 'https://picx.zhimg.com/80/v2-05c474f07ff34524bf18b266237ec9f0_720w.webp?source=1940ef5c',
    opacity: 1
});
map.addOverlay(imgOverlay);


</script>

！！！如果叠加层图片反了，请注意你的两个定点的经纬度

在vue中的代码

<template>
  <div class="home">
    <div class="baidu" id="container"></div>
  </div>
</template>

<script>
import {InteriorLines} from "../api/InteriorLines.js"
import { lazyBMapApiLoaderInstance } from 'vue-bmap-gl'

export default {
  name: 'baiduMap',
  components: {
  },
  data () {
    return {
      dialogVisible: false,
      map: null,
      mapData: [
      {
        lng: 115.799323, lat: 28.627202,
        name: '南昌西',
      },  
      {
        lng: 115.805475, lat: 28.614241, 
        name: 'VR产业园',
      },  
      {
        lng: 115.80056 , lat: 28.60097, 
        name: '市民中心',
      },  
      {
        lng:115.81203 ,  lat: 28.59490, 
        name: '卢塞恩小镇',
      },  
      {
        lng: 115.792634, lat: 28.583925,
        name: '融创乐园',
      },  
      {
        lng: 115.810247, lat: 28.588456,
        name: '九龙湖公园', 
      },
      {
        lng:  115.78419 , lat: 28.57704,
        name: '杉杉奥特莱斯', 
      },
      {
        lng:    115.82266 ,  lat: 28.60457 ,
        name: '赣江市民公园1', 
      },
    ],
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      lazyBMapApiLoaderInstance.load().then(() => {
        this.map = new BMapGL.Map('container', {
          minZoom: 5,
          maxZoom: 20
        }) // 创建Map实例
        this.map.centerAndZoom(new BMapGL.Point(this.mapData[2].lng, this.mapData[2].lat), 17); 
        this.map.enableScrollWheelZoom(true) 
        this.map.setHeading(-20.5); //设置地图旋转角度
        this.map.setTilt(73); //设置地图的倾斜角度
        this.map.setZoom(14.5);//设置视角高度
        this.map.addControl(new BMapGL.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
		//给地图加地图叠加层
        var pStart = new BMapGL.Point(115.78958 , 28.59352);
        var pEnd = new BMapGL.Point( 115.81578 , 28.60567 );
        var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
        var imgOverlay = new BMapGL.GroundOverlay(bounds, {
            type: 'image',
            url: 'https://picx.zhimg.com/80/v2-05c474f07ff34524bf18b266237ec9f0_720w.webp?source=1940ef5c',
            opacity: 1
        });
        this.map.addOverlay(imgOverlay);
        
        this.Geocoder()
      })
    },
    // 点坐标
    Geocoder() {
      let that = this
      // 创建自定义图标
      var myIcon = new BMapGL.Icon(require('@/assets/map/position.png'), new BMapGL.Size(105, 95));
      var adds = [
          new BMapGL.Point(115.799145,28.628876),
          new BMapGL.Point(115.805475,28.614241),
          new BMapGL.Point(115.80056 ,28.60097),
          new BMapGL.Point(115.81203 ,28.59490),
          new BMapGL.Point(115.792634,28.583925),
          new BMapGL.Point(115.810247,28.588456),
          new BMapGL.Point(115.78419 ,28.57704),
          new BMapGL.Point( 115.82234 ,28.60700),
          // new BMapGL.Point(115.83044 ,28.62717 ),

      ];

      for(var i = 0; i<adds.length; i++){
          var marker = new BMapGL.Marker(adds[i],{icon: myIcon});
          
          var label = new BMapGL.Label(this.mapData[i].name, {offset:new BMapGL.Size(-32,-40)}) 
          
          label.setStyle({ // 设置label的样式
              color: '#fff',
              fontSize: '12px',
              background: 0,
              border: 0
          })
          marker.setLabel(label);
          this.map.addOverlay(marker);
          marker.customData = {
              id: i
          }
          marker.addEventListener('click', function (e) {
            let id = e.target.customData.id
            console.log('点击图标')
            console.log(id)
            that.$router.push('/home')
            sessionStorage.setItem('mapIndex', id)
          });
      }
      
    },   
  }
}
</script>
<style lang="less" scoped>
.media {
  position: fixed;
  left: 0;
  top: 100px;
  z-index: 999999999;
}
.baidu {
  width: 100%;
  height: 100vh;
  position: relative; 
  z-index: 1;
}
.info {
    z-index: 999;
    width: auto;
    position: fixed;
    top: 0;
}
:deep(.el-dialog__body) {
  padding: 0;
}
:deep(.el-dialog){
  background: none;
  box-shadow: none;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  display: none;
}
.popup_view {
  z-index: 9999;
  position: relative;
  // top: 20%;
  // left: 50%;
  // margin-left: -104px;
  width: 208px;
  height: 165px;
  .btn_view {
    position: absolute;
    top: 25px;
    left: 12px;
    right: 0;
    bottom: 0;
    .btn_item{
      margin-bottom: 10px;
      position: relative;
      .btn_name {
        width: 100%;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 50px;
        text-align: center;
        font-weight: bold;
      }
    }
  }
}


</style>

百度地图JS API示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>地面图片叠加层</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
map.enableScrollWheelZoom(true);
map.setTilt(45);
map.setDisplayOptions({
    poiText: false,  // 隐藏poi标注
    poiIcon: false,  // 隐藏poi图标
    building: false  // 隐藏楼块
});


var pStart = new BMapGL.Point(117.19635, 36.24093);
var pEnd = new BMapGL.Point(117.20350, 36.24764);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'image',
    url: '/jsdemo/img/shouhuimap.png',
    opacity: 1
});
map.addOverlay(imgOverlay);


</script>