JavaScript嵌入百度地图API的最详细方法


Posted in Javascript onApril 16, 2021

先看效果图

JavaScript嵌入百度地图API的最详细方法

一、申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码。

1.打开百度地图开放平台

打开网址:http://lbsyun.baidu.com/ 找到首页导航栏的 开发文档

JavaScript嵌入百度地图API的最详细方法

2.然后找到 开发文档 下面的 Web开发 中的 JavaScript API 并打开

JavaScript嵌入百度地图API的最详细方法

打开之后找到 开发指南 并打开,然后找到账号和获取密钥并打开

JavaScript嵌入百度地图API的最详细方法

3.然后进行申请账号申请成为百度开发者 的操作 这过程中需要邮箱进行验证

JavaScript嵌入百度地图API的最详细方法

创建账号完成之后 打开 获取服务密钥(AK)
应用类型选择 浏览器端

JavaScript嵌入百度地图API的最详细方法

4.应用名称根据自己的需要 启用服务 全选 白名单 设置 * 这样全域都可以访问到 安全等级低 仅用于上线版本之前 然后提交

JavaScript嵌入百度地图API的最详细方法

5.提交完成之后 这些设置信息可以在 应用管理 我的应用 中查看

JavaScript嵌入百度地图API的最详细方法

准备工作已经完成 在使用中只需要将(AK)码 (即密钥)写入代码中即可

(AK):7uXqh0qF1FNg7qgwriDofp2Ft3hxGcFb

二、实现首图效果(可以参考开发者指南)

1. 根据Hello World 手册操作

JavaScript嵌入百度地图API的最详细方法

2. 将代码块写入Demo中

将生成的ak的值复制进来

JavaScript嵌入百度地图API的最详细方法

将地图的块元素放到要显示的区域

JavaScript嵌入百度地图API的最详细方法

将js部分写入

JavaScript嵌入百度地图API的最详细方法

<!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>Hello, World</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);
// 初始化地图,设置中心点坐标和地图级别 
</script> 
</body> 
</html>

完成之后 打开页面

JavaScript嵌入百度地图API的最详细方法

3. 开启鼠标滚轮缩放

地图的鼠标滚轮缩放默认是关闭的,需要配置开启。

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

4. 添加标注 并且通过标注获取当前位置经纬度

JavaScript嵌入百度地图API的最详细方法

创建标注

var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中

定义标注图标

function addMarker(point, index){  // 创建图标对象   
    var myIcon = new BMap.Icon("markers.jpg", new BMap.Size(23, 25), {    
        // 指定定位位置。   
        // 当标注显示在地图上时,其所指向的地理位置距离图标左上    
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
        // 图标中央下端的尖角位置。    
        anchor: new BMap.Size(10, 25),    
        // 设置图片偏移。   
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您   
        // 需要指定大图的偏移位置,此做法与css sprites技术类似。    
        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
    });      
    // 创建标注对象并添加到地图   
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
}

点击标注获取当前经纬度

marker.addEventListener("click", function(){    
    alert("当前位置:" + e.point.lng + ", " + e.point.lat);    
});

JavaScript嵌入百度地图API的最详细方法

通过缩放地图 标记自己所在的位置 获取经纬度 写入代码中

JavaScript嵌入百度地图API的最详细方法

JavaScript嵌入百度地图API的最详细方法

现在已经定位到当前位置

JavaScript嵌入百度地图API的最详细方法

此时基本的引入地图已经完成

5. 启用信息窗口

JavaScript嵌入百度地图API的最详细方法

信息窗口是地图上方浮动显示的HTML内容,可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。

注意:同一时刻地图上只能有一个信息窗口处于打开状态。

var opts = {    
    width : 250,     // 信息窗口宽度    
    height: 100,     // 信息窗口高度    
    title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

此时页面效果

JavaScript嵌入百度地图API的最详细方法

6. 自定义信息窗口

var opts = {
        width: 280,     // 信息窗口宽度    
        height:120,     // 信息窗口高度    
        title: ""  // 信息窗口标题   
    }
    var content  = 
    "<h6>信息大厦</h6>" +
    "<img style='float:right;margin:4px' id='imgDemo' src='./1.jpg' white='100px' height='80px' title='信息大厦' />" +
    "<p style='font-size:12px' >郑州信息大厦位于郑州市花园路143号。 郑州信息大楼由楷林公司投资承建。大楼总建筑面积101,235平方米,楼高80米,地上28层,地下2层。</p>"
    
    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象    
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

页面效果已经完成

JavaScript嵌入百度地图API的最详细方法

三、去除地图左下角logo标志级文字

去除之前的

去掉文字,只需要在添加css即可

.BMap_cpyCtrl {
    display:none;
}

去掉地图logo,只需添加css

.anchorBL{
   	 display:none;
}

四、更多功能

查看百度地图开发者手册,

到此这篇关于JavaScript嵌入百度地图API的最详细方法 的文章就介绍到这了,更多相关js百度地图API内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
angular的输入和输出的使用方法
Sep 22 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
用javascript制作qq注册动态页面
利用javaScript处理常用事件详解
Apr 14 #Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP 文件系统详解
2012/09/13 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
js实现返回顶部效果
2017/03/10 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
javascript实现留言板功能
2020/02/08 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
CentOS安装pillow报错的解决方法
2016/01/27 Python
python实现最长公共子序列
2018/05/22 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python版百度语音识别功能
2019/07/09 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
希特勒的演讲稿
2014/05/23 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
网络营销计划
2015/01/17 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
python自动化测试通过日志3分钟定位bug
2021/11/20 Python