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

相关文章
|
22天前
|
Kubernetes 应用服务中间件 nginx
百度搜索:蓝易云【使用Kubernetes部署Nginx应用教程】
现在,你已经成功在Kubernetes集群上部署了Nginx应用。通过访问Service的外部IP地址,你可以访问Nginx服务。
25 4
|
24天前
|
网络安全 数据中心
百度搜索:蓝易云【Proxmox软件防火墙的配置教程】
现在,你已经完成了Proxmox软件防火墙的配置。请确保你的防火墙规则设置正确,以保护你的Proxmox VE环境免受未经授权的访问和网络攻击。
69 5
|
29天前
|
Ubuntu
百度搜索:蓝易云【ubuntu 16.04升级到18.04教程】
请注意,在升级过程中可能会出现一些问题,例如软件包依赖关系或配置文件冲突。在升级前,建议备份重要数据,以免数据丢失。如果你在升级过程中遇到问题,可以查看相关错误信息并尝试解决。
31 2
|
29天前
|
Ubuntu 数据安全/隐私保护
百度搜索:蓝易云【ubuntu安装qemu教程】
现在,你已经成功在Ubuntu系统中安装了QEMU。你可以使用QEMU来模拟x86、ARM等体系结构的虚拟机,并在其中运行不同的操作系统。请注意,QEMU的使用可能涉及到一些复杂的参数和配置,具体使用方法可以参考官方文档或相关教程。
29 1
|
30天前
|
Ubuntu Linux 数据安全/隐私保护
百度搜索:蓝易云【ubuntu系统安装gcc-7、g++-7教程】
请注意,以上步骤是针对Ubuntu系统的。如果你使用的是其他Linux发行版,请相应地调整命令。
96 6
|
30天前
|
Ubuntu 关系型数据库 MySQL
百度搜索:蓝易云【ubuntu下Mysql安装与root密码重置教程】
请注意,以上步骤是针对Ubuntu系统的。如果你使用的是其他Linux发行版,请相应地调整命令。
100 1
|
19天前
|
API
GEE案例分析——利用sentinel-3数据计算空气污染指数(Air Pollution Index,简称API)
GEE案例分析——利用sentinel-3数据计算空气污染指数(Air Pollution Index,简称API)
22 0
|
4天前
|
Linux Shell 网络安全
百度搜索:蓝易云【Centos7虚拟机忘记密码-修改密码教程】
请注意,这些步骤需要在虚拟机界面或控制台中操作,如果是通过SSH连接,需要确保操作的正确性,以免造成系统不可用。修改密码后请妥善保管好密码,以确保系统的安全性。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
137 8
|
4天前
|
关系型数据库 Linux 数据库
百度搜索:蓝易云【centos7下安装PG、postgis教程】
以上就是在CentOS 7下安装PostgreSQL和PostGIS的简要教程。安装完成后,你就可以在数据库中使用地理空间数据了。请确保按照步骤操作,并且妥善保管数据库密码和服务器的安全性。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
138 2
|
5天前
|
Kubernetes 应用服务中间件 nginx
百度搜索:蓝易云【使用Kubernetes部署Nginx应用教程】
至此,你已经成功部署了一个简单的Nginx应用到Kubernetes集群中。当然,还有很多更复杂的配置和功能可以实现,例如使用Ingress、设置资源限制等,根据实际需求可以进一步深入学习Kubernetes的更多特性和功能。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
168 2

热门文章

最新文章