百度地图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. OTL调用Oracle存储过程

    OTL很早前用过,今天写东西要调存储过程,程序写完了,调试死活通不过,折腾了一早晨. 最后才发现错误,这里总结一下: 1.代码写的不规范. 有个参数后边少写了个“,”以至于总是抱错.而单独写的测试例子 ...

  2. [转]深入详解javascript之delete操作符

    最近重新温习JS,对delete操作符一直处于一知半解的状态,偶然发现一篇文章,对此作了非常细致深入的解释,看完有茅塞顿开的感觉,不敢独享,大致翻译如下. 原文地址:http://perfection ...

  3. Java 虚拟机-Java内存区域

    简要介绍Java的内存区域: 运行时数据区域 HotSpot虚拟机对象 一.概览 二.运行时数据区域 2.1 程序计数器 Program Counter Register,代表当前线程所执行的字节码的 ...

  4. python中print的几种用法

    python中的print有几种常用的用法: 1. print("first example") 2. print("second", "exampl ...

  5. Poj 2395 Out of Hay( 最小生成树 )

    题意:求最小生成树中最大的一条边. 分析:求最小生成树,可用Prim和Kruskal算法.一般稀疏图用Kruskal比较适合,稠密图用Prim.由于Kruskal的思想是把非连通的N个顶点用最小的代价 ...

  6. 蓝桥杯 历届试题 PREV-34 矩阵翻硬币

    历届试题 矩阵翻硬币   时间限制:1.0s   内存限制:256.0MB 问题描述 小明先把硬币摆成了一个 n 行 m 列的矩阵. 随后,小明对每一个硬币分别进行一次 Q 操作. 对第x行第y列的硬 ...

  7. Qt多选框

    1.获取并显示复选框文本内容 ui->label->setText(ui->comboBox->currentText());

  8. bash 中的行处理命令 awk

    转自:http://blog.chinaunix.net/uid-23302288-id-3785105.html

  9. oracle的自增长

    mysql的自增长非常容易,一个 AUTO_INCREMENT 就搞定,可是oracle就不行了 下面是oracle的自增长 #创建一个表CREATE TABLE T_TEST_DEPARTMENTS ...

  10. MySQL mysqldump与innobackupex 组合备份

    此脚本,在01点进行一次逻辑全备份,03点进行一次物理全备份,中午12点进行一次增量物理备份 #! /bin/bash #05 01,03,12 * * * mysql /data/mysqldata ...