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

然后在网上查了接口：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. 【前后台分离模式下，使用OAuth Token方式认证】

    AngularJS is an awesome javascript framework. With it’s $resource service it is super fast and easy ...

  2. 查看某一个开发者代码修改量的脚本(ios平台可用)

    #!/bin/sh # This is a script that help you get your team member's productivity # by analyzing his/he ...

  3. Java 通过JDBC连接Mysql数据库的方法和实例

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  4. jmeter 之 BSF,BeanShell（转载）

    jmeter无法自行处理javascript,但是它可以用自带的BSF PreProcessor(BSF:面向java的脚本语言,支持javascript) (使用这个之前要把bsh-2.0b2.ja ...

  5. C#运用反射调用其他程序集中的代码

    加载程序集 AssMedicalAdvice = Assembly.LoadFrom(Path.Combine(Environment.CurrentDirectory, "Inscript ...

  6. PHP-深入理解Opcode缓存

    1.什么是opcode缓存? 当解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode).Opcode cache的目地是避免重复编译, ...

  7. spring揭秘读书笔记----ioc的基本概念

    在看ico概念之前,先想一下我们平常需要依赖某个类时会怎么做? 无非是在要用到的地方写如下代码: Person person = new Person(); //然后就可以用person对象来获取Pe ...

  8. iOS Framework: Introducing MKNetworkKit

    MKNetworkKit介绍,入门.翻译 这片文章也有塞尔维亚-克罗地亚语(由Jovana Milutinovich翻译)和日语(由@noradaiko翻译)  假设有个一个网络库可以自己主动的为你处 ...

  9. tony_LVS DR模式 RealServer 为 Windows客户端配置

    LVS   DR模式  Windows 2000,Windows2003客户端配置   控制面板-添加硬件-选“是,我已经连接了此设备”点击下一步-在列表中选择添加新的硬件设备-选“安   装我充从手 ...

  10. nginx缓存设置

    http://linux008.blog.51cto.com/2837805/547236 目的:缓存nginx服务器的静态文件.如css,js,htm,html,jpg,gif,png,flv,sw ...