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

然后在网上查了接口：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. Qt Creator 乱码问题

    当 把linux下的 ,QTproject文件移植到 Windows下时. 出现上图的 乱码现象.  为了,避免因为Windows下和Linux下编码不同,而产生的中文字符乱码的问题,需统一将代码中的 ...

  2. Spark（十二） -- Spark On Yarn & Spark as a Service & Spark On Tachyon

    Spark On Yarn: 从0.6.0版本其,就可以在在Yarn上运行Spark 通过Yarn进行统一的资源管理和调度 进而可以实现不止Spark,多种处理框架并存工作的场景 部署Spark On ...

  3. 轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(二)

    四原型方式 我们创建的每一个函数都有一个通过prototype(原型)属性.这个属性是一个对象,它的用途是包括能够由特定类型 的全部实例共享的属性和方法. 逻辑上能够这么理解:prototypt通过条 ...

  4. ssh2学习-applicationContext.xml文件配置-----<context:annotation-config/>详解

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...

  5. 如何将微信小程序页面内容充满整个屏幕

    修改该页面的wxss文件 /* pages/weather/weather.wxss */ .weather{ position: fixed; height: 100%; width: 100%; ...

  6. PHP中单引号双引号使用原则

    PHP中单引号双引号使用原则   1.PHP中尽量用单引号,HTML代码全部用双引号   2.在包含变量的时候,用双引号可以简化操作   3.复杂的情况下用大括号包起来   4 PHP引号还有一个用处 ...

  7. c++ 银行管理系统及报告

    1.题目描写叙述: 本代码为银行管理系统,总体分为管理员模式和普通用户模式: (1)在管理员模式中能完毕 ①用户信息录入 ②改动管理员password ③改动指定账户信息 ④信息管理业务 (2)在普通 ...

  8. TCP和UDP比較

    一.TCP/IP协议 TCP/IP协议,你一定常常听说吧,当中TCP(Transmission Control Protocol)称为传输控制协议,IP(Internet Protocol)称为因特网 ...

  9. Android平台Native开发与JNI机制详解

    源文链接: http://mysuperbaby.iteye.com/blog/915425 一个Native Method就是一个Java调用非Java代码的接口.一个Native Method是这 ...

  10. stm32 IDR寄存器软件仿真的BUG

    /* * 函数名:Key_GPIO_Config * 描述 :配置按键用到的I/O口 * 输入 :无 * 输出 :无 */ void Key_GPIO_Config(void) { GPIO_Init ...