百度地图基本用法

一、百度地图的引入

在api开发平台注册百度账号
申请ak（这是使用地图必不可少的）
在vue项目代码中引入(在index.html的头部引入)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_830376_qzecyukz0s.css">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    // 地图引入
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=key"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
复制代码

二、创建地图

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

<div id="mapId" style="width:90%;height:700px;margin-left:5%;margin-top:4%">
复制代码

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(`<h1>北京天安门</h1>`, opts); 
    // 点击标注的点击事件
    marker.addEventListener("click", function(){
    // 显示信息框
    _this.BMap.openInfoWindow(infoWindow, point); 
    console.log(ma)   
    }); 
    // 将标注添加到地图 
    this.BMap.addOverlay(marker);    
}    
复制代码

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

转载于:https://juejin.im/post/5d0ae14ff265da1bc37f141b

百度地图基本用法

一、百度地图的引入

二、创建地图

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

2.地图初始化方法

三、地图添加标注

1.单个标注

2. 多个标注点

3.点击显示信息窗窗口

猜你喜欢