百度地图API的使用教程以及案例(一)

简介: 百度地图API的使用教程以及案例

百度地图API的使用教程以及案例

一、注册

百度地图:掌握当前的位置在网页显示位置,插入地图 拖拽,点击事件。

注意:定位 距离 公交 不关心

官网: 点我进入百度地图官网

应用场景:网页插入百度地图

二、获取账号和密钥

三、插入地图

创建地图容器元素 设置大小

#container {
            width: 1300px;
            height: 600px;
            border: 1px solid #999;
        }
<div id="container"></div>

引用百度地图API文件

<script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

创建地图实例

四、添加控件

效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 1300px;
            height: 600px;
            border: 1px solid #999;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        //1.创建地图实例
        var map = new BMap.Map("container");
        //2.设置中心点坐标  BMap命名空间下的Point类来创建一个坐标点
        var point = new BMap.Point(116.404, 39.915);
        //3.地图初始化,同时设置地图展示级别  (3-19)
        map.centerAndZoom(point, 15);
        //4.鼠标滚轮  开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        //5.添加控件
        //平移缩放控件 NavigationControl   PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能
        map.addControl(new BMap.NavigationControl());
        //比例尺 ScaleControl 默认位于地图左下方,显示地图的比例关系
        map.addControl(new BMap.ScaleControl());
        //缩略地图 OverviewMapControl 默认位于地图右下方,是一个可折叠的缩略地图
        map.addControl(new BMap.OverviewMapControl());
        //地图类型  MapTypeControl  默认位于地图右上方
        map.addControl(new BMap.MapTypeControl());
        var opts = {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            type: BMAP_NAVIGATION_CONTROL_SMALL //类型
        }
        map.addControl(new BMap.NavigationControl(opts));
    </script>
</body>
</html>


百度地图API的使用教程以及案例(二)https://developer.aliyun.com/article/1384441

相关文章
|
9天前
|
JSON BI API
商城上货API接口的实战案例
在商城上货过程中,API接口扮演着至关重要的角色。以下是对商城上货API接口的实战分析,涵盖其主要功能、类型、安全性以及实战案例等方面。
|
6天前
|
XML 数据可视化 API
商品详情数据实战案例,API接口系列
淘宝商品详情数据在电商领域具有广泛的应用价值,而淘宝商品详情API接口则为开发者提供了获取这些数据的重要途径。通过合理利用这些接口和数据,可以提升业务效率、优化用户体验,为电商行业的发展注入新的活力。
|
3月前
|
存储 Linux API
Linux源码阅读笔记08-进程调度API系统调用案例分析
Linux源码阅读笔记08-进程调度API系统调用案例分析
|
3月前
|
JSON 数据管理 关系型数据库
【Dataphin V3.9】颠覆你的数据管理体验!API数据源接入与集成优化,如何让企业轻松驾驭海量异构数据,实现数据价值最大化?全面解析、实战案例、专业指导,带你解锁数据整合新技能!
【8月更文挑战第15天】随着大数据技术的发展,企业对数据处理的需求不断增长。Dataphin V3.9 版本提供更灵活的数据源接入和高效 API 集成能力,支持 MySQL、Oracle、Hive 等多种数据源,增强 RESTful 和 SOAP API 支持,简化外部数据服务集成。例如,可轻松从 RESTful API 获取销售数据并存储分析。此外,Dataphin V3.9 还提供数据同步工具和丰富的数据治理功能,确保数据质量和一致性,助力企业最大化数据价值。
169 1
|
3月前
|
开发者
告别繁琐代码,JSF标签库带你走进高效开发的新时代!
【8月更文挑战第31天】JSF(JavaServer Faces)标准标签库为页面开发提供了大量组件标签,如`&lt;h:inputText&gt;`、`&lt;h:dataTable&gt;`等,简化代码、提升效率并确保稳定性。本文通过示例展示如何使用这些标签实现常见功能,如创建登录表单和展示数据列表,帮助开发者更高效地进行Web应用开发。
42 0
|
3月前
|
UED 存储 自然语言处理
【语言无界·体验无疆】解锁Vaadin应用全球化秘籍:从代码到文化,让你的应用畅游世界每一个角落!
【8月更文挑战第31天】《国际化与本地化实战:构建多语言支持的Vaadin应用》详细介绍了如何使用Vaadin框架实现应用的国际化和本地化,提升用户体验和市场竞争力。文章涵盖资源文件的创建与管理、消息绑定与动态加载、日期和数字格式化及文化敏感性处理等方面,通过具体示例代码和最佳实践,帮助开发者构建适应不同语言和地区设置的Vaadin应用。通过这些步骤,您的应用将更加灵活,满足全球用户需求。
56 0
|
3月前
|
API 数据库 UED
全面解析构建高性能API的秘诀:运用Entity Framework Core与异步编程提升Web应用响应速度及并发处理能力的详细指南与实践案例
【8月更文挑战第31天】本文详细介绍了如何利用 Entity Framework Core (EF Core)的异步编程特性构建高性能 API。通过创建基于 EF Core 的 .NET Core Web API 项目,配置数据库上下文,并定义领域模型,文章展示了如何使用异步方法进行数据查询、加载相关实体及事务处理。具体代码示例涵盖了 GET、POST、PUT 和 DELETE 操作,全面展示了 EF Core 异步编程的优势,有助于提升 API 的响应速度和处理能力。
42 0
|
3月前
|
前端开发 API 开发者
【React状态管理新思路】Context API入门:从零开始摆脱props钻孔的优雅之道,全面解析与实战案例分享!
【8月更文挑战第31天】React 的 Context API 有效解决了多级组件间状态传递的 &quot;props 钻孔&quot; 问题,使代码更简洁、易维护。本文通过电子商务网站登录状态管理案例,详细介绍了 Context API 的使用方法,包括创建、提供及消费 Context,以及处理多个 Context 的场景,适合各水平开发者学习与应用,提高开发效率和代码质量。
39 0
|
3月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
68 0
|
API 定位技术 Android开发
百度地图移动版API 1.2.2版本(Android)地图偏移的最佳解决办法
Import import com.baidu.mapapi.CoordinateConvert;import com.baidu.mapapi.GeoPoint; Code GeoPoint p = new GeoPoint(x, y);GeoPoint p2 = CoordinateConvert.
691 0

热门文章

最新文章