百度地图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. PHP实现图片压缩的两则实例(转)

    本文介绍了PHP实现图片压缩的两种方法,读者可以根据具体应用参考或加以改进,以适应自身应用需求!废话不多说,主要代码部分如下: 实例1: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  2. BZOJ3052：[WC2013]糖果公园

    浅谈莫队:https://www.cnblogs.com/AKMer/p/10374756.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?i ...

  3. SpringCloud微服务实战——第一章序言读书笔记

    什么是微服务架构 是系统架构上的一种设计风格,将独立的系统拆分成多个小型服务,这些小型服务都在各自独立的进程中运行,服务之间基于HTTP的RESTful API进行通信协作. 每个小型服务都围绕各自的 ...

  4. Python 函数之函数调用

    Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数abs,只有一个参数.可以直接从Python的官方网站查看文档: http://doc ...

  5. Installing Redis more properly

    Installing Redis more properly Running Redis from the command line is fine just to hack a bit with i ...

  6. laravel 多个where的连接使用

    在查询的时候需要用到多个where条件来查询 1.直接多个where连接 ->where()->where() 2.把查询条件 放到where数组$where中 然后 ->where ...

  7. Python：内置split()方法

    描述 Python split()通过指定分隔符对字符串进行切片,如果参数num 有指定值,则仅分隔 num 个子字符串 语法 split()方法语法: str.split(str="&qu ...

  8. du 命令 -目前的目录所占的磁盘空间

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  9. L2-023. 图着色问题(暴力)

    L2-023. 图着色问题 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 图着色问题是一个著名的NP完全问题.给定无向图 G ...

  10. L2-020. 功夫传人(dfs+vector 或者 邻接矩阵+dij+优先队列）

    L2-020. 功夫传人 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一门武功能否传承久远并被发扬光大,是要看缘分的.一般来 ...