如何在网页中调用百度地图API
转载地址:http://www.cnblogs.com/milkmap/archive/2011/02/22/1960004.html
【百度地图API】建立全国银行位置查询系统(一)——如何创建地图
<摘要>你将在第一章中学会以下知识:
- 如何创建一个网页文件
- 怎样利用百度地图API建立一张2D地图,以及3D地图
- 如何添加对地图进行鼠标和键盘操作的功能
-------------------------------------------------------------------------------------------------------------------
一、创建网页文件
粘贴以下代码至记事本中,保存文件为bank1-1.htm文件。
点击这里运行程序。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
</head>
<body>
在这里填入你的地图程序
</body>
</html>
二、使用百度地图API建立一张简单的地图
1、引用API的js,放置bank1-1.htm的<head></head>中
说明:
v=1.1这是API的版本,表明是1.1版本的。
sercices=false是指,不开启地图服务,例如公交驾车查询等。
2、设置地图容器的样式,放置<head></head>中
说明:
制定容器高度后,方能显示出地图。
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:100%}
</style>
你还可以自己规定容器的高度、宽度,边框颜色等。比如
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
3、在<body></body>中放置地图容器
说明:id号是唯一的,在创建地图的js中,要与此id对应起来。
4、在</body></html>中放置自己的js
说明:
创建地图使用new BMap.Map,创建点使用new BMap.Point。
创建地图需要设置地图中心点,与地图级别。1级最大,能看见全球;18级最小,最详细。
其中地图级别的对应关系为,4级-国; 8级-省, 12级-市, 18级-街道。
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
</script>
4、一张2D地图就创建完毕了。接下来,你可以运行你的地图程序。
点击这里运行程序。
三、制作3D地图
说明:
说明:
使用 BMAP_PERSPECTIVE_MAP 使地图变成3D类型。
设置3D地图,需要首先setCurrentCity,
设置当前城市。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
map.setCurrentCity("北京市"); //设置当前城市
</script>
</html>
四、添加对地图进行鼠标和键盘操作的功能
开启滚轮缩放功能,该功能默认是禁用的。
关闭双击放大功能,该功能默认是开启的。
disableDoubleClickZoom(); //关闭双击放大功能
开启键盘操作功能,该功能默认禁用。
键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。
下面我们来看一下完整的程序。点击这里运行程序。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>酸奶小妹——百度地图API学习</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#milkMap{height:400px;width:600px;border:1px solid blue;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>
</head>
<body>
<div id="milkMap" style="float:left;"></div>
<div style="float:right;width:400px;">
<p>开启滚轮缩放</p>
<p>关闭双击放大</p>
<p>开启键盘操作</p>
<p>说明:键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。</p>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("milkMap"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
map.setMapType(BMAP_PERSPECTIVE_MAP); //修改地图类型为3D地图
map.setCurrentCity("北京市"); //设置当前城市
map.enableScrollWheelZoom(); //开启滚轮缩放功能
map.disableDoubleClickZoom(); //关闭双击放大功能
map.enableKeyboard(); //开启键盘操作功能
</script>
</html>
更多功能,请查看API官网->类参考->Map类 ,你可以看到很多关于地图的操作。
如何在网页中调用百度地图API相关推荐
- nuxt项目中调用百度地图api
1:配置代理 2:封装接口 // 该项目涉及到多个跨域,这里将请求前缀注释, //在api下的map.js文件中封装接口export default ({$axios},inject) => { ...
- vue中调用百度地图api
最近呢,由于工作需要,自己搭一个简单的h5应用给公司的客户,方便预约来访时间,然后写了小半年react-native的我,终于能写web了-(题外话题外话),然后我就欣然拿起久未使用的vue(好吧,还 ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
- android 调用百度地图规划,Android 调用百度地图API
一.到 百度地图开发平台下载SDK 1.点击自定义下载 2.下载自己想要的功能包我这里选了三个 3.获取密钥 获取密钥之前我们要新建一个应用 填写好相关的信息 二. 新建一个项目工程 1. 把下载好的 ...
- C#调用百度地图API入门解决BMap未定义问题
本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...
- 在网页中插入百度地图(实例)
步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地 ...
- python调用百度地图API爬取西安市POI数据
任务前提 做该项目之前,首先得有基础知识: 编程语言:python 编译工具:PyCharm 网络爬虫相关知识,xpath库,numpy,pandas等库. 任务准备: 去百度地图开放平台申请密匙:h ...
- centerandzoom 无效_Django调用百度地图api在地图上批量增加标记点
在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区.根据需求坐标在地图上添加若干个标记点,并批量的为各个标记点设置 ...
- 在网页中插入百度地图(Wayde-实例)
摘要:进入:http://api.map.baidu.com/lbsapi/creatmap/ (创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用)... 转载请注明来源:在网页中插 ...
最新文章
- SpringBoot (四) :SpringBoot整合使用JdbcTemplate
- 京东2017校招前端主观题汇总
- python与shell校验IP地址合法性
- 模型独立学习:多任务学习与迁移学习
- LeetCode--160--相交链表
- html文本可选择,如何用javascript选择html文本?
- SpringMVC日期类型转换问题处理方法归纳
- centos7查看mysql进程显示端口_CentOS查看进程端口号以及kill操作
- SAP License:SAP与ORACLE到底谁更强?
- 人人都能有数字替身:量子动力FACEGOOD发布AI交互实时数字人
- jquery跨域调用webService
- 如何查看手机的android版本信息,怎么查看手机型号、配置、版本【图文教程】...
- ios android 自动化测试工具,AndroidIOS自动化测试框架整合升级方案
- 【Java开发】Java实现黑客帝国代码雨
- 数字图像处理冈萨雷斯版学习(一)
- 2020长安杯网站重构
- r星服务器无响应,gta5r星游戏服务器出现了未知错误 | 手游网游页游攻略大全
- 配置Cross-Origin的几种方法
- java点赞功能的实现,类似微信点赞,用户仅能点赞一次,基于redis进行操作
- openresty完全开发指南_谷歌 Fuchsia OS 进入开发者测试阶段,它真的会代替安卓吗?...
热门文章
- 使用Scrapy爬取掘金热门文章的分析和实现
- L2-039 清点代码库
- elementui固定表格头部
- 商务口语 - 意见分歧话题
- 谷歌创始人拉里·佩奇不为人知的故事
- 腾讯、阿里、百度高工都点头称赞的“Redis 实战超全笔记”,不看你就亏大发了
- 计算机指纹识别的原理步骤,指纹识别技术的基本原理及过程
- java文本框输入数字_Java 文本框输入数字限制以及输入数字大小限制
- 【PAT】B1032 挖掘机技术哪家强 (20 分)_C语言实现
- 自动化测试 selenium 模块 webdriver使用