百度地图基本用法-白红宇

一、百度地图的引入

在api开发平台注册百度账号

申请ak（这是使用地图必不可少的）

在vue项目代码中引入(在index.html的头部引入)

二、创建地图

1. 在div标签中创建地图所属位置(可设置相应的大小，位置)


    
     复制代码

2.地图初始化方法

mapInit() {    this.BMap = new BMap.Map("mapId");          // 创建地图实例    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标    this.BMap.centerAndZoom(point, 15) //初始化地图，设置中心点坐标和地图级别     this.BMap.enableScrollWheelZoom(true)  // 开启鼠标轮播缩放}复制代码

执行mapInit()方法则可以在页面上成功显示地图

三、地图添加标注

1.单个标注

默认图标

mapInit() {    let _this=this;    this.BMap = new BMap.Map("mapId");          // 创建地图实例    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标    this.BMap.centerAndZoom(point, 15) //初始化地图，设置中心点坐标和地图级别     this.BMap.enableScrollWheelZoom(true)   //开启鼠标滚轮缩放    var marker = new BMap.Marker(point);        // 创建标注1个标注     this.BMap.addOverlay(marker);    this.BMap.centerAndZoom(point, 15)}复制代码

自定义图标

mapInit() {    let _this=this;    this.BMap = new BMap.Map("mapId");          // 创建地图实例    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标    this.BMap.centerAndZoom(point, 15) //初始化地图，设置中心点坐标和地图级别     this.BMap.enableScrollWheelZoom(true)   //开启鼠标滚轮缩放    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157)); // 自定义图标    var marker = new BMap.Marker(point,{icon:myIcon});        // 创建标注1个标注     this.BMap.addOverlay(marker);}复制代码

2. 多个标注点

// 地图初始化mapInit() {    let _this=this;    this.BMap = new BMap.Map("mapId");          // 创建地图实例    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标    this.BMap.centerAndZoom(point, 15) //初始化地图，设置中心点坐标和地图级别     this.BMap.enableScrollWheelZoom(true)   //开启鼠标滚轮缩放    // 随机标注10个标注    var bounds = this.BMap.getBounds();    var sw = bounds.getSouthWest();    var ne = bounds.getNorthEast();    var lngSpan = Math.abs(sw.lng - ne.lng);    var latSpan = Math.abs(ne.lat - sw.lat);    for (var i = 0; i < 25; i ++) {    var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));    this.addMarker(point);    }},addMarker(point){  // 创建图标对象    var _this = this    var marker = new BMap.Marker(point);    // 将标注添加到地图     this.BMap.addOverlay(marker);}复制代码

3.点击显示信息窗窗口

addMarker(point){  // 创建图标对象    var _this = this    var marker = new BMap.Marker(point);    // 添加标注信息框    var opts = {    width:250,    height: 200,    title: "详细信息"    }    // 创建信息框窗口    var infoWindow = new BMap.InfoWindow(`北京天安门
`, opts);     // 点击标注的点击事件    marker.addEventListener("click", function(){    // 显示信息框    _this.BMap.openInfoWindow(infoWindow, point);     console.log(ma)       });     // 将标注添加到地图     this.BMap.addOverlay(marker);    }    复制代码

以上是最基础的操作，日后还会陆续更新·······