如何在网页中添加地图

@{
Layout = null;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

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

<div style="width:500px;height:350px;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.603466, 34.86777);//定义一个中心点坐标
map.centerAndZoom(point, 10);//设定地图的中心点和坐标并将地图显示在地图容器中
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://api.map.baidu.com/lbsapi/creatmap/

时间: 2024-08-23 12:07:54

如何在网页中添加地图的相关文章

如何在网页中添加百度地图

现在大多数网站都会在联系地址页面插入地图,鉴于目前谷歌网址不能打开的原因,因此百度地图应该成为网站开发者的首选. 楼主因为要搞这个小东西,所以顺便发一篇博客分享,其实网上资料很多,楼主也是参考了网上达人资料,主要目的是为了方便以后自己查看啦! 首先,打开百度地图生成器网址:http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ 点击地图快速生成器,进入选择编辑页面,这里有三步: 第一步是定位中心点,意思就是选择你想要设置的大体位置. 第二步

【在网页中添加滚动文字】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <tit

如何在网页中添加视频?怎样在网页中添加视频

在网页中添加视频的方法今天终于实现了,为了能让那些需要在网页中自由播放自己的视频的朋友收到这个文章,我把标题写的长了点.首先说一下需求,在之前做的一个静态页面中,要加入一个视频,要求自动播放,还要能暂停,有播放进度的功能,但是在百度上很久,一直没有找到这个问题,可能自己太笨了,后来,没有办法,就引用了优酷的连接,但是这样在去掉广告的情况下,还是经常.偶尔会出现广告,这个很让人火大,因为本身自己就是广告,优酷在放30秒,基本人家已经跳出这个网页了,今天终于在别人的网页中看到了一段代码,于是一搜,找

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点.没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风 校稿.未经许可,禁止转载! 英文出处:css-tricks.com 发表地址:http://web.jobbole.com/89425/ 有很多种添加下划线样式的方法.可能你还记得< Crafting link underlines on Medium >这篇文章.Medium 并没有尝试特殊的方法,只是想创建一个漂亮的看起来正常的下划

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享 由于目前微信并没有提供这个按钮的官方支持,很多人问我们这个按钮是如何实现的,其实很简单,我们把我们实现的方法分享给大家,希望对那些想在网页端加这个按钮的人有所帮助. 下面是代码(相关参数请自行修改): function WeiXinShareBtn() { if (typeof WeixinJSBridge == "undefined") { alert("请先通过微信搜索 添加分享组件提供商友推为好友,通过微信分

在网页中添加qq客服

在网页中添加qq图标,点击图标可以直接进入qq聊天界面,比想象中的简单很多,代码如下: <a target="_blank" href="tencent://message/?uin=1434677239&Site=www.baidu.com&Menu=yes" title="在线客户"><img src="online_arrow.gif" width="50" heig

在网页中添加音乐

最近在折腾一个网页,对于一个有强迫症的人来说,就想在网页中插入音乐,(当做背景音乐),然后自己百度了好多资料:就在这里总结一下: 第一步: 我们需要在网页添加一些代码:我也不喜欢那种代码太长的:自己就整理了一下:这里我添加的都是单曲,(单曲循环的那种),添加多个背景音乐,代码比较长,我就没去折腾,(其实是折腾了一种方法,没搞出来,就放弃了): 第一种代码: <EMBED src="http://img.xiaonei.com/photos/20060603/1510/orig51097.w

在网页中添加QQ聊天

1在网站 http://wp.qq.com/index.html上登录自己的QQ 2填写 3.点击“复制公开代码” 在网页中添加QQ聊天

005.使用百度SDK写hello baidumap时,在布局xml文件中添加地图控件时;提示&#39;clickable&#39; attribute found, please also add &#39;focusable&#39; 错误

0.报错&提示信息: 'clickable' attribute found, please also add 'focusable'  A widget that is declared to be clickable but not declared to be focusable is not accessible via the keyboard. Please add the focusable attribute as well. 1.原因: 一个控件,如果没有定义focusable