zoukankan      html  css  js  c++  java
  • Vue接入百度地图显示及相关操作

    Vue接入百度地图的API

    首先你要有一个百度地图的key就是CK
    申请网址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
    介绍:其实这个已经封装的很好了,在Vue里面也是,你利用npm把插件装进来,直接配置就可以使用。然后你需要什么时间就写什么

    说几个网址方便参考:
    Vue的官方文档 https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
    百度地图拾取坐标 http://api.map.baidu.com/lbsapi/getpoint/
    事件操作文档 http://lbsyun.baidu.com/jsdemo.htm#canvaslayer
    H5使用(也是官方文档)http://lbsyun.baidu.com/jsdemo.htm#canvaslayer
    The Start
    1.首先下载插件
    $ npm install vue-baidu-map --save或者 yarn add vue-baidu-map --save

    2.在Vue里面进行引入(基本上就是单独引入全局太浪费)
    import { BaiduMap } from "vue-baidu-map"
    3.依赖注入在components里面进行声明
    components: { BaiduMap },
    4.直接在组件里面进行引用就可以

           <baidu-map
            style=" 500px;height:370px;float:left"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="my_scroll_wheel_zoom"
            class="baidu-map-view"
            @ready="map_handler"
            ak="CdGWCqVpavs1D9POs2sMR7n64m59UolO"
          ></baidu-map> 
    

    注意:我在这写的时候把center和zoom写在了data里面,所以在data里面加

    data() {
        return {
          center: { lng:0, lat:0},
          zoom: 20
        };
      },
    

    ready 是在地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例——{BMap, map}。百度地图组件是异步加载,不要在组件的生命周期中访问 BMap 核心类和 map 实例,如有需要,请在所需组件的 ready 事件回调函数的参数中获取。

       //加入回调方法 
       methods: {
        //地图显示的回调
        map_handler({ BMap, map }) {
          this.BMap = BMap;
          this.map = map;
        }
      }
    
    到此就可以显示基本的地图组件了

    操作及案例

    metho添加下面代码进行关联实现效果

    //点击进行传入经纬度值 就可以实现相应的移动
    getClickInfo(e) {
          console.log(e.point.lng);
          console.log(e.point.lat);
          this.center.lng = e.point.lng;
          this.center.lat = e.point.lat;
        }
    
    //点击获取经纬度坐标并标点
    	this.map.addEventListener('click', (e) => {
              const point = new this.BMap.Point(e.point.lng, e.point.lat)
              const marker = new this.BMap.Marker(point) // 设置点击位置
              map.clearOverlays() // 清空地图上其他红色位置标识
              map.addOverlay(marker)  // 添加指定点
            })
    
    // 获取浏览器当前定位
    getCurlocation() {
                if (!this.BMap) return false
                let BMap = this.BMap
                let geolocation = new BMap.Geolocation()
                let _this = this
                geolocation.getCurrentPosition(function(r) {
                    _this.map_center = r.point
                    _this.shop_lng = r.point.lng
                    _this.shop_lat = r.point.lat
                })
            }
    
  • 相关阅读:
    C#中对DatagridView部分常用操作
    IIS6架设网站常见问题及症状答疑[转]
    最小化到托盘
    IIS常见问题和错误及其解决方案[转]
    .Net 2.0框架安装失败的解决方案
    Runtime类中Memory
    JVM垃圾回收2
    JVM垃圾回收3——参数详解(转载)
    JVM参数选项(转载)
    MapInfo之格式说明(转载)
  • 原文地址:https://www.cnblogs.com/tcz1018/p/12924160.html
Copyright © 2011-2022 走看看