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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
微信小程序实现animation动画
Jan 26 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
用javascript制作qq注册动态页面
利用javaScript处理常用事件详解
Apr 14 #Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
You might like
咖啡常见的种类
2021/03/03 新手入门
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
js读取cookie方法总结
2014/10/31 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
JavaScript模块详解
2017/12/18 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python常用库大全及简要说明
2020/01/17 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
大学生水文观测实习自我鉴定
2013/09/29 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
促销活动总结怎么写
2014/06/25 职场文书
项目转让协议书
2014/10/27 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
结婚典礼主持词
2015/06/29 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
MySQL主从切换的超详细步骤
2022/06/28 MySQL