百度地图API 快速入门

news2024/10/5 19:18:47

一、创建一个应用

创建成功可以在应用程序中查看到自己的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)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1658510.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

HTML4（四）

HTML4（四）

1. 框架标签 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>框架标签</title></head><body><!-- 利用iframe嵌入一个普通网页 --><iframe src"https://www.toutia…
阅读更多...
FPGA+MCU+SDRAM方案，用于服装厂生产过程中以及设计过程中制作样板，剪裁布料

FPGA+MCU+SDRAM方案，用于服装厂生产过程中以及设计过程中制作样板，剪裁布料

FPGAMCUSDRAM方案&#xff0c;用于服装厂生产过程中以及设计过程中制作样板&#xff0c;剪裁布料 客户应用&#xff1a;服装厂制衣 主要功能&#xff1a; 1.支持步进电机、直流电机 2.支持同时3轴电机协调工作 3.支持以太网/USB联机控制 4.支持LCD 屏显示状态 5.支持HP11/…
阅读更多...
AI大模型探索之路-训练篇18：大语言模型预训练-微调技术之Prompt Tuning

AI大模型探索之路-训练篇18：大语言模型预训练-微调技术之Prompt Tuning

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…
阅读更多...
mysql安装及基础设置

mysql安装及基础设置

关系型数据库 MySQL是一种关系型数据库管理系统&#xff0c;采用了关系模型来组织数据的数据库&#xff0c;关系数据库将数据保存在不同的表中&#xff0c;用户通过查询 sql 来检索数据库中的数据。 yum 方式安装 mysql # yum -y install mysql-server # systemctl start my…
阅读更多...
2024 全自动ai生成视频MoneyPrinterTurbo源码

2024 全自动ai生成视频MoneyPrinterTurbo源码

只需提供一个视频 主题 或 关键词 &#xff0c;就可以全自动生成视频文案、视频素材、视频字幕、视频背景音乐&#xff0c;然后合成一个高清的短视频。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89208288 更多资源下载&#xff1a;关注我。
阅读更多...
OSI网络7层的功能介绍

OSI网络7层的功能介绍

目录 1.OSI功能介绍 2.SNA 3.X.25 1.OSI功能介绍 2.SNA SNA: IBM Systems Network Architecture)SNA是IBM公司开发的网络体系结构&#xff0c;在IBM公司的主机环境中得到广泛的应用。一般来说&#xff0c;SNA主要是IBM公司的大型机(ES/9000、S/390等)和中型机(AS/400)的主要…
阅读更多...
SpringSecurity源码分析（RemeberMe）

SpringSecurity源码分析（RemeberMe）

RememberMeServices RememberMeServices 记住我的服务的接口 可以重写实现自己的记住我 public interface RememberMeServices { //建议 org. springframework. security. authentication. RememberMeAuthenticationToken 在大多数情况下使用它&#xff0c;因为它具有相应的身份…
阅读更多...
物理层——计算机网络学习笔记二

物理层——计算机网络学习笔记二

目录 物理层的基本概念 数据通信的基础知识 物理层下面的传输媒体 信道复用技术 图片大部分来源于谢希仁《计算机网络》教材配套的ppt。 这一样都是介绍一下概念性的东西&#xff0c;了解一下就行&#xff0c;就重要性而言不如后面的内容。 物理层的作用&#xff1a;考虑如何才…
阅读更多...
AlphaFold 3 可以预测所有生命分子的结构和相互作用

AlphaFold 3 可以预测所有生命分子的结构和相互作用

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
酷企秀场景elementUi plus可视化diy

酷企秀场景elementUi plus可视化diy

无论网络公司还是政务企业需求的所需的一单可回本的 独立部署集三大功能&#xff1a;电子画册、VR全景、地图秀等功能都可以可视化在线设计 后续免费增加 自定义表单、抽奖活动功能。 源码交付&#xff0c;独立私有化部署&#xff0c;无限多开&#xff0c;可视化设计&#x…
阅读更多...
视频剪辑一键处理技巧：批量分割视频，快速提取m3u8视频

视频剪辑一键处理技巧：批量分割视频，快速提取m3u8视频

随着网络视频的普及和多样化&#xff0c;视频剪辑和处理成为了很多用户的基本需求。在众多的视频处理技巧中&#xff0c;批量分割视频快速提取m3u8视频是常见的操作。本文将介绍如何利用云炫AI智剪一键处理的技巧&#xff0c;轻松完成这些任务&#xff0c;提高视频剪辑的效率。…
阅读更多...
Element ui input 限制只能输入数字,且只能有两位小数

Element ui input 限制只能输入数字,且只能有两位小数

<el-form-item label"整体进度&#xff1a;" prop"number"> <el-input v-model"formInline.number" input"handleInput" placeholder"百分比" clearable></el-input>% </el-form-item&g…
阅读更多...
指针的奥秘（二）：指针与数组的联系+字符指针+二级指针+指针数组+《剑指offer》笔试题

指针的奥秘（二）：指针与数组的联系+字符指针+二级指针+指针数组+《剑指offer》笔试题

指针 一.指针与数组的联系1.数组名的理解2.使用指针访问数组3.一维数组传参的本质 二.字符指针1.字符指针隐藏秘密2.常量字符串3.《剑指offer》笔试题 三.二级指针四.指针数组1.指针数组模拟二维数组 一.指针与数组的联系 1.数组名的理解 也许大部分人认为数组名就是一个名称&…
阅读更多...
前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)

