百度地图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. 洛谷【P2024】[NOI2001]食物链

    浅谈并查集:https://www.cnblogs.com/AKMer/p/10360090.html 题目传送门:https://www.luogu.org/problemnew/show/P202 ...

  2. 日志分隔工具Cronolog

    注:本文转载自 https://blog.csdn.net/weixin_38860565/article/details/81633234 Cronolog 分割 Tomcat8 Catalina. ...

  3. 寻找php.ini之旅

    /usr/local/php-fpm/lib/php.ini 可以通过phpinfo()来查看 https://www.cnblogs.com/ChineseMoonGod/p/6474772.htm ...

  4. Python numpy函数：transpose（）

    transpose用于对高维数组进行转置,转置时候需要一个由轴编号组成的元组. 比如说三维的数组,那就对维度进行编号,也就是0,1,2:这样说可能比较抽象.这里的0,1,2可以理解为对shape返回元 ...

  5. -3dB的理解

    -3dB到底是什么?集成运放-3dB带宽又是什么? 以无源高通电路为例,介绍-3dB的意义. 输出与输入只比: Au=Uo/Ui=R/(R+1/j*2*PI*f*C)=1/(1+1/j*2*PI*f* ...

  6. 【转】LTE基本架构

    这篇文章主要介绍LTE的最基础的架构,包括LTE网络的构成,每一个网络实体的作用以及LTE网络协议栈,最后还包括对一个LTE数据流的模型的说明. LTE网络参考模型 这是一张非常有名的LTE架构图,从 ...

  7. Java中Return和Finally执行顺序的实现

    下面这段代码的执行结果是怎样的呢? publc int test(){ int x; try{ x = 1; return x; }catch(Exception e){ x = 2; return ...

  8. 问题：Custom tool error: Failed to generate code for the service reference 'AppVot；结果：添加Service Reference, 无法为服务生成代码错误的解决办法

    添加Service Reference, 无法为服务生成代码错误的解决办法 我的解决方案是Silverlight+WCF的应用,Done Cretiria定义了需要在做完Service端的代码后首先运 ...

  9. DAY15-web框架本质及第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  10. 正确的停止java中的线程

    stop()方法不是一个正确的停止线程方法. 正确的停止方法:设置退出旗标