百度地图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. secret CRT 会话光标不闪烁问题

    点击 选项->会话选项 然后在取消即可,就有了闪烁的光标,应该是个bug.

  2. hdu 1028 && hdu 1398 && hdu 1085 && hdu 1171 ——生成函数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1028 就是可以用任意个1.2.3....,所以式子写出来就是这样:(1+x+x^2+...)(1+x^2+ ...

  3. LR录制https协议设置方法

    1.New一个脚本,option --> port mapping --> 选择第二个  WinNet level data 2.Run-time Setting --> Prefe ...

  4. Thread之一：线程生命周期及五种状态

    <Thread之一:线程生命周期及五种状态> <juc线程池原理(四): 线程池状态介绍> 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较 ...

  5. filter中获取spring bean

    import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import ja ...

  6. maven如何过滤占位符

    今天遇到一个问题,就是properties文件中赋值用的这种形式${xxx},真正的值是配置在pom的profile中,但是未生效. 后来找到原因,原来是pom中少了一段代码: <build&g ...

  7. 解决django不能以本机ip地址访问

    在使用django框架来架设网站时,我们测试一般是通过django的开发服务器来完成,但是我们可以看到生成的地址是127.0.0.1:8000这样的话,我们在外网就无法访问了. 解决办法是通过传入第三 ...

  8. “百度杯”CTF比赛 十一月场(Misc)

    签到题: 题目提示: 文件在i春秋的ctf2群里,加群下载文件 下载下来之后发现有压缩密码 题目提示有提示解压密码:key:ichunqiumemeda 打开文件,得到flag 签到题2: 点击下载附 ...

  9. Oracle 在约束中使用正则表达式

    ALTER TABLE mytest ADD CONSTRAINT CK_REG CHECK(REGEXP_LIKE(TEST, '^[0-9]{1,3}(\.[0-9]){0,1}$'));

  10. [解决问题] pandas读取csv文件报错OSError解决方案

    python用padans.csv_read函数出现OSError: Initializing from file failed 问题:文件路径中存在中文 解决办法:修改文件路径名为全英文包括文件名