原文:【百度地图API】建立全国银行位置查询系统（一）——如何创建地图

<摘要>你将在第一章中学会以下知识：

  1. 如何创建一个网页文件
  2. 怎样利用百度地图API建立一张2D地图，以及3D地图
  3. 如何添加对地图进行鼠标和键盘操作的功能

-------------------------------------------------------------------------------------------------------------------

一、创建网页文件

粘贴以下代码至记事本中，保存文件为bank1-1.htm文件。

点击这里运行程序。

<!DOCTYPE html><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是指，不开启地图服务，例如公交驾车查询等。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=false"></script>

2、设置地图容器的样式，放置<head></head>中

说明：

制定容器高度后，方能显示出地图。

<style type="text/css">          html{height:100%}          body{height:100%;margin:0px;padding:0px}          #milkMap{height:100%}  </style>

你还可以自己规定容器的高度、宽度，边框颜色等。比如

<style type="text/css">          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对应起来。

<div id="milkMap"></div>

4、在</body></html>中放置自己的js

说明：

创建地图使用new BMap.Map，创建点使用new BMap.Point。

创建地图需要设置地图中心点，与地图级别。1级最大，能看见全球；18级最小，最详细。

其中地图级别的对应关系为，4级-国； 8级-省， 12级-市， 18级-街道。

<script type="text/javascript">      var map = new BMap.Map("milkMap");          // 创建地图实例      var point = new BMap.Point(116.404, 39.915);  // 创建点坐标      map.centerAndZoom(point, );                 // 初始化地图，设置中心点坐标和地图级别  </script>

4、一张2D地图就创建完毕了。接下来，你可以运行你的地图程序。

点击这里运行程序。

三、制作3D地图

说明：

说明：

使用 BMAP_PERSPECTIVE_MAP 使地图变成3D类型。设置3D地图，需要首先setCurrentCity，设置当前城市。

目前，只支持北上广深四个城市的3D图。

点击这里运行程序。

<!DOCTYPE html><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>

四、添加对地图进行鼠标和键盘操作的功能

开启滚轮缩放功能，该功能默认是禁用的。

关闭双击放大功能,该功能默认是开启的。

enableScrollWheelZoom();        //开启滚轮缩放功能disableDoubleClickZoom();       //关闭双击放大功能

开启键盘操作功能，该功能默认禁用。

键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级。

enableKeyboard();               //开启键盘操作功能

下面我们来看一下完整的程序。点击这里运行程序。

<!DOCTYPE html><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】建立全国银行位置查询系统（一）——如何创建地图的更多相关文章

  1. 【百度地图API】建立全国银行位置查询系统（五）——如何更改百度地图的信息窗口内容？

    原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...

  2. 【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注

    原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?&quo ...

  3. 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  4. 【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件

    原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器——notepad++: 如何为地图添加控件——鱼骨. ...

  5. 【高德地图API】一句话搞定webmap（一）——轻地图组件

    原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...

  6. Android应用中使用百度地图API定位自己的位置（二）

    官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发人员们提供了例如以下类型的地图覆盖物: ...

  7. java实现根据高德地图API接口进行地址位置解析，将地址转化为经纬度

    原创文章,转载请注明,欢迎评论和更改. 1,所需额外ar包,import net.sf.json.JSONObject; 2,完整源代码代码 package com.travel.util; impo ...

  8. Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置

    通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...

  9. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

随机推荐

  1. Cocos2d-x场景功能描述的生命周期

    层(Layer)的生命周期函数有例如以下: init().初始化层调用. onEnter().进入层时候调用. onEnterTransitionDidFinish(). 进入层并且过渡动画结束时候调 ...

  2. Cocos2d-x 如何输出 Android用电话 腰带Tag的Log刊物

    于Cocos2d-x根据代码 #if(CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) #define LOGAnroid( ...) #else if (CC_TAR ...

  3. sizeof运营商

    sizeof它是C语言的关键字,它计算对象所占用的字节数.采用sizeof通过计算对象的大小,占用的对象是一个良好的编程习惯二手. ★你得到的内置型尺寸 一些内置类型的大小会随着体系结构的不同而不同, ...

  4. bzoj 3333: 排队计划 解决问题的方法

    [原标题] 3333: 排队计划 Time Limit: 20 Sec  Memory Limit: 128 MB Submit: 161  Solved: 71 [Submit][Status] D ...

  5. java得到clientIP地址和MAC住址

    最近的项目应该得到client的mac住址. 服务器移植centos制,arm建筑箱.client手机和移动设备.(其他方案也应该是一流的似的) 首先,要获得ip住址: 依据client的http请求 ...

  6. Class撑起了OOP世界的天。Class类是OO的基本单元，OO的世界都是通过一个一个的类协作完成的，提高软件的重用性、灵活性和扩展性（转）

    引言 在OO的工作中,我们一定会涉及到类,抽象类和接口.那么类和抽象类以及接口到底扮演的什么角色? 本文主要是从人类社会的角度阐述类与抽象类以及接口的“社会”关系,从而让我们抛弃书上的那些死记硬背的概 ...

  7. [Oracle] 分析功能（1）- 语法

    语法概览 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGJhbm90ZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQ ...

  8. ER模型

    一.什么是ER模型 实体-联系图(Entity-RelationDiagram)用来建立数据模型,在数据库系统概论中属于概念设计阶段,形成一个独立于机器.独立于DBMS的ER图模型.通常将它简称为ER ...

  9. swift新手入门视频教程-08-枚举

    我自己录制的swift菜鸟入门,大家拍砖,有什么问题能够在这里留言. 主要内容: 枚举语法(Enumeration Syntax) 匹配枚举值与Swith语句(Matching Enumeration ...

  10. 拆分字段优化SQL

    拆分字段优化SQL 今天看到一条用函数处理连接的SQL,是群里某位网友的,SQL语句如下: SELECT SO_Order.fdate , SO_Order.fsn FROM so_order INN ...