百度地图API 快速入门

碎像2024-05-10 11:24

一、创建一个应用

创建成功可以在应用程序中查看到自己的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)https://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)https://lbsyun.baidu.com/index.php?title=open/jsdemoAPI参数参考文档

百度地图JSAPI WebGL v1.0类参考 (bcebos.com)https://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)https://lbsyun.baidu.com/solutions/mapvdata

八、web服务APIweb服务API | 百度地图API SDK (baidu.com)https://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)

相关推荐
大数据编程之光14 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
爪哇学长28 分钟前
双指针算法详解：原理、应用场景及代码示例
java·数据结构·算法
ExiFengs31 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj12345678933 分钟前
JDK1.8新增特性
java·开发语言
捂月39 分钟前
Spring Boot 深度解析：快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
繁依Fanyi44 分钟前
简易安卓句分器实现
java·服务器·开发语言·算法·eclipse
慧都小妮子1 小时前
Spire.PDF for .NET【页面设置】演示：打开 PDF 时自动显示书签或缩略图
java·pdf·.net
m51271 小时前
LinuxC语言
java·服务器·前端
IU宝1 小时前
C/C++内存管理
java·c语言·c++
瓜牛_gn1 小时前
依赖注入注解
java·后端·spring
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示