前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)

前言&#xff1a; 扩展运算符又称为Rest运算符&#xff0c;可以实现数组、对象、字符串在语法层面上的展开&#xff0c;达到简化语法的目的&#xff0c;使得我们提高开发效率 主要用法&#xff1a; 在需要解构的变量前加三个点&#xff08;...xxx&#xff09; 具体示例&…
阅读更多...
猿匹配,一款使用环信实现的一个开源聊天应用含服务器

猿匹配,一款使用环信实现的一个开源聊天应用含服务器

前言 之前写了一篇Android开发集成聊天环信SDK3.x简单开始&#xff0c;然后最近得空开发了一款使用环信实现的实时聊天应用&#xff0c;包含简单的服务器端&#xff0c;并开源给大家&#xff0c;有兴趣的同学可以一起搞一下&#xff0c;详细介绍看下边吧 上代码 服务器&#…
阅读更多...
89C52单片机+ESP8266做的物联网+反馈 e4a手机客户端源程序

89C52单片机+ESP8266做的物联网+反馈 e4a手机客户端源程序

资料下载地址&#xff1a;89C52单片机ESP8266做的物联网反馈 e4a手机客户端源程序 MCU是89C52单片机 WiFi模块是ESP8266 其他 8路继电器 电源模块 使用贝壳物联做服务器 还有客户端。 也可以用花生壳做内网穿透&#xff0c;8266做服务器&#xff0c;也可以实现物联以及反馈&a…
阅读更多...
攻击者正在利用AI，对保险公司发起大规模欺诈

攻击者正在利用AI，对保险公司发起大规模欺诈

保险欺诈一直是保险行业面临的重要挑战之一&#xff0c;尤其随着技术的进步&#xff0c;欺诈者也在不断更新其手段&#xff0c;利用AI技术&#xff0c;包括生成式模型、机器学习和数据分析工具等欺骗保险公司&#xff0c;而AI技术的应用正成为他们的新工具&#xff0c;使其犯罪…
阅读更多...
VSCode（安装）

VSCode（安装）

前言 VSCode&#xff08;全称&#xff1a;Visual Studio Code&#xff09;是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全&#xff08;又称 IntelliSense&#xff09;、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和 Git …
阅读更多...
韩顺平0基础学Java——第7天

韩顺平0基础学Java——第7天

p110-p154 控制结构&#xff08;第四章&#xff09; 多分支 if-elseif-else import java.util.Scanner; public class day7{public static void main(String[] args) {Scanner myscanner new Scanner(System.in);System.out.println("input your score?");int s…
阅读更多...
[windows系统安装/重装系统][step-2]BIOS设置UEFI引导、磁盘分区GPT分区、安装系统[含完整操作拍照图片]

[windows系统安装/重装系统][step-2]BIOS设置UEFI引导、磁盘分区GPT分区、安装系统[含完整操作拍照图片]

背景 先准备U盘启动盘和系统镜像: [windows系统安装/重装系统][step-1]U盘启动盘制作&#xff0c;微软官方纯净系统镜像下载 前言&#xff08;略长&#xff0c;建议可跳过&#xff09; 我的笔记本升级了CPU升级了内存后出现了一个小问题&#xff0c; 每次启动徽标显示后会…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023