web项目中使用百度地图经验

最新推荐文章于 2020-08-02 15:58:26 发布

置顶 bug不走我不走

最新推荐文章于 2020-08-02 15:58:26 发布

阅读量4.7k

点赞数

分类专栏： vue web 前端文章标签：百度地图 web前端 js vue

本文链接：https://blog.csdn.net/qq_35628400/article/details/80237327

版权

vue 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

web

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

本文分享了在web前端项目中使用百度地图的经验，包括应用前的秘钥申请，将地图引入项目，以及具体使用示例，强调了在Vue组件中绘制地图的关键步骤，并提供了官方参考文档链接。

摘要由CSDN通过智能技术生成

应用前准备工作

1、http://lbsyun.baidu.com/index.phptitle=%E9%A6%96%E9%A1%B5 打开百度地图官网链接在最底部点击申请秘钥进行申请和激活。
2、申请成功后到我的应用里面查看我的应用，将会看到刚才创建的应用以及秘钥。这里写图片描述
3、点击设置按钮来对应用简单进行配置。

引入地图到项目中

首先在index.html中用script标签引用百度地图的js文件。
在webpack.base.conf.js 中配置百度地图所需要的配置。具体操作是在model.exports对象下面配置externals对象。
创建我们的百度地图组件，定制我们需要的地图场景

具体使用示例

1、首先定义地图的容器 <div id="allmap"></div>
2、在组件中引用百度地图
import BMap from 'BMap'; import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT';
3、在绘制地图的阶段必须写在vue的mounted阶段来执行。

methods:{
  baiduMap (map) {
    this.createMap(map);
    this.addMarker(map);
  },
  getNumberLabel(number){
    let offsetSize = new BMap.Size(4, 3);
    let labelStyle = {
      color: '#fff',
      backgroundColor: '0.05',
      border: '0'
    };
    let label = new BMap.Label(number, {
      offset: offsetSize
    });
    label.setStyle(labelStyle);
    return label;
  },
  createMap(map){
    let point = new BMap.Point(116.29845,39.95933); //确地地图的中心点
    map.centerAndZoom(point,14); //视窗大小
    map.enableScrollWheelZoom(); //是否可缩放
    let icon = new BMap.Icon('https://lbsyun.baidu.com/jsdemo/img/fox.gif', new BMap.Size(300,157),{imageOffset:new BMap.Size(20,-20)}); //覆盖物
    let maker = new BMap.Marker(point,{icon:icon}); // 绘制点
    let circle = new BMap.Circle(point,2000,{fillColor:'blue', strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3}); //显示范围
    map.addOverlay(maker);
    map.addOverlay(circle);
  },
  addMarker(map){  //继续添加点
    this.recentVendor.forEach((item,index) =>{
      let po = new BMap.Point(item.lng,item.lat);
      let marker = new BMap.Marker(po);
      marker.setLabel(this.getNumberLabel(index + 1));
      let html = `<table><tr><td>${item.coverName}</td></tr><tr><td>${item.address}</td></tr>`;
      let info = new BMap.InfoWindow(html);
      marker.addEventListener('click',function(){
        this.openInfoWindow(info);
      });
      map.addOverlay(marker);
    });
  }
},
mounted() {
  let map = new BMap.Map('allmap'); //初始化map对象
  this.baiduMap(map);
}