美文网首页
vue中使用百度地图

vue中使用百度地图

作者: 刘HF_ | 来源:发表于2019-05-15 11:17 被阅读0次

    1.首先在官网申请密钥: http://lbsyun.baidu.com/apiconsole/key 申请密钥

    2. 在index.html中引用js文件,在头部引入

    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=申请的密钥"></script>

    3.在 webpack.config.js 配置文件中配置BMap,在module.exports 中与entry平级;如果还有其他的,同样在下面引入就可以了,比 如自定义覆盖物BMap_Symbol_SHAPE_POINT等 (需要重新 npm run dev启动服务器才可以) ;

    entry: {

            app: './src/main.js'

      },

      externals:{

                "BMap": "BMap",

      }

    4.在引用地图的组件中创建一个容器,定义容器的宽高

    <div id="all-map" class="all-map" ></div>

    .all-map{

                width: 600px;

                height: 600px;

    }

    5.在引用地图的组件中引入BMap,否则会报”BMap undefined”的错误

    import BMap from 'BMap'

    6.在methods中定义创建地图的方法

    BaiduMap(){

                   /**地图初始化 start */

                   var map = new BMap.Map("all-map");    // 创建Map实例

                   map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别

                    // 添加地图类型控件

                    map.addControl(new BMap.MapTypeControl({

                                mapTypes:[

                                        BMAP_NORMAL_MAP,

                                        BMAP_HYBRID_MAP

                      ]}));   

                      map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的

                      map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放

    7.在mounted生命周期中调用刚刚定义好的方法

    mounted(){

                 this.BaiduMap()

     }

    然后会出现下面的效果:

    在做项目的过程中参考其他人的经验整理的笔记

    相关文章

      网友评论

          本文标题:vue中使用百度地图

          本文链接:https://www.haomeiwen.com/subject/rsnuaqtx.html