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标签在页面中的位置探讨
Apr 11 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
用javascript制作qq注册动态页面
利用javaScript处理常用事件详解
Apr 14 #Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
You might like
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
js Math 对象的方法
2013/09/01 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Vue 数据响应式相关总结
2021/01/28 Vue.js
详解python中requirements.txt的一切
2017/03/03 Python
关于Python数据结构中字典的心得
2017/12/04 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python之字典对象的几种创建方法
2020/09/30 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
个人贷款担保书
2014/04/01 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL