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

然后在网上查了接口：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. FTP服务器需要开几个端口

    原文: https://blog.csdn.net/houbin0912/article/details/72578688 -------------------------------------- ...

  2. 【codeforces #282(div 1)】AB题解

    A. Treasure time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  3. Selenium webdriver Java 开始

    最早接触的selenium是 selenium IDE,当时是为了准备论文.为了用IDE还下载了Firefox浏览器.后来接触过两个项目都需要selenium,一个采用selenium webdirv ...

  4. selenium从入门到应用 - 7，testNG的DataProvider

    本系列所有代码 https://github.com/zhangting85/simpleWebtest 本文将介绍一个Java+TestNG+Maven+Selenium的web自动化测试脚本环境下 ...

  5. ListView加边框

    在drawable加一个xml文件 内容如下:<?xml version="1.0" encoding="UTF-8"?><shape xml ...

  6. c与c++中的强制类型转换区别

    强制类型转换的一般形式为: (类型名)(表达式) 如:(int)a.这是C语言使用的形式,C++把它保留了下来,以利于兼容. C++还增加了以下形式: 类型名(表达式) 如:int(a).这种形式类似 ...

  7. linux入门基础——linux网络配置

    linux网络配置 以太网连接 在linux中,以太网接口被命名为:eth0.eth1等.0.1代表网卡编号 通过lspci命令能够查看网卡硬件信息(假设是usb网卡,则须要使用lsusb命令) 命令 ...

  8. 自己开发前端调试工具:Gungnir

    文章目录 1. 界面介绍 2. 项目资源管理界面 3. 文本编辑器功能 4. 代理功能 4.1. 自动下载线上文件 4.2. 使用本地已有文件 4.3. 代理整个目录 4.4. 执行文件内容后返回结果 ...

  9. CentOS设置程序开机自启动的方法

    转自:http://www.centos.bz/2011/09/centos-setup-process-startup-boot/ 在CentOS系统下,主要有两种方法设置自己安装的程序开机启动. ...

  10. 如何理解HTTP协议的“无连接，无状态”特点

    是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点:1.支持客户/服务器模式;2.简单快速;3.灵活;4.无连接;5.无状态. 无连接 无连接的含义是限制每次连接只处理一个请求.服务器处理 ...