使用百度地图API这么简单的嘛

最新推荐文章于 2022-04-01 17:50:42 发布
最新推荐文章于 2022-04-01 17:50:42 发布
阅读量604 收藏 1
点赞数
文章标签： 百度 js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45310564/article/details/106751320
版权

使用百度地图API这么简单的嘛

哎最终还是变成了前端程序员。。。

最近项目上要求加上百度地图定位 --之前就只有高德地图

然后就去百度地图官网学习啦，里面提供的代码实例太全啦我都不用敲代码啦。

我们只需要跟着开发指南一步一步往下走即可–

如果你是第一次使用百度地图那么你需要

访问官网 哈哈哈这不是废话嘛,如果你够细心的话我想你看完官网的开发指南就不需要看我下面的内容了…

重要步骤如下
在这里插入图片描述

你唯一可能遇到问题的地方是在获取服务密匙的时候
在这里插入图片描述

当时没有仔细看下面给出的提示,试了好久不知道Referer该填什么,为此创建了好几个ak。然后仔细阅读了一遍发现只要填 * 就可以了。【我是自己测试所以使用的 * ,该怎么填根据实际需求来就可以了】
在这里插入图片描述

下面就是使用啦^_^

<!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>百度地图</title>
    <style type="text/css">
        /*设置容器样式
        设置容器样式大小，使地图充满整个浏览器窗口*/
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #mapdiv{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密匙"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 创建地图实例
            var map = new BMap.Map("mapdiv");
            // 初始化地图，设置中心点坐标和地图级别
            map.centerAndZoom("苏州", 11);
            //启动滚轮缩放
            map.enableScrollWheelZoom(true);
            //添加常用控件
            map.addControl(new BMap.NavigationControl()); //平移控件
            map.addControl(new BMap.ScaleControl()); //比例尺
            map.addControl(new BMap.OverviewMapControl()); //缩放地图
        })
    </script>
</head>
<body>
<div id="mapdiv"></div>
</body>
</html>

在这里插入图片描述

添加坐标覆盖物
function addMarker(longitude, latitude) {
            var point = new BMap.Point(longitude,latitude);
            var marker = new BMap.Marker(point);
            bmap.addOverlay(marker);
        }

在这里插入图片描述

事件

mouseover

鼠标移动到覆盖物上触发的事件

marker.addEventListener("mouseover",function () {
    var label = new BMap.Label("<table>日期 : 2020-6-14</table>",{
        offset:new BMap.Size(-50,30)
    });
    //自定义样式
    label.setStyle({
        color:"red",
        fontSize : "12px"
    });
    marker.setLabel(label);
});

mouseout

鼠标从覆盖物上移走触发的事件

marker.addEventListener("mouseout",function () {
	bmap.removeOverlay(marker.getLabel());
});

click

鼠标点击覆盖物触发的事件

marker.addEventListener("click",function () {
    window.location.href = "http://www.baidu.com";
})
海量点
function massPoint() {
    var points = new Array();
    points.push(new BMap.Point(120.58531600000003,34.212386));
    points.push(new BMap.Point(130.58531600000003,33.292386));
    points.push(new BMap.Point(110.58531600000003,32.123566));
    points.push(new BMap.Point(125.58531600000003,31.571236));
    points.push(new BMap.Point(115.58531600000003,34.681236));
    points.push(new BMap.Point(135.58531600000003,33.218686));
    points.push(new BMap.Point(120.91823123000003,30.298886));
    points.push(new BMap.Point(120.62342234266303,31.268916));
    var options = {
        size: BMAP_POINT_SIZE_SMALL,
        color: '#d340c3'
    };
    var pointCollection = new BMap.PointCollection(points,options);
    bmap.addOverlay(pointCollection);
}

在这里插入图片描述

完整代码

