今天在写微网页中遇见了调用百度地图这个问题：在一个容器中显示地图信息如图（设计图截图）

然后在网上查了接口：http://api.map.baidu.com/，就是这个东东，当然不止这个，还有几个必选的参数。

这是我的完整的接口：http://api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3

完整的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="css/common.css" type="text/css"></link>

    <link rel="stylesheet" href="css/contact.css" type="text/css"></link>

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

    <script type="text/javascript" src="js/common.js"></script>

    <body>

        <div id='page_contact'>

            <div class="content">

                <div class="maptxt">联系我们：</div>

                <!--百度地图容器-->

                   <div style="width:96%;height:260px;" id="dituContent"></div>

            </div>

        </div>

    </body>

    <script type="text/Javascript">

     //创建和初始化地图函数：

     function initMap(){

         createMap();//创建地图

         setMapEvent();//设置地图事件

         addMapControl();//向地图添加控件

     }

     //创建地图函数：

     function createMap(){

         var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

         var point = new BMap.Point(104.701711,31.540648);//定义一个中心点坐标

         map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中

         window.map = map;//将map变量存储在全局

     }

     //地图事件设置函数：

     function setMapEvent(){

         map.enableDragging();//启用地图拖拽事件，默认启用(可不写)

         map.enableScrollWheelZoom();//启用地图滚轮放大缩小

         map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

         map.enableKeyboard();//启用键盘上下左右键移动地图

     }

     //地图控件添加函数：

     function addMapControl(){

         //向地图中添加缩放控件

     /* var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

     map.addControl(ctrl_nav);

         //向地图中添加缩略图控件

     var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

     map.addControl(ctrl_ove);

         //向地图中添加比例尺控件

     var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

     map.addControl(ctrl_sca); */

     }

     initMap();//创建和初始化地图psd.knowsky.com

 </script>

</html>

如果想添加伸缩按钮，去掉addMapControl函数中的注释就能实现，这个代码是参考百度地图的写法，希望大家多多指教，改进！

网页或WEB应用或PC端浏览器调用百度地图API的更多相关文章

  1. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  2. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

  3. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  4. 关于调用百度地图api在自己写的网页中实现和解决在https中正常显示

    百度地图开发者:http://lbsyun.baidu.com/index.php?title=jspopular 我们打开百度地图开发者网站,注册一个百度账号,然后打开控制台,开始创建应用:(如果你 ...

  5. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  6. 【Egret】实现web页面操作PC端本地文件操作

    Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...

  7. Fiddler4工具配置及调试手机和PC端浏览器

    Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...

  8. 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换

    查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...

  9. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

随机推荐

  1. Leagal or Not —— 拓扑排序（王道）

    Problem Description ACM-DIY is a large QQ group where many excellent acmers get together. It is so h ...

  2. POJ3264 Balanced Lineup 【线段树】+【单点更新】

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 32778   Accepted: 15425 ...

  3. RabbitMQ搭建

    1. RabbitMQ简介 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议 2.安装与部署 RabbitMQ的安装依赖E ...

  4. PostgreSQL学习资料

    我的PostgreSQL学习笔记:http://note.youdao.com/share/?id=2e882717fc3850be9af503fcc0dfe7d0&type=notebook ...

  5. 让Qt Creator支持Windows Phone 8开发

    让Qt Creator支持Windows Phone 8开发 近期QtCreator3.2出了.修复了一些Bug.比上一个版本号3.1.2要好了一些. 因为在上一个版本号(Qt for WinRT自带 ...

  6. J2EE之EJB

     EJB是sun的JavaEEserver端组件模型,最大的用处是部署分布式应用程序.EJB把使用java开发的server组件的部署和开发进行标准化. 凭借java跨平台的优势.用EJB技术部署的分 ...

  7. libevent2源码分析之五：关键的调用链

    用一个调用链来表示函数调用的流程,看起来更直观.根据上面的分析,总结了一些重要的调用链. 初始化 event_base_new event_base_new_with_config min_heap_ ...

  8. Selenium2 Python 自己主动化測试实战学习笔记（五）

    7.1 自己主动化測试用例 无论是功能測试.性能測试和自己主动化測试时都须要编写測试用例,測试用例的好坏能准确的体现了測试人员的经验.能力以及对项目的深度理解. 7.1.1 手工測试用例与自己主动化測 ...

  9. 使用sql语句实现添加、删除约束

    --主键约束(Primary Key constraint):要求主键列的数据唯一,并且不允许为空. --唯一约束(Unique Constraint):要求该列唯一,允许为空,但只能出现一个空值. ...

  10. Python课程之元组

    元组(Tuple) 一.定义: 与列表(list)不同的是,元组不支持修改,但是若元组中的元素本身是可变对象,如列表,则可以修改.元素之间用逗号隔开,并且元素的类型可以任意. 二.操作: 1.创建:直 ...