之前网站上需要调用google地图，标示酒店在地图的位置，以及预订信息，今天有空总结了下，方便以后使用。
使用步骤如下：
google地图Api：http://www.codechina.org/doc/google/gmapapi/#The_GMap_class_overview
1、导入 <script src="http://ditu.google.cn/maps?file=api&v=2&key=需要自己申请" type="text/javascript" charset="utf-8"></script>
2、页面上添加层:
<div id="map_canvas" style=" 733px; height: 340px; margin-top: 2px; margin-bottom: 5px;
border: solid 1px #ccc; background-color: #F2EFE9;">
<div style="margin: 180px 0 0 320px;">
<img src="http://images.cnblogs.com/min_loading.gif" width="16" height="16" align="absmiddle" />
地图加载中...</div>
</div>
3、 var map = new GMap2(document.getElementById("map_canvas"));//加载地图到div中
4、//addControl 添加控件 http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/controls.html
map.addControl(new GLargeMapControl());//缩小放大控件
map.addControl(new GScaleControl()); //a map scale
map.addControl(new GMapTypeControl());//地图、卫星、混合地图控件
效果如下：
代码
<!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 runat="server">
<title>Google 地图</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=自己申请" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript">
var mk=[];
function initialize()
{
if (GBrowserIsCompatible())
{
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(15, 15);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
var map = new GMap2(document.getElementById("map_canvas"));
//map.setCenter(new GLatLng(31.11,121.29), 12);//设置显示地图中间位置，12代表地图缩放级别
//addControl 添加控件 http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/controls.html
map.addControl(new GLargeMapControl());//缩小放大控件
map.addControl(new GScaleControl()); //a map scale
map.addControl(new GMapTypeControl());//地图、卫星、混合地图控件
GDownloadUrl("xml/data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var hotelName=markers[i].getAttribute("name");
map.addOverlay(new createMarker(point,i+1,hotelName));
}
});
map.setCenter(new GLatLng(23.135095,113.286306), 12);
function createMarker(point, number,hotelName) {
var icon = new GIcon(baseIcon);
icon.image = "ico/h_" + number + ".gif";
var marker = new GMarker(point,icon);
mk[number]=marker;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>" + hotelName + "</b>");
});
return marker;
}
}
}
function showme(flag,hotelName,lg,lt){
mk[flag].openInfoWindowHtml("<b>" + hotelName + "</b><br/>坐标：("+lg+","+lt+")");
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div>
<div id="map_canvas" style=" 733px; height: 340px; margin-top: 2px; margin-bottom: 5px;
border: solid 1px #ccc; background-color: #F2EFE9;">
<div style="margin: 180px 0 0 320px;">
<img src="/images/min_loading.gif" width="16" height="16" align="absmiddle" />
地图加载中...</div>
</div>
<div>
<asp:GridView ID="gvHotelList" runat="server" AutoGenerateColumns="False" Width="733">
<Columns>
<asp:BoundField DataField="hotel_id" HeaderText="Id" />
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:showme('<%#Container.DataItemIndex+1 %>','<%#Eval("hotel_name")%>','<%#Eval("lng")%>','<%#Eval("lat")%>')"><%#Eval("hotel_name")%></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="lat" HeaderText="经度" />
<asp:BoundField DataField="lng" HeaderText="纬度" />
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
代码
<?xml version="1.0" encoding="UTF-8"?>
<markers>
<marker name="广州花园酒店" lat="23.135095" lng="113.286306" />
<marker name="广州东方宾馆" lat="23.1396694" lng="113.2586896" />
<marker name="广州中国大酒店" lat="23.14013448" lng="113.2598977" />
<marker name="广东亚洲国际大酒店" lat="23.13855" lng="113.28" />
<marker name="广州颐和大酒店" lat="23.21941" lng="113.3136" />
<marker name="广州地中海国际酒店" lat="23.13354168" lng="113.3368746" />
<marker name="广州白天鹅宾馆" lat="23.105685" lng="113.242872" />
<marker name="广东外商大酒店（原广东外商活动中心酒店）" lat="23.12518" lng="113.315" />
<marker name="广州国际金融大厦" lat="23.13265553" lng="113.2570946" />
<marker name="广州华师粤海酒店" lat="23.136004" lng="113.3496375" />
<marker name="北京国航万丽酒店" lat="39.95757" lng="116.4639" />
<marker name="广州景星酒店" lat="23.146031" lng="113.323368" />
<marker name="北京帝景豪廷酒店" lat="39.89295529" lng="116.4781198" />
<marker name="广东东方国际饭店" lat="23.14892" lng="113.3143" />
<marker name="北京金域万豪酒店" lat="39.92559" lng="116.31175" />
<marker name="广东迎宾馆" lat="23.12820292" lng="113.261022" />
<marker name="北京天伦王朝饭店" lat="39.91843" lng="116.41181" />
<marker name="北京新世界酒店(京广中心)" lat="39.92047532" lng="116.46057" />
<marker name="广州海关会议中心（海关宾馆)" lat="23.10697136" lng="113.2464246" />
<marker name="广州皇家国际饭店" lat="23.13480018" lng="113.3080029" />
</markers>
转载请注明:http://www.cnblogs.com/merrick/archive/2010/09/17/1829442.html