百度地图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

相关文章
|
28天前
|
API 微服务
Traefik 微服务 API 网关教程(全)
Traefik 微服务 API 网关教程(全)
|
2月前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
在数字化时代,Web API成为连接前后端及构建复杂应用的关键。RESTful API因简洁直观而广受欢迎。本文通过实战案例,介绍Python Web开发中的RESTful API设计哲学与技巧,包括使用Flask框架构建一个图书管理系统的API,涵盖资源定义、请求响应设计及实现示例。通过准确使用HTTP状态码、版本控制、错误处理及文档化等技巧,帮助你深入理解RESTful API的设计与实现。希望本文能助力你的API设计之旅。
61 3
|
3月前
|
JavaScript API PHP
一言API搭建教程:搭建属于自己的文言API接口
这篇文章介绍了如何搭建一个属于自己的文言API接口。文章首先介绍了准备工作,包括代码编辑器和两个文件的创建。然后详细说明了如何将代码复制到php文件中并上传至网站根目录。最后给出了一个示例代码来调用文言API接口。整个过程非常简单。
63 1
|
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 还提供数据同步工具和丰富的数据治理功能,确保数据质量和一致性,助力企业最大化数据价值。
147 1
UnityWebRequest教程☀️2021,你还在使用过时的 www API吗?
UnityWebRequest教程☀️2021,你还在使用过时的 www API吗?
|
3月前
|
开发框架 .NET API
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
177 3
|
3月前
|
API 数据库 索引
indexedDB 操作库IDBWRAPPER 教程翻译及API翻译第二部分part2
indexedDB 操作库IDBWRAPPER 教程翻译及API翻译第二部分part2
|
3月前
|
SQL Shell API
python Django教程 之 模型(数据库)、自定义Field、数据表更改、QuerySet API
python Django教程 之 模型(数据库)、自定义Field、数据表更改、QuerySet API
|
3月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
60 0