百度地图引用流程和常见API

一诺得诺

已于 2024-06-07 16:03:24 修改

阅读量2.1k

点赞数 26

文章标签：前端

于 2024-06-07 15:59:46 首次发布

本文链接：https://blog.csdn.net/weixin_46600029/article/details/139522036

版权

GeoUtils 在DrawingManager鼠标绘制之后

mapv 引用顺序在GeoUtils之后

注册百度地图开发账号

获取密钥AK

进入百度地图开发平台，控制台 => 应用管理 => 我的应用 => 创建应用，获取到AK

百度地图-百万开发者首选的地图服务商,提供专属的行业解决方案百度地图开放平台作为百万开发者首选的地图服务商,不仅面向开发者提供包括API、SDK、SaaS、PaaS、DaaS等服务，还面向B/G两端提供专业的行业解决方案，包括物流行业方案、文旅行业方案、交通行业方案、汽车行业方案、金融行业方案等，助力千行百业数字化转型及智能化升级。https://lbsyun.baidu.com/

引入百度地图

百度地图再vue中的引入方式_vue引入百度地图-CSDN博客这个博客写的很详细

创建地图

var map = new BMap.Map("myMap");         // 创建地图实例  myMap是id为myMap的元素    
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标     
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别    
map.enableScrollWheelZoom(); //启用鼠标滚动对地图放大缩小

坐标转换

目前国内主要有以下三种坐标系：

WGS84：为一大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。

非中国地区地图，服务坐标统一使用WGS84坐标。

setTimeout(function(){
        var convertor = new BMapGL.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, COORDINATES_GCJ02, COORDINATES_BD09, translateCallback)
},1000)
/**
     * 坐标常量说明：
     * COORDINATES_WGS84 = 1, WGS84坐标
     * COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
     * COORDINATES_BD09 = 5, 百度bd09经纬度坐标
     * COORDINATES_BD09_MC = 6，百度
**/

（个性化地图）设置地图样式

设计好个性地图样式 ==> 下载json文件 ==> 设置样式

var mapStyle={  style : "midnight" }  
map.setMapStyle(mapStyle);
// avaScript API 2.0中对应的个性化地图服务仅处于维护状态，后续将不再优化迭代，
// 如需使用个性化地图，强烈建议使用JavaScript API 3.0中的个性化服务

添加覆盖物

使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物

覆盖物	类名	说明
抽象基类	Overlay	所有的覆盖物均继承此类的方法
点	Marker	表示地图上的点，可自定义标注的图标
文本	Label	表示地图上的文本标注，您可以自定义标注的文本内容
折线	Polyline	表示地图上的折线
多边形	Polygon	表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色
圆	Circle	表示地图上的圆
信息窗口	InfoWindow	信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开
地面叠加层	GoundOverlay	表示叠加在地图上的图片，图片的链接、大小、位置等属性可以自定义
海量点	PointCollection	针对点的数量很大的情况，可以使用海量点进行展示
自定义覆盖物	自定义	支持通过继承覆盖物基类Overlay，自定义覆盖物

城市搜索

var map = new BMap.Map("container");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
var local = new BMap.LocalSearch(map, {      
    renderOptions:{map: map}      
});      
local.search("天安门");

地图类型（图层）切换

var mapType = 0; //三种地图切换的标记
function switchMap() {
        if (mapType == 0) {
            map.setMapType(BMAP_HYBRID_MAP); //卫星路网
            mapType = 1;
        } else if (mapType == 1) {
            map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
            mapType = 2;
        } else if (mapType == 2) {
            map.setMapType(BMAP_NORMAL_MAP); //普通地图
            mapType = 0;
        }
    }

鼠标绘制

在页面的头部应用鼠标绘制工具开源库的文件，在代码中实例化鼠标绘制工具

// 在页面的头部应用鼠标绘制工具开源库的文件
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

 // 在代码中实例化鼠标绘制工具
  var styleOptions = {
    strokeColor:"red",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式，solid或dashed。
}
    //实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
    },
    circleOptions: styleOptions, //圆的样式
    polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    rectangleOptions: styleOptions //矩形的样式
});  
//添加鼠标绘制工具监听事件，用于获取绘制结果
this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete);
// overlaycomplete方法是为了判断绘制的覆盖物是否满足要求，
// 例如是否在范围内，是否大小合适，是否超出覆盖物的个数限制
// 满足条件的就将覆盖物的信息（overlay，drawingMode等等）存储起来，
// 用来实现撤销或者超出总数删除第一个覆盖物等操作，
// 同时在绘制满足条件之后查询基站，以及覆盖物区域人数等信息

GeoUtils 在DrawingManager鼠标绘制之后

是一套基于百度地图API二次开发的开源的代码库。目前提供多个lib库，帮助开发者快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。

1. isPointInPolygon 判断一个地图标注点是否在多边形区域里

var polygon = new BMap.Polygon([  
        new BMap.Point(106.607477,29.544864),  
        new BMap.Point(106.613572,29.548324),  
        new BMap.Point(106.619357,29.537421),  
        new BMap.Point(106.612988,29.537079),  
        new BMap.Point(106.615359,29.541143)  
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形  
    map.addOverlay(polygon);   //增加多边形  
  
        var ppoint = new BMap.Point(106.613087,29.540485);  
  
         var result=BMapLib.GeoUtils.isPointInPolygon(ppoint, polygon);

2. getPolygonArea

// 计算多边形面或点数组构建图形的面积,注意：坐标类型只能是经纬度，且不适合计算自相交多边形的面积
return BMapLib.GeoUtils.getPolygonArea(pointArrs)

mapv 引用顺序在GeoUtils之后

Mapv 是一款基于百度地图的大数据可视化开源库,可以用来展示大量的点、线、面的数据,每种数据也有不同的展示类型,如直接打点、热力图、网格、聚合等方式展示数据。

1. 引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=yourKey"></script>
<script src="http://mapv.baidu.com/build/mapv.js"></script>

2. 初始化图层

// mapv图层散点数据格式
var points = [{
	Geometry:{
		//样式为点
		type : "Point",
		//点在地图中的经纬度
		Coordinates: [111.68,29.05] 
	},
	//点填充颜色
	fillStyle : "#00cc66",
	//点大小
	Size : 5
}];
var options1 = {
           draw : 'category',
           size : 3,
           //mapv层绑定方法
           methods : {
               //可以绑定点击方法（不限于点击点，点击其他位置也触发）
               click : function(item){
                   //item:点的信息，点中点的时候有值，否则为空
                   //item的内容是散点数据中全部内容
                   if(item){
                       console.log(item);
                   }
               },
               //鼠标移动事件
               mousemove:function(item){
					if(item){
						console.log(item);
					}
			   }
           }
       };

// mapv图层散点图配置项

this.myMap = new BMap.Map('newMap', { enableMapClick: false });
var dataSet = new mapv.DataSet(points);
var myLayer = new mapv.baiduMapLayer(this.myMap,dataSet,options1);

3. 常用api

图层隐藏

myLayer.hide()

图层显示

myLayer.show()

修改配置项

参数的格式是object.options={/要修改的配置项/}

myLayer.update({
	options:{}
});

重置配置项

如果在原有的配置项上有追加的配置项，或者是删减一些配置项，应当使用setOptions方法

myLayer.setOptions({
	size:12
	//....配置项
});

图层销毁

myLayer.destroy();
//这个方法的实现是myLayer.hide();myLayer.unbindEvent();unbindEvent()方法作用是解绑图层事件

激活被销毁的图层

myLayer.show();
myLayer.bindEvent();

刷新数据

当散点数据有变化的时候可使用如下方法

dataSet.set(points);