<!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>百度地图</title>
    <style type="text/css">
        /*设置容器样式
        设置容器样式大小，使地图充满整个浏览器窗口*/
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #mapdiv{height:100%}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密匙"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        var bmap;
        $(function () {
            // 创建地图实例
            bmap = new BMap.Map("mapdiv");
            // 初始化地图，设置中心点坐标和地图级别
            bmap.centerAndZoom("苏州", 11);
            //启动滚轮缩放
            bmap.enableScrollWheelZoom(true);
            //添加常用控件
            bmap.addControl(new BMap.NavigationControl()); //平移控件
            bmap.addControl(new BMap.ScaleControl()); //比例尺
            bmap.addControl(new BMap.OverviewMapControl()); //缩放地图
            addMarker(120.58531600000003,31.298886);
            //massPoint();
        });

        function addMarker(longitude, latitude) {
            var point = new BMap.Point(longitude,latitude);
            var marker = new BMap.Marker(point);
            bmap.addOverlay(marker);
            //添加鼠标移动到覆盖物上的事件
            marker.addEventListener("mouseover",function () {
                var label = new BMap.Label("<table>日期 : 2020-6-14</table>",{
                    offset:new BMap.Size(-50,30)
                });
                label.setStyle({
                    color:"red",
                    fontSize : "12px"
                });
                marker.setLabel(label);
            });
            //鼠标移开清除Label
            marker.addEventListener("mouseout",function () {
                bmap.removeOverlay(marker.getLabel());
            });
            //设置标注点击事件
            marker.addEventListener("click",function () {
                window.location.href = "http://www.baidu.com";
            })
        }
        
        function massPoint() {
            var points = new Array();
            points.push(new BMap.Point(120.58531600000003,34.212386));
            points.push(new BMap.Point(130.58531600000003,33.292386));
            points.push(new BMap.Point(110.58531600000003,32.123566));
            points.push(new BMap.Point(125.58531600000003,31.571236));
            points.push(new BMap.Point(115.58531600000003,34.681236));
            points.push(new BMap.Point(135.58531600000003,33.218686));
            points.push(new BMap.Point(120.91823123000003,30.298886));
            points.push(new BMap.Point(120.62342234266303,31.268916));
            var options = {
                size: BMAP_POINT_SIZE_SMALL,
                color: '#d340c3'
            };
            var pointCollection = new BMap.PointCollection(points,options);
            bmap.addOverlay(pointCollection);
        }
    </script>
</head>
<body>
<div id="mapdiv"></div>
</body>
</html>

开发中需要多多查看百度地图api提供的参考类…

小菜鸡加油。。。加油

