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

然后在网上查了接口：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. jstack来分析。当linux出现cpu被java程序消耗过高时

    我们使用jdk自带的jstack来分析.当linux出现cpu被java程序消耗过高时,以下过程说不定可以帮上你的忙: 1.top查找出哪个进程消耗的cpu高 21125 co_ad2    18   ...

  2. mvn test 中文乱码

    有两种解决办法: 1.设置encoding:<argLine>-Dfile.encoding=UTF-8</argLine>,解决读取文件中的中文乱码问题 2.升级maven- ...

  3. Java线程：概念与原理（转）

    一.操作系统中线程和进程的概念 现在的操作系统是多任务操作系统.多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的一块内存空间,一个进程中可以启动多个线程.比如在 ...

  4. mysql 5.7.13 安装配置方法(linux)-后期部分运维

    mysql 5.7.13 安装配置方法图文教程(linux) 学习了:https://www.cnblogs.com/zhao1949/p/5947938.html /usr/local/mysql是 ...

  5. Splunk 会议回想: 大数据的关键是机器学习

    作者 Jonathan Allen ,译者 张晓鹏 Splunk的用户大会已经接近尾声.三天时间的会议里,共进行了160多个主题研讨.涵盖了从安全.运营到商业智能.甚至包含物联网,会议中一遍又一遍出现 ...

  6. linux ps 命令的结果中VSZ，RSS，STAT的含义和大小

    linux ps 命令的结果中VSZ,RSS,STAT的含义和大小 ps是linux系统的进程管理工具,相当于windows中的资源管理器的一部分功能. 一般来说,ps aux命令执行结果的几个列的信 ...

  7. antd-design LocaleProvider国际化

    1.LocaleProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效. import { LocaleProvider } from 'antd'; imp ...

  8. （三）Oracle学习笔记—— sql语句

    0. scott 用户默认表介绍 scott用户Tables目录下包含四张表 1. insert(插入)语句 给指定列插入数据: ,'xx'); 插入全部列数据: ,'xx','lll'); 2. u ...

  9. Oracle安装过程中的几点注意

    为追求统一,安装了oracle 11g step 4时需要改一下名称,利于记忆 数据库安装完之后需要取消SCOTT账户的锁定 完成后点击SQL Developer会出现——"应用程序开发&q ...

  10. node.js 学习01

    PHP开发技术栈(LAMP) Linux  Apache  MySql  PHPnode.js 全栈开发技术栈(MEAN): MongoDB  Express  Angular  Node.js 现阶 ...