精华内容
下载资源
问答
  • 在开发过程中发现 vue-baidu-map 封装的 BmPolyline 折线组件不能顺利绘制出带箭头的纹理。...而 IconSequence 类的实例对象则是在 BaiduMap 组件的 ready 事件中拿到 BMap 类和 map 地图实例对象,然后依次调用 B
  • 主要介绍了vue百度地图 + 定位的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客:vue使用百度地图----离线地图
  • 本组件是用于在地图上选点、回显坐标等
  • vue中调用百度地图实现搜索等功能 在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫 现在也是体会到了,学新的东西还是得看官方文档。...
  • 主要为大家详细介绍了vue用BMap百度地图实现即时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 百度地图 3d地图

    2021-09-09 14:52:36
    效果图 在这里插入图片描述 一、新建js文件(3dmap.js) const ak = '你的百度... * 异步加载百度地图 * @returns {Promise} * @constructor */ function loadBaiDuMap() { return new Promise(function (reso

    效果图
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    一、新建js文件(3dmap.js)

    const ak = '你的百度地图秘钥' // 百度的地图密钥申请 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
    /**
     * 异步加载百度地图
     * @returns {Promise}
     * @constructor
     */
    function loadBaiDuMap() {
      return new Promise(function (resolve, reject) {
        try {
          console.log('BMap is defined:', BMapGL === undefined || BMapGL)
          resolve(BMapGL)
        } catch (err) {
          window.init = function () {
            resolve(BMapGL)
          }
          let script = document.createElement('script')
          script.type = 'text/javascript'
          script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
          script.onerror = reject
          document.body.appendChild(script)
        }
      })
    }
    export { loadBaiDuMap }
    /**
     * 异步加载百度地图,以及绘制工具
     * @returns {Promise}
     * @constructor
     */
    function loadBaiDuDrawMap() {
      return loadBaiDuMap().then(BMapGL => {
        let loaded = false
        try {
          loaded = (BMapGLLib && BMapGLLib.DrawingManager)
        } catch (err) {
          loaded = false
        }
        if (!loaded) {
          console.log('BMapLib.DrawingManager loading!')
          let script = document.createElement('script')
          script.type = 'text/javascript'
          script.src = 'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js'
          document.body.appendChild(script)
          let link = document.createElement('link')
          link.rel = 'stylesheet'
          link.href = 'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css'
          document.body.appendChild(link)
        } else {
          console.log('BMapLib.DrawingManager is loaded!')
        }
        return BMapGL
      })
    }
    export { loadBaiDuDrawMap }
    

    二、新建vue文件

    <template>
      <!--地图-->
      <div style="width: 100%; height: 700px">
        <div id="container"></div>
      </div>
    </template>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=3.0&ak=fX3RxiG1a3EV1fQGYBzzCFojr1z82udK&s=1"
    ></script>
    <script>
    import { loadBaiDuMap, loadBaiDuDrawMap } from "@/assets/js/baiduMap.js";
    export default {
      name: "index",
      data() {
        return {
          path: [
            {
              lng: 112.541993,
              lat: 37.822504,
            },
            {
              lng: 112.628662,
              lat: 38.02281,
            },
            {
              lng: 112.70708,
              lat: 38.023748,
            },
            {
              lng: 113.009629,
              lat: 38.060038,
            },
            {
              lng: 113.352889,
              lat: 38.09286,
            },
            {
              lng: 113.71081,
              lat: 38.060209,
            },
            {
              lng: 113.897227,
              lat: 38.072481,
            },
            {
              lng: 114.028882,
              lat: 38.121267,
            },
            {
              lng: 114.24771,
              lat: 38.194384,
            },
            {
              lng: 114.472825,
              lat: 38.092136,
            },
            {
              lng: 114.581917,
              lat: 38.061173,
            },
          ],
          interval: null, // 定时器
          timesRun: 0, // 循环次数
          localSearch: null, // 自动搜索
          loading: false,
          transportmanageList: [],
          trackAni: null,
          maps: "", // 存放地图
          pls: "",
        };
      },
      mounted() {
        this.init1(); // 初始化轨迹路线
      },
      created() {},
      methods: {
      //设置点坐标
        init() {
          // 初始化地图
          loadBaiDuMap().then((BMapGL) => {
            var map = new BMapGL.Map("container");
            map.centerAndZoom(
              new BMapGL.Point(this.path[0].lng, this.path[0].lat),
              18
            );
            map.enableScrollWheelZoom(true);
            map.setHeading(60);
            map.setTilt(60);
            // 添加比例尺控件
            bmap.addControl(
              new BMapGL.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT,
                offset: new BMapGL.Size(10, 10),
              })
            );
            // 添加缩放控件
            bmap.addControl(
              new BMapGL.ZoomControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                offset: new BMapGL.Size(10, 10),
              })
            );
    
    		//设置点坐标
            for (var i = 0; i < this.path.length; i++) {
              let poi = new BMapGL.Point(this.path[i].lng, this.path[i].lat);
              let marker = new BMapGL.Marker(poi); //创建标注
              map.addOverlay(marker); //将标注添加到地图中
            }
            setTimeout(this.start(), 3000);
            this.maps = bmap;
            this.pls = pl;
          });
        },
        //设置多边形绘图
        init1() { 
          // 初始化地图
          loadBaiDuDrawMap().then((BMapGL) => {
            // 创建地图实例
            let bmap = new BMapGL.Map("container");
            bmap.centerAndZoom(new BMapGL.Point(this.path[0].lng, this.path[0].lat), 18); // 初始化地图,设置中心点坐标和地图级别
            bmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    
            // 添加比例尺控件
            bmap.addControl(
              new BMapGL.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT,
                offset: new BMapGL.Size(10, 10),
              })
            );
            // 添加缩放控件
            bmap.addControl(
              new BMapGL.ZoomControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                offset: new BMapGL.Size(10, 10),
              })
            );
    
            let point = [];
            for (var i = 0; i < this.path.length; i++) {
              let poi = new BMapGL.Point(this.path[i].lng, this.path[i].lat);
              point.push(poi);
              //let marker = new BMapGL.Marker(poi); //创建标注
              //bmap.addOverlay(marker); //将标注添加到地图中
            }
            let polygon = new BMapGL.Polygon(point, {
              strokeColor: "blue",
              strokeWeight: 6,
              strokeOpacity: 0.5,
            });
            bmap.addOverlay(polygon);
            // 保存地图
            this.maps = bmap;
            this.pls = polygon;
    
            bmap.setHeading(64.5);
            bmap.setTilt(73);
          });
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    #container {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
    }
    </style>
    
    展开全文
  • Vue 百度地图

    2019-04-24 11:42:20
    import imageSwiper from '../common/ImageSwiper.vue' import {BmScale} from 'vue-baidu-map' appKey: '', zoom: 15, map: null, BMap: null, center: {}, handler ({ BMap, map }) { this.BMap = BMap ...
    <div style="position: relative;height: 246px;">
    <baidu-map ref="addMap" class="bm-view" @ready="handler" :ak="appKey" :center="center" :zoom="zoom"  :scroll-wheel-zoom="false">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT" :showAddressBar="true" ></bm-scale>
    </baidu-map>
    </div>
    import imageSwiper from '../common/ImageSwiper.vue'
    import {BmScale} from 'vue-baidu-map'
    appKey: '',
    zoom: 15,
    map: null,
    BMap: null,
    center: {},
    handler ({ BMap, map }) {
          this.BMap = BMap
          this.map = map
        }
    
    that.map.clearOverlays()
            that.map.centerAndZoom(that.center, that.zoom)
            that.map.addOverlay(new that.BMap.Marker(that.center)) // 添加标注
            var CurrentAddressabel = new that.BMap.Label(that.data.address, {
              position: new that.BMap.Point(that.center.lng, that.center.lat)
            })
            CurrentAddressabel.setStyle({
              'white-space': 'normal',
              width: '100px',
              height: '36px',
              display: '-webkit-box',
              '-webkit-line-clamp': 2,
              '-webkit-box-orient': 'vertical',
              'overflow': 'hidden'
            })
            that.map.addOverlay(CurrentAddressabel)

     

    展开全文
  • Vue整合百度地图插件

    2019-02-22 11:43:37
    真是项目的一小块案例,属于基础页面,包含Vue的基本用法,Vuex,element以及和 后台json交互
  • 第一步,去百度地图开发者申请秘钥。 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <div id=allmap ref=allmap></div> <router></router> ...
  • vue调用百度地图api

    2019-08-10 02:35:12
    vue调用百度地图api
  • vue百度地图定位相关

    2021-06-16 16:19:21
    Vue baidu map中文文档 https://dafrok.github.io/vue-baidu-map/#/zh/start/base 百度开放平台例子: https://lbsyun.baidu.com/jsdemo.htm#lcustomStyle 获取经纬度: https://jingweidu.bmcx.com/

    Vue baidu map中文文档
    https://dafrok.github.io/vue-baidu-map/#/zh/start/base

    百度开放平台例子:
    https://lbsyun.baidu.com/jsdemo.htm#lcustomStyle

    百度地图Key的申请地址为:
    http://lbsyun.baidu.com/apiconsole/key

    百度地图个性化地图样式(样式ID)发布:
    https://lbsyun.baidu.com/apiconsole/custommap

    vue 百度地图 气泡图
    https://blog.csdn.net/qq_27318177/article/details/99586560

    Uni-Java_unipush java 后端详解
    https://blog.csdn.net/weixin_32058991/article/details/114472786

    进入 页面自动定位:
    https://www.cnblogs.com/10manongit/p/12807157.html

    微信小程序配置环境:
    https://lbsyun.baidu.com/index.php?title=wxjsapi/guide/project

    获取经纬度:
    https://jingweidu.bmcx.com/

    png转base64格式: http://tool.chinaz.com/tools/imgtobase

    展开全文
  • 主要介绍了vue项目中调用百度地图API使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 在本篇文章中我们给大家整理了2种关于VUE项目中使用百度地图的最简单的方法,非常实用,一起来学习下。
  • vue百度地图搜索定位

    2020-10-28 16:49:05
    基于百度地图写的vue地图搜索 效果图如上: 下载 vue-baidu-map 注册百度api 具体代码https://github.com/zheng-GIN/Bmap.git

    基于百度地图写的vue地图搜索

    在这里插入图片描述
    效果图如上:
    下载 vue-baidu-map 注册百度api
    具体代码https://github.com/zheng-GIN/Bmap.git

    展开全文
  • Vue 百度地图baidu-map多点显示 安装baidu-map $ npm install vue-baidu-map --save 引入main.js import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 ...
  • 1、先看效果图 ...2-1、compons文件夹下新建baiduMap.vue,内容: <template> <div> <el-dialog width="30%" :before-close="cancel" :closable="false" :mask-closable="false
  • <div id="getMap" ></div>... // 初始化百度地图 var getmap = new BMap.Map("getMap", { enableMapClick: false // 禁止底图点击事件 }); // 创建地图实例 var point = new BMap.
  • Vue百度地图电子围栏

    千次阅读 2020-11-12 11:25:23
    element-ui、v-region(地区选择器)、百度地图v3.0、DrawingManager(绘制工具) 1、index.html 引入百度地图v3.0、DrawingManager 2、packpage.json 引入element-ui、v-region 3、main.js .
  • VUE百度地图API获取当前位置

    千次阅读 2020-07-22 16:50:38
    ak=此处填写申请的百度地图AK"></script> 第二步: 在build文件夹下的webpack.base.conf.js文件里面的module.exports中添加如下代码 externals:{ 'BMap': 'BMap' } 第三步: 控制台执行 npm ...
  • 具体的应用场景简而言之就是需要我们在地图上添加如图中所示的自定义覆盖物。实现的过程作者分为以下两点给大家介绍介绍。 水波紋的实现 自定义覆盖物的实现 水波紋的实现 这个需求的实现肯定是离不开我们自己写...
  • vue百度地图插件

    2019-12-18 11:19:52
    2. 申请百度地图秘钥 https://blog.csdn.net/weixin_42813606/article/details/88556804 3. 代码 (1)定义 地图组件:map.vue(重要的2个参数:中心点坐标和秘钥) <template> <!-- 这是地图组价, 是一个...
  • 主要是为了在vue中引入百度离线地图,而这几个文件是不可或缺的,(压缩包还一个文件可以去我下面这个博客去下载); vue引入百度离线地图教程:https://blog.csdn.net/qq_36727756/article/details/89491444
  • 瓦片地图具有如下特点:参考链接 作者:JasonJe 具有唯一的瓦片等级和瓦片坐标编号; 分辨率为 256*256; 瓦片等级越高,展示的地图信息约详尽,瓦片数量也越多; 上一等级的一张瓦片地图可分割为下一等级的四张...
  • (1)在index.html文件中引入百度地图 [removed][removed] (2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级; externals: { BMap: BMap }, (3)添加地图组件...
  • antd vue 百度地图选点

    千次阅读 2019-08-29 12:12:12
    antd vue 百度地图选点 点击地图选点按钮,弹出页面选择地址,选择完成后,详细地址会自动变更,详细地址可以编辑 BMapComponent.vue <a-modal :title=“title” :width=“800” :visible=“visible” :...
  • 要实现当数据变化时轨迹重新绘制,重新渲染,然而在vue时间日期选择器中没办法直接用@change监听数据变化,看网上说好像是因为版本不兼容。 二.解决方法 第一步:加上v-if data里面hackReset设为true 第二步:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,676
精华内容 2,670
关键字:

vue百度地图

vue 订阅