转至繁体中文版　　　  | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告：     敏韬网|教学资源学习资料永久免费分享站！  [mintao  2008年9月2日]        
您现在的位置： 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
由神秘到简单 教你在网页中添加微软地图    热     ★★★★

由神秘到简单 教你在网页中添加微软地图

作者：闵涛 文章来源：闵涛的学习笔记 点击数：2061 更新时间：2009/4/23 11:26:09
.VE_Panel_tb
{
　height: 18px;
　padding-top: 3px;
　padding-left: 2px;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　overflow: hidden;
}

.VE_Panel_tb_blue
{
　background: #ccd8ff;
}

.VE_Panel_tb td
{
　font-family: Verdana,sans-serif;
　font-size: 8pt;
}

.VE_Panel_tb a{ color: #000080;}

.VE_Panel_tb a: hover{ color: #ff9900;}

.VE_Panel_body
{
　padding: 5px;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　overflow: auto;
}


　　在OnPageLoad函数最后我们创建并显示便笺条，我们需要定义其窗口戴孝，以使其做相应的显示。然后我们可以调用CreatePanel来显示：

windowWidth=700;
windowHeight=500;
VE_Scratchpad.CreatePanel();
VE_Scratchpad.Show();


　　如果你用浏览器浏览页面，你将会看到便笺条看起来和Virtual Earth上的显示的基本一样，如下图：


　　我们可以对便笺条的一些属性进行设置，以改变其看起来的式样。首先可以增加一些欢迎信息或者介绍文字等等。下面的代码增加了一些介绍文字：

VE_Scratchpad._introText="Your scratchpad is empty.";


　　我们也可以改变便笺条的菜单项，通过GetToolbar函数完成，如果我们提供自己的这个函数的版本那么就可以改变菜单。这个函数返回一个HTML字符串，其内容是便笺条上的菜单的显示内容。在如下的例子里我们有Clear和Email（和Virtual Earth相同），也有一个Add的菜单项。同样它必须在CreatePanel之前声明：

VE_Scratchpad._GetToolbar=function()
{
　var html="＜table cellpadding=\"0\" cellspacing=\"0\" ";
　html+="border=\"0\" align=\"left\"＞";
　html+="＜tr＞＜td valign=\"top\" align=\"center\"＞";
　html+="＜a href=\"javascript:VE_Scratchpad.Clear();\" ";
　html+="oncontextmenu=\"return false;\"＞Clear Pad＜/a＞ | ";
　html+="＜a href=\"javascript:VE_Scratchpad.Email();\" ";
　html+="oncontextmenu=\"return false;\"＞Email this...＜/a＞ ";
　html+="＜/td＞＜/tr＞＜tr＞＜td＞ ＜/td＞＜/tr＞＜/table＞";
　return html;
}


　　这两个菜单项将会调用VEScratchpad.Clear()和VEScratchpad.Email()函数。

　　下面我们修改VEScratchpad.Email函数：

VE_Scratchpad.Email=
　function()
　{
　　var body="";
　　var urlprefix=GetUrlPrefix();
　　var first=true;
　　var ids="";
　　var e=VE_Scratchpad.entities;
　　if(e==null||e.length==0)
　　{
　　　alert("Nothing to send!");
　　　return;
　　}
　　var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);
　　for(var i=0;i＜lengthToSend;i++)
　　{
　　　var escapedID=escape(e[i].GetSerializedId());
　　　if(!escapedID) {continue;
　　}
　　body+=escape(e[i].name+"\n"+e[i].description+"\n\n");
　　if(!first) { ids+=","; }
　　ids+=escapedID;
　　first=false;
　}
　var allids=escape("Virtual Earth Scratch Pad from Dr. Neil\n" + urlprefix + "\n\n");
　window.open(’mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=’ + allids + body);
}


　　给便笺条增加一项

　　现在我们给Add函数增加相应的代码，以在便笺条上增加一项内容。首先我们使用地图中心来定位：

VE_Scratchpad.Add=function()
{
　VE_Scratchpad.AddLocation( "Point", map.GetCenterLatitude(), map.GetCenterLongitude(), "my added point", "LOC");
}


　　这是我们用来提高其展示效果的方式，当然也可以修改其中的内容。

　　首先我们从Virtual Earth使用的样式表（CSS）中借用一点样式：

.VE_Pushpin
{
　width: 23px; height: 17px;
　font-family: Arial,sans-serif;
　font-weight: bold;
　font-size: 8pt;
　color: White;
　overflow: hidden;
　cursor: pointer;
　text-decoration: none;
　text-align: center;
　padding-top: 1px;
}

.VE_Pushpin_blue
{
　background: url(http://virtualearth.msn.com/i/pins/blue.gif);
　z-index: 19;
}


　　在Virtual Earth站点上，每个便笺条边上就有一个X号来关闭它。在我们创建的便笺条中我们必须创建一个X号图案来代表它。便笺条代码里会寻找的图像是在URL里：＜your url＞/i/remove.gif。图像大小11×11象素。

　　添加查找功能

　　为了进行地图查找，我们必须使用Virtual Earth查找管理器（Search Manager）。这里比较不好的一点是必须访问你网站外部的文件，而这样会导致一个对用户的安全警告信息。

　　重要提示：它只能在浏览器允许跨站点数据访问的时候使用。缺省情况下浏览器不允许这样作。

　　在Internet Explorer里你可以这样修改，以允许跨站点数据访问：

　　1. 在工具菜单里选择Internet选项

　　2. 选择安全tab

　　3. 点击自定义级别按钮

　　4. 在列表里选择其他这个数型列表

　　5. 允许"跨域浏览数据"


　　在HTML文件的body段的最后增加一个按钮和输入框来允许用户输入地点并点击按钮进行查找：

＜input type="button" value="Find" onclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/＞
＜input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/＞


　　在代码段中增加一个查找函数DoFind：

function DoFind()
{
　var where = document.getElementById("WhereText").value;
　VE_SearchManager._ResetPaging();
　VE_SearchManager._CancelAllRequests();
　VE_SearchManager.searchPage="http://virtualearth.msn.com/search.aspx";
　VE_SearchManager._DoSearch(where, where);
}


　　页面将会进行查找并将查找结果位置显示在地图中央。同时我们也可以将查找的地点增加到便笺条上。我们需要对代码进行处理，使得在查找完成后可以做相应的工作。

　　新的Dofind方法将会做更多的工作，和VE_SEarchManger._DoSearch函数类似：

function DoFind()
{
　var where = document.getElementById("WhereText").value;
　var a="";
　var b=escape(where);
　var c=map.GetLatitude(0);
　var d=map.GetLongitude(windowWidth);
　var e=map.GetLatitude(windowHeight);
　var f=map.GetLongitude(0);
　var g="";
　var i="";
　var r=0;
　var 　url="http://virtualearth.msn.com/search.aspx"+"?a="+a+"&b="+b+"&c="+c+"&d="+d+"&e="+e+"&f="+f+"&g="+g+"&i="+i+"&r="+r;

　if(!VE_SearchManager.xmlHttp)
　{
　　VE_SearchManager.xmlHttp=GetXmlHttp();
　}

　var xmlHttp=VE_SearchManager.xmlHttp;
　if(xmlHttp)
　{
　　xmlHttp.open("POST",url,true);
　　xmlHttp.onreadystatechange=FindResponseHandler;
　　VE_SearchManager.searching=true;
　　xmlHttp.send("");
　}
}

FindResponseHandler=function()
{
　var x = VE_SearchManager.xmlHttp;
　if(x.readyState==4)
　{
　　VE_SearchManager.searching = false;
　　var code = x.responseText;

　　try
　　{
　　　eval(code);
　　}
　　catch(ex){}

　　VE_Scratchpad.AddLocation(
　　　document.getElementById("WhereText").value,
　　　　map.GetCenterLatitude(),
　　　　map.GetCenterLongitude(),"", "LOC");
　}
}


　　结束语

　　本文全部代码如下：

＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜style type="text/css" media="screen"＞
＜!--
.pin
{
　width:44px;height:17px;
　font-family:Arial,sans-serif;
　font-weight:bold;font-size:8pt;
　color:White;overflow:hidden;
　cursor:pointer;text-decoration:none;
　text-align:center;background:#0000FF;
　border:1px solid #FF0000;
　z-index:5;
}

#VE_MapScale
{
　position: absolute;
　width: 150px;
　height: 18px;
　padding: 0;
　margin: 0;
　z-index: 31;
}

#VE_MapScaleLabel
{
　height: 22px;
　font-family: Verdana;
　font-size: 12pt;
　color: black;
　overflow: hidden;
}

#VE_MapScaleBar
{
　width: 150px;
　height: 5px;
　background: green;
　overflow: hidden;
}

.VE_ZoomControl_minus
{
　position: absolute;
　width: 26px;
　height: 32px;
　background: url(images/ZoomOut.gif);
　display: inline;
　text-align: center;
　text-decoration: none;
　color: black;
}

.VE_ZoomControl_plus
{
　position: absolute;
　width: 26px;
　height: 32px;
　background: url(images/ZoomIn.gif);
　display: inline;
　text-align: center;
　text-decoration: none;
　color: black;
}

.VE_ZoomControl_bar
{
　position: absolute;
　width: 128px;
　height: 32px;
　background: url(images/ZoomBar.gif);
　display: inline;
}

.VE_ZoomControl_slider
{
　position: absolute;
　width: 8px;
　height: 24px;
　background: url(images/ZoomSlider.gif);
　overflow: hidden;
　display: inline;
}

.VE_Panel_el
{
　overflow: hidden;
　z-index: 31;
　border: 1px solid #cbcbcb;
　padding: 0;
　margin: 0;
　background: white;
}

.VE_Panel_title
{
　position: absolute;
　padding-top: 2px;
　padding-left: 5px;
　overflow: hidden;
　z-index: 32;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　font-weight: bold;
　color: rgb(230,250,255);
　text-transform: uppercase;
　cursor: default;
　white-space: nowrap;
　text-overflow: ellipsis;
}

.VE_Panel_title_blue
{
　background: #0030cc;
}

.VE_Panel_cb
{
　padding-left: 1px;
　width: 18px;
　height: 18px;
　color: white;
　text-align: center;
　font-size: 7pt;
　font-family: Verdana;
　font-weight: bold;
　overflow: hidden;
　cursor: pointer;
}

.VE_Panel_cb_blue
{
　background: #001d7a;
　border: solid 2px #0030cc;
}

.VE_Panel_tb
{
　height: 18px;
　padding-top: 3px;
　padding-left: 2px;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　overflow: hidden;
}

.VE_Panel_tb_blue
{
　background: #ccd8ff;
}

.VE_Panel_tb td
{
　font-family: Verdana,sans-serif;
　font-size: 8pt;
}

.VE_Panel_tb a
{
　color: #000080;
}

.VE_Panel_tb a: hover
{
　color: #ff9900;
}

.VE_Panel_body
{
　padding: 5px;
　font-family: Verdana,sans-serif;
　font-size: 8pt;
　overflow: auto;
}

.VE_Pushpin
{
　width: 23px;
　height: 17px;
　font-family: Arial,sans-serif;
　font-weight: bold;
　font-size: 8pt;
　color: White;
　overflow: hidden;
　cursor: pointer;
　text-decoration: none;
　text-align: center;padding-top: 1px;
}

.VE_Pushpin_blue
{
　background: url(http: //virtualearth.msn.com/i/pins/blue.gif);
　z-index: 19;
}

--＞
＜/style＞
＜script src="MapControl.js"＞＜/script＞
＜script src="VE.js"＞＜/script＞
＜script＞
var map = null;

function CreateCompass()
{
　var el = document.createElement("div");
　el.id="VE_Compass";
　el.style.background="url(images/compass.gif)";
　el.onmousedown=VE_Compass._MouseDown;
　el.onmouseup=VE_Compass._MouseUp;
　el.onmousemove=VE_Compass._MouseMove;
　el.style.position="absolute";
　el.style.top = 100;
　el.style.left = 15;

上一页  [1] [2] [3] [4]  下一页


没有相关教程
教程录入：mintao    责任编辑：mintao 
  • 上一篇教程：

  • 下一篇教程：
    • 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    　 注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]
    　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
    		•
    赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题，因而无法显示。
    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长：MinTao ICP备案号：鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网。A打造B、C、D……
    		咸宁网络警察报警平台