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 相关文章推荐
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
javascript实现画板功能
Apr 12 Javascript
用javascript制作qq注册动态页面
利用javaScript处理常用事件详解
Apr 14 #Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
You might like
php递归遍历多维数组的方法
2015/04/18 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
php-msf源码详解
2017/12/25 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
线程和进程的区别及Python代码实例
2015/02/04 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python创建系统目录的方法
2015/03/11 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
你对IPv6了解程度
2016/02/09 面试题
教师简历自我评价
2014/02/03 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
商场租赁意向书
2014/07/30 职场文书
第二次离婚起诉书
2015/05/18 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书