百度地图添加叠加层

这篇具有很好参考价值的文章主要介绍了百度地图添加叠加层。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

百度地图添加叠加层

npm install vue-baidu-map --save
<template>
<!-- center:地图的中心 zoom:地图的层级 @ready:地图的初始化事件 :scroll-wheel-zoom:是否支持鼠标缩放-->
    <baidu-map class="map" 
    :center="center" 
    :zoom="zoom" 
    :scroll-wheel-zoom="true"  
    @ready='initMap' 
    ak="填写自己申请的这个ak码"></baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components:{
  BaiduMap
},
data(){
  return{
  groundOverlay:{},
    center:{//经纬度
      lng:0,
      lat:0,
    },
    zoom:3,//地图展示级别
    BMap:null,//百度地图对象
    map:null,//百度地图实例
  }
},
methods:{
  initMap({BMap,map}){
    this.BMap = BMap
    this.map = map
    this.center.lng = 116.404;
    this.center.lat = 39.915;
    this.zoom = 10
    this.addGround()
  },
      // 添加地图叠加层
    addGround() {
      let map = this.map;
      let BMap = this.BMap;
      let TianAnMen = new BMap.Point(116.404449, 39.914889);
      // 居中放大
      map.centerAndZoom(TianAnMen, 12);
      // 启用滚轮放大缩小
      map.enableScrollWheelZoom();
      // 西南角和东北角
      var SW = new BMap.Point(73.40, 3.52);
      var NE = new BMap.Point(135.2, 53.33);
      let groundOverlayOptions = {
        opacity: .5,
        // displayOnMinLevel: 10,
        // displayOnMaxLevel: 14,
      };
      // 初始化GroundOverlay
      this.groundOverlay = new BMap.GroundOverlay(
        new BMap.Bounds(SW, NE),
        groundOverlayOptions
      );

      this.groundOverlay.setImageURL('图片地址');
      this.addGroundOverlay();
    },
     addGroundOverlay() {
      // 添加GroundOverlay
      this.map.addOverlay(this.groundOverlay);
    },
    removeGroundOverlay() {
      // 移除GroundOverlay
      this.map.removeOverlay(this.groundOverlay);
    },
},
}
</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 100%;
}
</style>


文章来源地址https://www.toymoban.com/news/detail-552728.html

到了这里,关于百度地图添加叠加层的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用百度地图路书为骑行视频添加同步轨迹

    使用 gopro 记录骑行过程 (参考《使用二手 gopro 做行车记录仪 》),事后将视频文件导出来回顾整个旅程,会发现将它们与地图对应起来是一件困难的事。想要视频和地图对应,首先需要上报每个时刻的位置,gopro 本身是支持的,然而要到版本 5 才可以,我的 3+ 太老了没这能力

    2024年02月16日
    浏览(62)
  • vue使用百度地图获取可视区域四角坐标(百度地图四角坐标,百度地图3D可视区域四角坐标)

    百度地图api只提供了左下角和右上角两个坐标,左上角坐标和右下角坐标需要自己操作获取,方法如下: 然后在地图上添加监听事件, 这样用户在拖拽或缩放地图时也可以获取到地图可视区域的四角坐标: 创作不易,感觉有用就一键三连,感谢(●\\\'◡\\\'●)

    2024年02月11日
    浏览(75)
  • html 导入百度地图 网页中如何导入百度地图

    先看案例如图所示 首先我们需要知道我们想要标注地点的经纬度 经纬度查询网址如下 图中以同程大厦为例 经纬度查询定位 拾取坐标系统 经纬度查询地图 好了 准备工作做好 现在开始编码~ 第一步 html css部分 注意点1. #map 命名 不要随意更改 如影响到您的布局 您可以在外面

    2023年04月08日
    浏览(52)
  • pr视频叠加,即原视频右上角添加另外一个视频方法,以及pr导出视频步骤

    一、pr视频叠加,即原视频右上角添加另外一个视频方法 在使用pr制作视频时,我们希望在原视频的左上角或右上角同步播放另外一个视频,如下图所示: 具体方法为: 1、导入原视频,第一个放在v1位置,第二个放在v2位置,然后单独选中我们希望小视图播放的视频,点击左

    2024年02月16日
    浏览(207)
  • 高德地图与百度地图坐标相互转化

    1. WGS-84原始坐标系 ,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于WGS-84坐标系的;但是在国内是不允许直接用WGS84坐标系标注的,必须经过加密后才能使用; 2. GCJ-02坐标系 ,又名“火星坐标系

    2024年02月16日
    浏览(43)
  • 【QT--使用百度地图API显示地图并绘制路线】

    先吐槽一下下,本身qt学的就不咋滴,谁想到第一件事就是让写一个上位机工具,根据CAN总线传来的位置信息,在地图上去绘制路线,并获取当前路段的限速信息等。当听到这个需求的时候,第一时间是有点懵逼的。自己原本是没接触过这方面的知识,而且qt学的也特别的垃圾

    2024年01月24日
    浏览(50)
  • 乾坤框架中子系统使用百度地图三维地图无法显示的问题

    乾坤框架子系统调用百度地图,使用vue-baidu-map组件只有卫星和普通模式,没法实现三维地图,所以只能改为原始的加载百度地图的api,这里最好使用懒加载方式,创建一个BMPGL.js。 页面引用import { BMPGL } from \\\"@/api/map/bmapGL.js\\\"; 方法调用 如此在子应用中就能够正常显示百度三维

    2024年02月10日
    浏览(51)
  • 【Vue】集成百度地图

    1、获取百度地图 ak 密钥 2、登录网址 https://lbsyun.baidu.com/ 3、注册百度地图开放平台账号,填写认证信息,并且创建应用 注意 BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内。 没有设置center 和 zoom 属性的地图

    2024年02月10日
    浏览(44)
  • 安卓:百度地图开发(超详细)

    目录 一、百度地图介绍 1. MapView类: 2. BaiduMap类: 3. GeoCoder类: 4.GeoCodeOption类: 5.GeoCodeResult类: 6. LocationClient类: 7.LocationClientOption 类: 8. RoutePlanSearch类: 9.LatLng 类: 10. PoiSearch 类:  11.PoiResult 类: 12.PoiInfo 类: 13.PoiOverlay 类: 14.MarkerOptions类: 15.MapStatusUpdate类: 二、使用

    2024年02月15日
    浏览(41)
  • layui引入百度地图

      获取AK是需要注册一个百度地图开放平台账号,链接地址: 百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包