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继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
iScroll.js 使用方法参考
May 16 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
用javascript制作qq注册动态页面
利用javaScript处理常用事件详解
Apr 14 #Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
You might like
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
python中requests模块的使用方法
2015/04/08 Python
在Python中使用第三方模块的教程
2015/04/27 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
python Zmail模块简介与使用示例
2020/12/19 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
爱心活动计划书
2014/04/26 职场文书
采购员岗位职责
2015/02/03 职场文书
自我推荐信格式模板
2015/03/24 职场文书
新郎结婚感言
2015/07/31 职场文书