震惊——JS中百度地图开放平台API尽然是这样使用
百度地图js——API使用
基本使用
引用百度API资源
<!--引用资源-->
<!--百度地图基础API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hHK8kZt3v2umxvzLtST4rCMyiZRFnfbc"></script>
百度地图容器
<div id="container"></div>
实例化百度地图js代码
// 创建地图实例,"container"就是百度地图的div容器
var map = new BMap.Map("container");
//创建坐标点,第一个参数是经度,第二个参数是纬度
var point = new BMap.Point(111.68, 29.05);
//设置地图中心点和缩放级别,级别区间为3~18
map.centerAndZoom(point, 12);
//允许滚轮缩放
map.enableScrollWheelZoom();
添加比例尺控件
// 左下角,添加比例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
//左上角,添加默认缩放平移控件
var top_left_navigation = new BMap.NavigationControl();
map.addControl(top_left_control); // 测距离的
map.addControl(top_left_navigation); // 左导航默认
效果图
添加监听事件
(详细事件列表请查阅百度地图JSAPI2.0参考类)
//zoomend是缩放监听
ap.addEventListener('zoomend',function(){//获取当前比例尺级别var zoom = map.getZoom();
});
为地图添加自定义控件
function ShowLegendControl() {this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT ;//默认在左下角this.defaultOffset = new BMap.Size(5, 5);// 默认偏移量}ShowLegendControl.prototype = new BMap.Control();ShowLegendControl.prototype.initialize = function(map) {// 创建一个DOM元素var div = document.createElement("div");div.id = "legend";div.style.background="White";div.style.padding="5px";div.style.opacity=" 0.8";div.style.borderRadius = "5px 5px 5px 5px";div.style.width = "100px";div.style.height = "108px";div.style.position = "absolute";$("<div style='border-radius:5px 5px 5px 5px;background-color:#ff0000;text-align:center;height:24px;width:99%;font-size:10px;line-height:25px;color:white'>图例1</div>").appendTo(div);$("<div style='border-radius:5px 5px 5px 5px;background-color:#ffbb00;text-align:center;height:24px;width:99%;margin-top:3px;font-size:10px;line-height:25px;color:white'>图例2</div>").appendTo(div);$("<div style='border-radius:5px 5px 5px 5px;background-color:#00aaff;text-align:center;height:24px;width:99%;margin-top:3px;font-size:10px;line-height:25px;color:white'>图例3</div>").appendTo(div);$("<div style='border-radius:5px 5px 5px 5px;background-color:#00ff04;text-align:center;height:24px;width:99%;margin-top:3px;font-size:10px;line-height:25px;color:white'>图例4</div>").appendTo(div);// 添加DOM元素到地图中map.getContainer().appendChild(div);// 将DOM元素返回return div;}// 创建控件var showLegendCtrl = new ShowLegendControl();// 添加到地图当中map.addControl(showLegendCtrl);//最后微调自定义控件位置$("#legend").css('left',"30px");$("#legend").css('bottom',"60px");
效果图
震惊——JS中百度地图开放平台API尽然是这样使用相关推荐
- 上手百度地图--开放平台必懂API使用场合(PC端)
本篇整理仅适用与没有接触或对百度地图开放平台API基本没有概念的人 拖拽类 启用地图拖拽 默认启用 enableDragging() 对应的禁止方法 disableDragging( ) 启用地图习惯 ...
- php 百度逆地理编码,百度地图开放平台 Web服务API --Geocoding API (地理编码和逆地理编码)...
百度地图开放平台地理编码服务和逆地理编码服务的api文档地址:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geoco ...
- 百度地图开放平台轻量路径规划
百度地图开放平台轻量路径规划 背景 思路 完整代码 代码解读 结果截图 注意事项 背景 由于要做等时圈研究,手头上有一些poi数据,如小区地理位置信息,地铁站点的地理位置信息,想通过等时圈把两者连接起 ...
- 在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制 1,先去高德地图开放平台申请账号注册流程不再赘述; 2,在我的应用中创建key,选择web端Js点击提交生成; 3,生成后可以看到 ...
- 百度地图开放平台wgs84,gcj02转bd09
百度地图开放平台wgs84,gcj02转bd09 完整代码 代码解读 参考文献 开局一张图,故事全靠编,上图是上海市257个地铁站bd09坐标和wgs84坐标的差距,可以看到bd09较wgs84往右上 ...
- 后端根据百度地图真实路径距离_百度地图开放平台介绍--路线规划
百度地图开放平台路线规划服务是结合实时交通,为用户提供覆盖国内外的路线规划服务.路线规划也是我们用户最常用到的功能之一,比如旅行时需要到达另外一个地方,通过百度地图可以快速规划距离最短路线或耗时最短路 ...
- 前端vue3项目中百度地图的使用api及实例
目录 一.使用百度地图的准备工作? 二.百度地图的简单Demo 三.百度地图的常用api有哪些? 1.百度地图的类型? 2.百度地图控件 一.使用百度地图的准备工作? 1.先注册百度账号 --> ...
- Java调用百度AI开放平台API
百度AI开放平台 百度AI开放平台是全球领先的人工智能服务平台,面向开发者及企业开放120多项全球领先的AI能力和软硬一体组件,并提供 EasyDL定制化训练平台.对话系统开发平台UNIT.自定义模板 ...
- 【百度智能云】教程:连接百度ai开放平台api接口并完成语音识别的任务
前言与介绍 本文章介绍了如何在Pycharm上用python语言简单的对连接百度ai开放平台的语音识别功能api端口的调用,并在代码里实现了现录音识别内容. 平台与相关工具 windows10.Pyc ...
最新文章
- C++/STL Bitset (转)
- 360加固逆向脱壳之过反调试
- 互联网1分钟 |1115
- Scala隐式转换之隐式类
- linux如何导入种子文件格式,在 Linux 上使用 transmission 制作种子
- 生成有时间限制的二维码_微信公众号渠道二维码怎么制作?监测渠道效果的利器来了...
- linux运维面板_phpstudy linux web面板(小皮面板)V0.2版本正式发布
- 自增主键与UUID的优缺点
- 【spark系列3】spark开发简单指南
- STM32工作笔记0044---什么是二极管什么是三极管
- decode 大于比较 小于_关于Decode的用法,是不是里面的条件项不能超过10?
- 乐玩自动化测试模块_深圳大数据测试培训推荐班
- OPENJDK8 32位版本,JAVA启动时Xmx参数的影响
- PDF以及PPT技巧
- 笔记本电脑开不了机怎么重装系统?小熊U盘重装win7系统教程
- 4.1%的利率,100万贷款,30年还款,我们每月能少还多少房贷呢
- 最后采用加权求和的方式得到样本的_一种婴幼儿视力自动检测方法与流程
- python plt绘制柱状图形+柱状图增加数字标注
- Matlab小课堂1
- Harmonious Attention Network for Person Re-Identification
热门文章
- stm32 DMA2D使用中断LVGL,提高LVGL帧率
- [Unity]VRTK V4的导入和使用
- 什么叫单模光纤_单模光纤和多模光纤的区别是什么
- win7计算机 管理缺失文件夹,win7电脑文件夹选项不见了怎么解决
- import 库、from 库 import 函数、from 库 impor *、import 库 as 别名的区别
- 教你如何搜索pois(兴趣点),制作可视化作品
- 学位论文写作的正确打开方式:程序员的理性与倔强
- 过日子·混日子·奔日子
- python打开本地浏览器_python如何实现打开浏览器
- word文件限制编辑如何解除