<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HotelMap.ascx.cs" Inherits="WizHotelUnion.HotelAdmin.Hotel.HotelMap" %>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript"></script>
<script type="text/javascript">
//页面加载完毕
$(document).ready(function () {
Initialize();
});
//页面加载完毕,显示指定坐标
function Initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl()); //添加缩放控件
map.addControl(new GMapTypeControl()); //地图类型
map.addControl(new GScaleControl()); //添加标尺
map.enableScrollWheelZoom(); //设置地图可以由鼠标滚轮控制缩放
map.addControl(new GOverviewMapControl()); //添加小地图
//map.setCenter(new GLatLng(39.9493, 116.3975), 13);
//单击地图后,获取经纬度
map.addOverlay(createMarker(new GLatLng(longitude, latitude), 14));
map.setCenter(new GLatLng(longitude, latitude), 14);
GEvent.addListener(map, "click", function (overlay, latlng) {
try {
document.getElementById(tbLongitude).value = latlng.y;
document.getElementById(tbLatitude).value = latlng.x;
}
catch (e) {
;
}
});
}
}
//对坐标进行标注
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("<font color='blue'>酒店地址:</font>" + hotelAddress);
});
return marker;
}
/*根据地址搜索得到地图范围
*SearchAddress 传来的(地址)参数
*/
function SearchByAddress(SearchAddress) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl()); //添加缩放控件
map.addControl(new GMapTypeControl()); //地图类型
map.addControl(new GScaleControl()); //添加标尺
map.enableScrollWheelZoom(); //设置地图可以由鼠标滚轮控制缩放
map.addControl(new GOverviewMapControl()); //添加小地图
//由地址获取经纬度
var geocoder = new GClientGeocoder(); //解析地址
geocoder.getLatLng(SearchAddress, function (point) {
//坐标不存在
if (!point) {
alert(SearchAddress + " not found");
SearchAddress = "";
initialize();
}
else {
//添加标记
var marker = new GMarker(point, { draggable: true });
map.setCenter(point, 14);
map.addOverlay(marker);
marker.openInfoWindowHtml(SearchAddress);
//移动标点关闭信息框
GEvent.addListener(marker, "dragstart", function () { map.closeInfoWindow(); });
//获得移动后的经纬度(移动事件)
GEvent.addListener(marker, "dragend", function () {
point1 = marker.getPoint();
map.panTo(point1);
marker.openInfoWindowHtml(SearchAddress);
document.getElementById(tbLatitude).value = point1.x;
document.getElementById(tbLongitude).value = point1.y;
});
//标记单击事件
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml(SearchAddress);
});
document.getElementById(tbLatitude).value = point.x;
document.getElementById(tbLongitude).value = point.y;
}
});
//获取点击点的经纬度
GEvent.addListener(map, "click", function (overlay, latlng) {
try {
document.getElementById(tbLatitude).value = latlng.x;
document.getElementById(tbLongitude).value = latlng.y;
}
catch (e) {
;
}
});
}
</script>
<style type="text/css">
#map_canvas{width:100%; height:300px; margin-bottom: 0px; border: 1px solid blue;}
</style>
<div>
<div id="map_canvas">
</div>
</div>
因为要做一个酒店的信息发布网站 包含了一些 谷歌地图的制作 以上为自己总结并成功运用而写的谷歌地图 自定义控件 方便好用就把他记了下来
在调用的时候
<div style="width:100%;height:25px;">
<span>
经度:<asp:TextBox ID="tbLongitude" runat="server" />
纬度:<asp:TextBox ID="tbLatitude" runat="server"/>
输入地址可进行搜索:
<input type="text" id="tbSearch" value="" />
<input type="button" id="tbsearch" οnclick="search()" value="马上搜索" />
<script type="text/javascript">
var tbLongitude = "<%=tbLongitude.ClientID %>";
var tbLatitude = "<%=tbLatitude.ClientID %>";
//酒店ID
var id = "<%=Lhid %>";
//得到地图经纬度并拆分
var latLng = "<%=MapLatLng %>";
var latLngArray = latLng.split(',');
var longitude = latLngArray[0];
var latitude = latLngArray[1];
//酒店地址
var hotelAddress = "<%=hotelName %>";
//搜索
function search() {
var searchAddress = document.getElementById("tbSearch").value;
if (searchAddress == "") {
alert("查询条件不能为空");
}
else {
SearchByAddress(searchAddress);
}
}
</script>
</span>
</div>
<uc1:HotelMap ID="HotelMap2" runat="server" />
</div>
暂时写这么多,以后有问题再更新!