• vue中实现百度地图


    1.项目根目录下下载百度地图插件   

      npm install vue-baidu-map –save

    2.在首页index.html中引入百度地图:

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

      我申请的密钥为  :3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD

    3.在显示地图的组件中 template 中:

       <div class="baidumap" id="allmap"></div>    //地图的容器

    4.在显示地图的组件中 script 中:  

    复制代码
    export default {
        name: 'pm-distribution',
        components: {
          
        },
        mounted() {
            this.baiduMap()
        },
        methods: {
            baiduMap() {
                var map = new BMap.Map('allmap') // 创建地图实例
    
                var point = new BMap.Point(116.331398, 39.897445) // 创建点坐标
                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)
                })
            }
        }
    }
    复制代码

    5.在显示地图的组件中 style 中改变一下默认样式:   

    复制代码
    .baidumap {
         1000px;
        height: 500px;
        border: 1px solid red;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    
    /* 去除百度地图版权那行字 和 百度logo */
    .baidumap > .BMap_cpyCtrl {
        display: none !important;
    }
    .baidumap > .anchorBL {
        display: none !important;
    }
    复制代码

    完成!!!!

  • 相关阅读:
    MYSQL学习笔记——sql语句优化工具
    SQL优化工具SQLAdvisor使用
    SqlServer性能检测和优化工具使用详细
    Sql优化器究竟帮你做了哪些工作
    通俗易懂的php多线程解决方案
    PHP删除数组中空值的方法介绍
    PHP函数
    python函数回顾:dir()
    面向对象封装思想小结
    python函数回顾:all()
  • 原文地址:https://www.cnblogs.com/htq29study/p/12080277.html
Copyright © 2020-2023  润新知