百度地图API 快速入门

发布于：2024-05-10 ⋅ 阅读:(24) ⋅ 点赞:(0)

一、创建一个应用

创建成功可以在应用程序中查看到自己的ak密钥

二、基本使用

2.1 显示地图

在static下创建demo1.html （将密钥换成自己的就可以显示地图了）

示例：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>

2.2开启鼠标滚轮缩放（默认关闭）

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

2.3设置地图的旋转角度和倾斜角度

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度

// 禁止地图旋转和倾斜可以通过配置项进行设置
var map = new BMapGL.Map("allmap",{
    enableRotate: false,
    enableTilt: false
});

2.4 添加控件

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

demo1.html:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.setHeading(64.5);   //设置地图旋转角度
    map.setTilt(73);       //设置地图的倾斜角度

    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);
</script>
</body>
</html>

三、点、线、面

3.1向地图中添加标注

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

在百度地图的开发文档中打开坐标拾取器，这里以北京站为例，先获取北京站的坐标为116.433661,39.908903，然后替换point中的坐标地址。

（记得将密钥换成自己的）

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var point = new BMapGL.Point(116.433661,39.908903);
    var marker = new BMapGL.Marker(point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
</script>
</body>
</html>

显示效果：

3.2 定义标注图标

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   
    // 指定定位位置。  
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
    // 图标中央下端的尖角位置。   
    anchor: new BMapGL.Size(10, 25),   
    // 设置图片偏移。  
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
    imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
});     
    // 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker);

示例：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var point = new BMapGL.Point(116.433661,39.908903);
    // var marker = new BMapGL.Marker(point);        // 创建标注
    // map.addOverlay(marker);                     // 将标注添加到地图中

    var myIcon = new BMapGL.Icon("markers.jpg", new BMapGL.Size(87, 71), {
        // 指定定位位置。
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
        // 图标中央下端的尖角位置。
        anchor: new BMapGL.Size(0, 0),
        // 设置图片偏移。
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。
        imageOffset: new BMapGL.Size(0, 0)   // 设置图片偏移
    });
    // 创建标注对象并添加到地图
    var marker = new BMapGL.Marker(point, {icon: myIcon});
    map.addOverlay(marker);
</script>
</body>
</html>

3.3监听标注事件

marker.addEventListener("click", function(){   
    alert("您点击了标注");   
});

3.4 添加折线

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

3.5 添加多边形

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

3.6 添加圆形

可以参考官方文档

百度地图JSAPI WebGL v1.0类参考 (bcebos.com)icon-default.png?t=N7T8https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b14

    var point = new BMapGL.Point(116.433661,39.908903);
    var circle = new BMapGL.Circle(point,1000,
        {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.8});
    map.addOverlay(circle);

四、地图事件

4.1 监听地图的单击事件 

map.addEventListener('click', function(e) {
        alert('click!')
});

4.2 在回调函数中添加一些逻辑

map.addEventListener('click', function(e) {
    alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
    var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
    alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
});

4.3 移除事件监听

map.addEventListener('click', handleClick);
function handleClick (e) {
    alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
    var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
    alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
}
map.removeEventListener('click', handleClick);

五 、地球模式地图

5.1 变更地图类型为地球

map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

六、检索服务

API示例文档

open | 百度地图API SDK (baidu.com)icon-default.png?t=N7T8https://lbsyun.baidu.com/index.php?title=open/jsdemoAPI参数参考文档

百度地图JSAPI WebGL v1.0类参考 (bcebos.com)icon-default.png?t=N7T8https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a0b1tiles

6.1 关键字检索

查询单个地点

    var local = new BMapGL.LocalSearch(map, {
        renderOptions:{map: map}
    });
    local.search("景点");

查询多个地点，例如查询100个地点：加上pageCapacity：100

    var local = new BMapGL.LocalSearch(map, {
        renderOptions:{map: map},
        pageCapacity:100
    });
    local.search("景点");

6.2  圆形区域搜索

    var point = new BMapGL.Point(116.404, 39.915);
    var circle = new BMapGL.Circle(point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);
    var local =  new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
    local.searchNearby('餐馆',point,1000);

七、数据可视化

MapV开发文档 (baidu.com)icon-default.png?t=N7T8https://lbsyun.baidu.com/solutions/mapvdata

八、web服务APIweb服务API | 百度地图API SDK (baidu.com)icon-default.png?t=N7T8https://lbsyun.baidu.com/faq/api?title=webapi

准备工作

首先，创建一个服务端的应用程序

白名单填写，不受限制

0.0.0.0/0 

使用在线格式化工具对Json数据格式化

在线代码格式化 (oschina.net)

 8.1坐标转换器

坐标转换 | 百度地图API SDK (baidu.com)

import cn.hutool.core.util.StrUtil;

import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;

public class TestBaiduWebApi {
    private String ak = "您的密钥";

    @Test
    public void test(){
        String url = "https://api.map.baidu.com/geoconv/v2/?coords=114.21892734521,29.575429778924&model=1&ak={}";

        url = StrUtil.format(url,ak);

        String body = HttpRequest.get(url).execute().body();
        System.out.println(body);

    }
}

8.2 普通定位

普通IP定位 | 百度地图API SDK (baidu.com)

返回的是Json数据，需要对该Json数据格式化，这样方便查看数据

import cn.hutool.core.util.StrUtil;

import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;

public class TestBaiduWebApi {
    private String ak = "您的密钥";

    @Test
    public void test(){
        String url = "https://api.map.baidu.com/location/ip?ip=111.206.214.37&coor=bd09ll&ak={}";

        url = StrUtil.format(url,ak);

        String body = HttpRequest.get(url).execute().body();
        System.out.println(body);

    }
}

功能与服务

8.3 搜索（地点输入提示）

地点检索 | 百度地图API SDK (baidu.com)

import cn.hutool.core.util.StrUtil;

import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;

public class TestBaiduWebApi {
    private String ak = "I0DvCqBEOnwCdNwFXDvZjDBKioDf9S31";

    @Test
    public void test(){
        String url = "https://api.map.baidu.com/place/v2/suggestion?query=天安门&region=北京&city_limit=true&output=json&ak={}";

        url = StrUtil.format(url,ak);

        String body = HttpRequest.get(url).execute().body();
        System.out.println(body);

    }
}

8.4 路线规划（驾驶）

路线规划（v2） | 百度地图API SDK (baidu.com)

import cn.hutool.core.util.StrUtil;

import cn.hutool.http.HttpRequest;
import org.junit.jupiter.api.Test;

public class TestBaiduWebApi {
    private String ak = "您的密钥";

    @Test
    public void test(){
        String url = "https://api.map.baidu.com/direction/v2/driving?origin=40.01116,116.339303&destination=39.936404,116.452562&ak={}";

        url = StrUtil.format(url,ak);

        String body = HttpRequest.get(url).execute().body();
        System.out.println(body);
    }
}

九、BMapGLib

huiyan-fe/BMapGLLib: 百度地图JSAPI GL版JavaScript开源工具库 (github.com)

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布