在网页中插入百度地图

如果想在自己的网页上面加入百度地图的话，可以用百度地图的api.具体使用方法如下：

第一步：进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/，搜索出自己要展示的位置，如下图所示。

第二步：设置地图，大家可以对网站显示地图的宽高进行设置，其余选项不动。

第三步：添加标注。点击第一个图标后，在右侧找到自己的位置，单击鼠标左键可定位。标记图标处可更换图标形状，名称和备注填入位置相关信息。

第四步：获取代码。将代码贴到你的网页里就OK了。代码如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />

<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />

<title>百度地图API自定义地图</title>

<!--引用百度地图API-->

<style type="text/css">

html,body{margin:0;padding:0;}

.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}

.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

</style>

<script type="text/javascript" src="<a href="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script">http://api.map.baidu.com/api?key=&v=1.1&services=true"></script</a>>

</head></p>< p><body>

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

<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>

</body>

<script type="text/javascript">

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

function initMap(){

createMap();//创建地图

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

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

}

//创建地图函数：

function createMap(){

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

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

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();//创建和初始化地图

</script>

</html>
来源：http://www.jb51.net/web/162032.html

网页嵌入百度地图和使用百度地图api自定义地图的详细步骤的更多相关文章

  1. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  2. 如何在网中使用百度地图API自定义个性化地图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. HTM L百度地图API 自定义工具地图实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 地图开发笔记（一）：百度地图介绍、使用和Qt内嵌地图Demo

    前言   Qt在地图方面的研发.   百度地图 介绍   百度的地图分为多个开发,都是在线的(离线的需要自己提取,本篇解说在线地图).  百度地图JavaScript API支持HTTP和HTTPS, ...

  5. iOS百度地图SDK集成详细步骤

    1.iOS百度地图下载地址 http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 根据需要选择不同的版本  ...

  6. 如何获取google地图、baidu百度地图的坐标

    google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...

  7. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  8. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  9. 基于MySQL + Node.js + Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图

    1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...

随机推荐

  1. windows server 2012 iis8.0部署mvc报错

    一开始以为需要在服务器装mvc在很多论坛找过也问了朋友都说需要装mvc,经过两天研究是不需要装mvc的只需要在项目的bin文件夹下放入下面三个dll. 未能加载文件或程序集“System.Web.Ht ...

  2. 应用hexo（rss插件）

    使用RSS插件,来生成rss信息. 装载RSS插件 hexo根目录下进入git命令台 npm install hexo-generator-sitemap 启用RSS插件 hexo根目录下的 _con ...

  3. bbc 大数据

    http://video.sina.com.cn/v/b/107900125-2192582404.html

  4. Rundeck,RUN起来！！

    零晨一点, 还好,跑起来了.. 满满的英文文档,肿么办?? 拿下!

  5. SQL Server查看所有表大小，所占空间

    create table #Data(name varchar(100),row varchar(100),reserved varchar(100),data varchar(100),index_ ...

  6. Arrays.sort的粗略讲解

    排序算法,基本的高级语言都有一些提供.C语言有qsort()函数,C++有sort()函数,java语言有Arrays类(不是Array).用这些排序时,都可以写自己的排序规则. Java API对A ...

  7. Eclipse调试的一些小技巧

    不要使用System.out.println作为调试工具 启用所有组件的详细的日志记录级别 使用一个日志分析器来阅读日志 1.条件断点 想象一下我们平时如何添加断点,通常的做法是双击行号的左边.在de ...

  8. TransactionScope IsolationLevel 事务隔离级别

    事务有四个特性 第一原子性,事务具有独立的不能被拆分的,不能只做部分,事务的性质是要么全做,要么都不做. 第二统一性,在事务执行之前和事务执行之后的数据是一致. 第三隔离性,事务是独立的,开发者不能查 ...

  9. Sumdiv(各种数学)

    http://poj.org/problem?id=1845 题意:求A^B的所有约数的和再对9901取模: 做了这个学到了N多数学知识: 一:任意一个整数都可以唯一分解成素因子的乘积:A = p1^ ...

  10. WordPress Comment Extra Fields插件‘swfupload.swf’跨站脚本漏洞

    漏洞名称: WordPress Comment Extra Fields插件‘swfupload.swf’跨站脚本漏洞 CNNVD编号: CNNVD-201308-027 发布时间: 2013-08- ...