2021_fc
关注
百度地图标注api在地图上选择地址后获取地址和坐标Map marker
12-21
百度地图标注api在地图上选择地址后获取地址和坐标,在marker标注上添加注释在百度地图容器中创建一个地图将地址解析结果显示在地图上,并调整地图视野/启用地图拖拽事件，默认启用(可不写)启用地图滚轮放大缩小启用鼠标双击放大，默认启用(可不写)启用键盘上下左右键移动地图添加平移缩放控件 添加比例尺控件 添加缩略地图控件 添加地图类型控件 如果有一问请加QQ417257080 答案随便
百度地图API 快速上手实例 ！！！
weixin_30735391的博客
09-25 61
今天又来了一个新需求 ， 就是点击某人头出现一张地图， 在地图上标注此人出现的位置， 听起来很难的一个需求 ， 之前也没有接触过类似的应用 ， 好吧， 最后使用了百度的一个开源的地图API ， 下面话不多说， 还是直接上代码吧 ， 如上图， 需求就是点击查看地图的时候， 出现一个地图标明当前用户的位置 ， 接下来就介绍百度地图API的用法吧， 当然既然借助别人的API ...
百度地图api应用范例
08-18
百度地图api应用范例。适合新手。
vba《调用Google地图获取地址经纬度填入Excel并存储到数据库》
12-04
vba《调用Google地图获取地址经纬度填入Excel并存储到数据库》
避开百度地图api配额限制爬取地图数据
12-23
代码借助selenium实现了百度地图的动态抓取，可以直接从百度地图获取数据，很好的解决了api端口的配额限制。
百度地图api_百度地图API_百度地图_
10-03
总之，百度地图API是一个功能强大的开发工具，它可以帮助开发者构建各种与地图相关的应用，无论是简单的地图展示，还是复杂的路径规划和数据分析，都能得心应手。通过学习和掌握百度地图API，开发者可以为用户提供...
C#百度地图API.rar_C#_C# 百度地图_fallq3k_地图 _百度地图API
07-15
本压缩包"**C#百度地图API.rar**"提供了一套关于C#与百度地图API结合使用的参考资料，对于那些需要在自己的应用中集成地图功能的开发者来说非常有价值。下面将详细解释其中涉及的关键知识点： 1. **C#编程语言**: ...
js+百度地图api测量面积
最新发布
03-23
本文将深入探讨如何使用JavaScript和百度地图API来模拟测量面积的功能。 首先，我们需要理解百度地图API的基本概念。百度地图API（Baidu Maps API）是百度提供的一套基于JavaScript语言的Web服务接口，它允许开发者...
百度地图API快速上手
01-08
百度地图API自定义地图 地图生成工具基于百度地图JS api v2.0版本开发，使用请申请密匙。 了解如何申请密匙 申请密匙 //创建和初始化地图函数： function initMap(){ createMap();//创建地图 ...
使用百度地图API读取EXCEL（xlsx）并返回行政区信息
qq_40454764的博客
12-03 1690
使用百度地图API读取EXCEL（xlsx）并返回行政区信息 1.读excel（使用openpyxl） 2.使用百度地图API进行加载并查询信息，查询得的xml文件保存在临时路径下 3. 使用xml.dom.mini进行parse临时文件 4.得到的结果写入Excel文件中（读写Excel可以定义一个类，或者函数） 下面是结果啦，网页版markdown我真的不太好用。。。 二话不说，上代码 #!...
2021-09-23 最全的百度地图API使用基础JS
橙子yq的代码世界
09-23 880
最全的百度地图使用基础 1.引入百度地图 <scripttype="text/javascript"src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥(在百度地图官网申请)"></script> 2.html(设置宽高) <div id="container"></div> 3.创建地图 const BMapGL = window.BMap; var mp = new BMa...
前端工程师必备之----百度地图
叶才鑫
10-25 5645
1.初始化地图，并设置地图中心点 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 当然也可以根据城市名称设置地图的中心点： map.centerAndZoom("上海",15); ...
百度地图POI数据获取并转为Excel文件
热门推荐
莫邪莫急的博客
05-26 2万+
本文主要介绍百度地图POI数据获取及后续处理的过程。
前端项目中使用百度地图api，含实例
TeAmo__的博客
04-01 1万+
前言 一、使用百度地图接口的步骤 二、简单例子 1.第一个地图 2.控件 3.静态/动态添加点圈线面 4.文字标注、信息窗口 5. Web服务API-IP定位服务 6.Web服务API-地点检索服务 三、vue项目中使用百度地图接口的简单方式 1.public下方的index.html中导入 2. .vue文件中 前言 项目中加入地图是很常见的需求，今天以百度地图为例，总结一下引入地图的方法与实例 一、使用百度地图接口的步骤 1.注册百度地图的开发者帐号👇 百度地图http.
2021年HTML中百度地图的使用
码蝗的博客
03-12 236
<!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" /> <!-- 以下的链接地址中最后ak请自行到百度开发者中心申请 --> .
百度地图API使用教程：从获取密钥到创建地图
"这篇教程介绍了如何使用百度地图API，包括获取API密钥、引入API以及创建地图实例的基本步骤。" 在开发过程中，如果需要在网页上集成地图功能，百度地图API是一个常用的选择。以下是详细使用百度地图API的步骤： 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值