在网页中插入百度地图

如果想在自己的网页上面加入百度地图的话，可以用百度地图的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. bzoj1563: [NOI2009]诗人小G

    Description Input Output 对于每组数据,若最小的不协调度不超过1018,则第一行一个数表示不协调度若最小的不协调度超过1018,则输出"Too hard to arr ...

  2. bzoj1662: [Usaco2006 Nov]Round Numbers 圆环数

    Description 正如你所知,奶牛们没有手指以至于不能玩“石头剪刀布”来任意地决定例如谁先挤奶的顺序.她们甚至也不能通过仍硬币的方式. 所以她们通过"round number" ...

  3. 关于移动手机端富文本编辑器qeditor图片上传改造

    日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...

  4. getClassInstances --通过类的实例来得到数据

    好东西,空了来研究 实例代码如下: for b in getClassInstances bitmaptex doformat "Name : %, Texture name : %, Af ...

  5. 理解Javascript 的闭包（closure）

    要理解闭包的概念先从变量的作用域说去 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之 ...

  6. VS快捷键和技巧

    1. 怎样调整代码排版的格式? 选择:编辑->高级->设置文档的格式或编辑->高级->设置选中代码的格式. 格式化cs代码:Ctrl+k+f 格式化aspx代码:Ctrl+k+ ...

  7. 1027. Colors in Mars (20) PAT

    题目:http://pat.zju.edu.cn/contests/pat-a-practise/1027 简单题,考察十进制数和n进制数的转换和输出格式的控制. People in Mars rep ...

  8. 「Poetize7」Freda的访客

    描述 Description 小猫们看到蛋糕比饼干大之后,普遍认为蛋糕比饼干要好>.<.所以,如果Freda 给了第i 只小猫蛋糕且这个小猫是第一个吃到蛋糕的,那么就必须给第i+2,i+4 ...

  9. Linux企业级开发技术（4）——epoll企业级开发之epoll例程

    为了使大家更加深入了解epoll模型在企业应用中的使用,下面给出一段基于epoll的服务器代码,并在代码中添加了详细注释: #include <deque> #include <ma ...

  10. 动态规划 HDU 1176

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...