按照惯例，先来一段"Hello World"级别的直观的效果

实现效果：

实现代码：

（WEB工程下直接运行即可）

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>百度GIS</title>

<script src="http://api.map.baidu.com/api?v=1.2"></script>

</head>

<body>

<div id="map" style="width:500px;height:320px;"></div>

<script>

    // 百度地图API功能，创建Map实例

    var map = new BMap.Map("map");

    // 初始化地图,设置中心点坐标和地图级别

    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    //添加地图类型控件

    map.addControl(new BMap.MapTypeControl({

        mapTypes:[

            BMAP_NORMAL_MAP,

            BMAP_HYBRID_MAP

        ]}));

    // 设置地图显示的城市

    map.setCurrentCity("北京");

    // 开启鼠标滚轮缩放

    map.enableScrollWheelZoom(true);

</script>

</body>

</html>

第一步：引入在线百度GIS API，版本：1.2，似乎1.4版本以上需要秘钥

第二步：设置一个div容器， 用来呈现地图，宽度和高度自定

第三步：在<script>里写JS代码控制地图

更多内容，参考官方：

http://developer.baidu.com/map/jsdemo.htm

百度GIS API使用的更多相关文章

  1. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  2. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  3. 深入浅出百度地图API开发系列（1）：前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  4. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

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

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

  6. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

  7. 百度地图api 区级以下行政区划

    我们在使用百度地图api想要展示苏州市吴中区各乡镇的行政区范围: 百度api有提供了“添加行政区划”的示例:http://lbsyun.baidu.com/jsdemo.htm#c1_10 但该功能目 ...

  8. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  9. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

随机推荐

  1. Windows上安装运行hadoop

    0.自己编译安装步骤在这里,有英文版本连接:<英文传送门>. 自己编译尝试后不成功,换为下面使用别人编译好的版本的方法.参考博客:<初学hadoop,windows下安装> 1 ...

  2. Python 读写操作Excel —— 安装第三方库（xlrd、xlwt、xlutils、openpyxl）

    数据处理是 Python 的一大应用场景,而 Excel 则是最流行的数据处理软件.因此用 Python 进行数据相关的工作时,难免要和 Excel 打交道. 如果仅仅是要以表单形式保存数据,可以借助 ...

  3. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  4. Basic Calculator 基本计算器

    2018-09-27 22:02:36 一.Basic Calculator II 问题描述: 问题求解: sign用来保存前一个符号,用num来记录数字,如果碰到一个符号或者到达结尾,则需要进行入栈 ...

  5. Top 命令解析

    TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...

  6. 皮尔逊残差 | Pearson residual

    参考:Pearson Residuals 这些概念到底是写什么?怎么产生的? 统计学功力太弱了!

  7. [LintCode] Serialize and Deserialize Binary Tree（二叉树的序列化和反序列化）

    描述 设计一个算法,并编写代码来序列化和反序列化二叉树.将树写入一个文件被称为“序列化”,读取文件后重建同样的二叉树被称为“反序列化”. 如何反序列化或序列化二叉树是没有限制的,你只需要确保可以将二叉 ...

  8. jq 倒计时

    引入jq 注 在IE和safari 如果时间出现NAN 将时间格式改为YYYY/MM/DD HH:MM:SS 例:var d2 = new Date("2019/02/18 15:59&qu ...

  9. addEventListener调用带参数函数

    当传递参数值时,使用"匿名函数"调用带参数的函数: <body> <button id="btn">click me</butto ...

  10. JS中循环逻辑和判断逻辑的使用实例

    源代码见: https://github.com/Embrace830/JSExample &&和||的理解 a || b:如果a是true,那么b不管是true还是false,都返回 ...