WEB中Google地图使用
在网页中弹出层，显示Google地图，获取经纬度并进行相关操作
由于本人纯属菜鸟级“貌似程序员”，一直不敢在园子里胡乱涂鸦，而在这篇文章发出之前，也是思考再三，难道就一直躲在园子的角落里，不敢出声，还是偶尔露个头，让大伙狂拍，由于园子里“小牛”，“大牛cornwall”多的是，而我这个初生牛犊终于在技术战胜理智之后，写了这篇让高手们甚至可以嗤之以鼻的烂文，当然在学习中没有什么不好意思的，所谓不耻下问，学习中是不存在羞耻与否，想到这里随即把昨天做的东西分享一下，权作抛砖引玉，望高手们猛拍板砖，小弟虚头待拍！如此开场白，定让大伙烦不可耐，还是切入正题；
要说那个公司比较厚道，一般人都会说Google还比较不错的，不像微软总是expect的用法“逼浑家”我们用盗版，就拿Google Maps 来说，完全免费的，只需注册一个KEY，就可以随心所欲的搞自己的Google maps ，当然我在此之前没有深入研究过，刚好项目中要运用，于是就临时抱一下佛脚，总算是达到预期的效果。需求也很简单就是商家在添加自己的资料时，在Google maps 找一下经纬度，添加后在网页的地图中显示商家，并做标记等。拿到这个需求时，于是就在脑海中形成思路，且一步一步做出来：
1.在页面中添加一个按钮，可以弹出一个层来,弹出层后用滤镜把页面控制一下，虽然在CSS2.1中，“filter”不是已知的 CSS 属性名。但并不妨碍其结果，显示，隐藏层代码如下
function showDiv(id)
{
var bgdiv = $("#" + id);
$("<div id='filterDiv'></div>").addClass("filterDiv")
.width("100%")
.height("100%")
.click(function () { hideDiv(id); })
.appendTo("body")
.fadeIn(200);
bgdiv.css({ "position": "absolute" })
.animate({ left: "200px",
top: "250px", opacity: "show"
}, "slow");
}
//点击确定时删除层叠，隐藏地图，并为文本框赋值，达到预期效果born和borne
function hideDiv(id)
{
$("#filterDiv").remove();
$("#" + id).animate({ left: 0, top: 0, opacity: "hide" }, "slow");
}
在这里widthgmat黄历，height都给了100%,而且层的定位也是给死的，在实际运用中可以变通一下，这里调用了Jquery，所以要把
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>导进来，可以忽略jQuery版本
2.页面代码
<div id='div-id' class="sideDiv">
<div class="mapDiv" id="map" > </div>
<input id="btnClo" type="button" onclick="hideDiv('div-id');" value="确定"/>
</div>
<input type="button" id="btnTest" value="弹出地图" onclick="showDiv('div-id');"/><br />
<asp:TextBox ID="TextBox1" runat="rver"></asp:TextBox>putinto
<asp:TextBox ID="TextBox2" runat="rver"></asp:TextBox>
两个TextBox是用来保存经纬度的
3.CSS代码如下：
<style type="text/css">
.sideDiv {
z-index: 9999;
margin-bottom: 3px;
display: none;
position: absolute;
border:solid 1px #6e8bde;
}
.mapDiv {
clear: both;
margin: 4px;
padding: 2px;
}
.filterDiv {
color:#C7EDCC;
background-color:inherit;
position:absolute;
top:0px;
left:0px;
幼小衔接数学怎么教 filter:alpha(opacity=50);
}
</style>
在CSS中，给z-index属性足够大，层叠的效果就不必担心
而filter的属性在IE中显示要设置alpha(opacity=50）
4.加载Google地图时先给一个key
<script src=""
type="text/javascript"></script>
如果是中文显示则要把修改成 有了这个key直接可以写个方法，在页面加载就可以了
<script type="text/javascript">
function initialize() {
if (GBrowrIsCompatible()) {
//加载地图在div中显示
var map = new ElementById("map"));
//设置中心坐标,缩放等级
map.tCenter(new GLatLng(31.314635, 120.634346), 13);
//控制器类型
map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
//加入卫星和混合地图标签
map.addControl(new GHierarchicalMapTypeControl());
//albania鼠标滑轮控制地图缩放
ableScrollWheelZoom();
//搜索控件，便于快速定位到商家地址
ableGoogleBar();
//定义一个标记
var myMarker = null;
//点击获取经纬度
clickListener = GEvent.addListener(map, "click", function (marker, point) {
if (point) {
alert("经度" + point.x + ",纬度" + point.y);
//把获得的经纬度保存起来
英语缩略词 ElementById("<%=TextBox1.ClientID %>").value = point.x;
ElementById("<%=TextBox2.ClientID %>").value = point.y;
}
if (myMarker != null) {
//移除之前的标记
veOverlay(myMarker);
}
myMarker = new GMarker(point);
//在点击位置加标记
map.addOverlay(myMarker);
packing }
);
}
}
</script>
加载地图
<body onload="initialize()" onunload="GUnload()">
如果用模板页时在模板页中添加<body onunload="GUnload()"> 在内容窗体中
用js调用:<script language="javascript" type="text/javascript">
initialize();
</script>
