百度地图DEMO

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>百度地图Demo01</title>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=9f3caf0f96e461b6e78d6d5bf6c7a425"></script>

    <style type="text/css">

        html{height:100%}

        body{height:100%;margin:0px;padding:0px}

        #BaiduMap{ height:600px; width:1000px;}

    </style>

    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        window.onload = function () {

            //页面完全加载后执行

        }

        function btn01() {

            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //设置中心点及缩放级别

        }

        function btn02() {

            map.addControl(new BMap.NavigationControl()); //地图平移缩放控件

        }

        function btn03() {

            map.addControl(new BMap.ScaleControl()); //比例尺控件

            map.addControl(new BMap.OverviewMapControl()); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图

            map.addControl(new BMap.MapTypeControl()); //地图类型控件

            map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

        }

        function btn04() {

            map.addControl(new BMap.GeolocationControl()); //定位控件，针对移动设备

        }

    </script>

</head>

<body>

    <div>

        <h2>百度地图DEMO</h2>

    </div>

    <div>

        <input id="Button1" type="button" value="设置中心坐标" onclick="btn01();" />

        <input id="Button2" type="button" value="添加地图平移缩放控件" onclick="btn02();" />

        <input id="Button3" type="button" value="添加其它控件" onclick="btn03();" />

        <input id="Button4" type="button" value="添加定位控件（移动设备）" onclick="btn04();" />

    </div>

    <div id="BaiduMap">

    </div>

    <script type="text/javascript">

        var map = new BMap.Map("BaiduMap");          // 创建地图实例

        var point = new BMap.Point(116.404, 39.915);  // 创建点坐标

        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

    </script>

</body>

</html>

百度地图 JS API开发Demo01的更多相关文章

  1. 百度地图JS API不能使用position:fixed

    用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时,js会报如下错误: Uncaught TypeError: Cannot read property 'offse ...

  2. 关于百度地图js api的getCurrentPosition定位不准确的解决方法

    很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. //创建查询对象 var geolocation = ne ...

  3. 百度地图 js api 实现 line 居中显示

    项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...

  4. 高德地图JS API 开发小结

    项目中有一块功能要用到高德地图,所以,想把编码小结一下. 首先是地图的初始化 var map = new AMap.Map("mapDiv", {                  ...

  5. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

  6. 百度地图js lite api 支持点聚合

    百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer:  http ...

  7. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  8. 百度地图LBS应用开发代码

    最近因为工作需要,领导要我将51地图API开发的一个应用迁移到百度地图,或者说用百度地图API进行重写,实现同样的功能.我先是把现有的这个51地图的应用了解了一下,然后就试着用百度地图做一些demo, ...

  9. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

随机推荐

  1. mysql之 Innobackupex全备恢复（原理、演示）

    一.  Innobackupex恢复原理    After creating a backup, the data is not ready to be restored. There might b ...

  2. CentOS7自动补齐

    cenos7,最小安装,做服务器嘛.但是发现tab键的自动补齐功能没有:其实可以直接把centos7作为yum源,然后直接安装bash-completion  yum install -y bash- ...

  3. 增加 [确定] and [失败]系统提示

    增加 [确定] and  [失败]系统提示 #!/bin/bash. /etc/init.d/functionsaction "true" /bin/falseaction &qu ...

  4. hihoCoder1296:约瑟夫问题

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho的班级正在进行班长的选举,他们决定通过一种特殊的方式来选择班长. 首先N个候选人围成一个圈,依次编号为0.. ...

  5. gcc和g++使用澄清

    一:gcc与g++比较 编译c/c++代码的时候,有人用gcc,有人用g++,于是各种说法都来了,譬如c代码用gcc,而 c++代码用g++,或者说编译用gcc,链接用g++,一时也不知哪个说法正确, ...

  6. Mina2中IoService

    Apache MINA 2 是一个开发高性能和高可伸缩性网络应用程序的网络应用框架.它提供了一个抽象的事件驱动的异步 API,可以使用 TCP/IP.UDP/IP.串口和虚拟机内部的管道等传输方式. ...

  7. Redis codis 搭建测试

    codis Codis 是一个分布式 Redis 解决方案, 对于上层的应用来说, 连接到 Codis Proxy 和连接原生的 Redis Server 没有明显的区别,有部分命令支持 Codis ...

  8. Spring学习九 Servlet相关

    servlet作用: 它驻留在 Web 服务器上,处理新来的请求和输出的响应.它与表示无关,实际上也不它应该与表示有关. 作为一名专业编程人员,您碰到的大多数 Java servlet 都是为响应 W ...

  9. 数组可以直接转换为DataRow

    string[] cc=new string[3]{...}; Dt.Rows.Add(cc);

  10. 问题：c# json解析；结果：c# 解析JSON的几种办法

    c# 解析JSON的几种办法 欲成为海洋大师,必知晓海中每一滴水的真名. 刚开始只是想找一个转换JSON数组的方法,结果在MSDN翻到一大把. 搜索过程中免不了碰到一大堆名词:WCF => Da ...