因为开发环境是asp.net所以采用服务器端控件实现三级联动

HTML代码：

<asp:DropDownList ID="ddls" runat="server"></asp:DropDownList>

<asp:DropDownList ID="ddlc" runat="server"></asp:DropDownList>

<asp:DropDownList ID="ddlx" runat="server"></asp:DropDownList>

<input id="h_s" type="hidden"  runat="server"/>
 <input id="h_c" type="hidden" runat="server"/>
 <input id="h_a" type="hidden" runat="server"/>

note：hidden 是为了以后在c#代码中能够取到dropdownlist选中的值

js代码：

$(document).ready(function () {
 //选择省操作
 $("#ddls").change(function () {
 var selects_v = $("#ddls").val();
 $("#h_s").val(selects_v);
 if (selects_v == "0") {
 $("#ddlc option:first").attr("selected", "selected");
 $("#ddlx option:first").attr("selected", "selected");
 $("#ddlc").attr("disabled", "disabled");
 $("#ddlx").attr("disabled", "disabled");
 }
 else {
 $("#ddlc option").remove();
 $("#ddlc").attr("disabled", "");
 $("#ddlx option:first").attr("selected", "selected");
 $("#ddlx").attr("disabled", "disabled");
 $("#ddlc").append("<option value='0'>请选择市</option>");
 $.getJSON("./ashx/select_province.ashx?s=" + selects_v + "&a" + Math.random(), function (data) {
 $.each(data.root, function (id, item) {
 $("#ddlc").append("<option value='" + item.code + "'>" + item.name + "</option>");
 });
 });
 }
 });
 //ddlx选择市
 $("#ddlc").change(function () {
 var s_c = $("#ddlc").val();
 $("#h_c").val(s_c);
 if (s_c == "0") {
 $("#ddlx")[0].selectedIndex = 0;
 $("#ddlx").attr("disabled", "disabled");
 }
 else {
 $("#ddlx option").remove();
 $("#ddlx").attr("disabled", "");
 $("#ddlx").append("<option value='0'>请选择县</option>");
 $.getJSON("./ashx/select_city.ashx?s=" + s_c + "&a" + Math.random(), function (data) {
 $.each(data.root, function (id, item) {
 $("#ddlx").append("<option value='" + item.code + "'>" + item.name + "</option>");
 });
 });
 }
 });
 //选择对应的县
 $("#ddlx").change(function () {
 var s_a = $("#ddlx").val();
 $("#h_a").val(s_a);
 });
});

c#初始化dropdownlist数据

protected void Bindddls()
 {
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "get_province");
 ddls.DataTextField = "name";
 ddls.DataValueField = "code";
 ddls.DataSource = dr;
 ddls.DataBind();
 dr.Close();
 ddls.Items.Insert(0,new ListItem("请选择省", "0"));
 }
 protected void Bindddlc()
 {
 string sValue = ddls.SelectedValue;
 if (sValue == "0")
 {
 ddlc.Items.Add(new ListItem("请选择市", "0"));
 ddlc.Enabled = false;
 }
 else
 {
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "get_city");
 ddlc.DataTextField = "name";
 ddlc.DataValueField = "code";
 ddlc.DataSource = dr;
 ddlc.DataBind();
 dr.Close();
 ddlc.Items.Insert(0,new ListItem("请选择市", "0"));
 }
 }
 protected void Bindddla()
 {
 string cValue = ddlc.SelectedValue;
 if (cValue == "0")
 {
 ddlx.Items.Add(new ListItem("请选择县", "0"));
 ddlx.Enabled = false;
 }
 else
 {
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure, "get_area");
 ddlx.DataTextField = "name";
 ddlx.DataValueField = "code";
 ddlx.DataSource = dr;
 ddlx.DataBind();
 dr.Close();
 ddlx.Items.Insert(0, new ListItem("请选择县", "0"));
 }
 }

ashx文件代码

select_province.ashx文件

if (HttpContext.Current.Request["s"] != null)
 {
 string sv = HttpContext.Current.Request["s"].ToString();
 SqlDataReader dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionStringLocalTransaction, CommandType.StoredProcedure
 , "get_city", new SqlParameter("@sid", sv));
 string json = Object_Json.ToJson(dr);
 dr.Close();
 HttpContext.Current.Response.Write(json);
 HttpContext.Current.Response.End();
 }
 else
 {
 HttpContext.Current.Response.Write("error");
 HttpContext.Current.Response.End();
 }

select_city.ashx文件

if (HttpContext.Current.Request["s"] != null)
 {
 string sv = HttpContext.Current.Request["s"].ToString();
 System.Data.SqlClient.SqlDataReader dr = xifenfei.mssql.SqlHelper.ExecuteReader(xifenfei.mssql.SqlHelper.ConnectionStringLocalTransaction, System.Data.CommandType.StoredProcedure
 , "get_area", new System.Data.SqlClient.SqlParameter("@sid", sv));
 string json = Object_Json.ToJson(dr);
 dr.Close();
 HttpContext.Current.Response.Write(json);
 HttpContext.Current.Response.End();
 }
 else
 {
 HttpContext.Current.Response.Write("error");
 HttpContext.Current.Response.End();
 }

效果：

因项目中要调用google地图，最近花了点时间阅读了下google  map 的api，google map的使用大致如下：

1、注册使用google地图api

地址为：http://code.google.com/intl/zh-CN/apis/maps/signup.html

2、阅读google 地图api

地址为：http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html

3、测试google 地图api

（1）一个地点定位并标明位置

• 1添加JavaScript应用

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true;key=ABQIAAAAEBGBYRn2zjKnkDk35kXn-BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSQ7sVn7B1Wp1t33kMiQlXQKL-t7g"  type="text/javascript"></script>

note:我的key是localhost，如果其他测试请重新申请

• 主要的js函数

function load(comName, comAddress, comPhone, dimensionality, longitude) {     //加载地图
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());    //放大缩小
 map.addControl(new GMapTypeControl());     //地图种类
 map.enableScrollWheelZoom();    //启用鼠标滚轮
 var point = new GLatLng(dimensionality, longitude);     // 位置
 map.setCenter(point, 14);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"

 function createMarker(point, address, name, tel) {  //创建标记内容及标记的鼠标事件
 var marker = new GMarker(point);
 var html = '<div style="font-size:10px;">' +
 '<a >公司名称：' + name + '</a><br/>' +
 '<a >公司地址：' + address + '</a><br/>' +
 '<a >联系电话：' + tel + '</a>' +
 '</div>';
 GEvent.addListener(marker, "mouseover", function () {
 marker.openInfoWindowHtml(html);
 });
 GEvent.addListener(marker, "mouseout", function () {
 marker.closeInfoWindow();
 });
 GEvent.addListener(marker, "click", function () {
 map.setCenter(point, 16);
 //marker.openInfoWindowHtml(html);
 });
 return marker;
 }

 map.addOverlay(createMarker(point, comAddress, comName, comPhone)); //加入标记
 }
 else {
 alert("您的浏览器不支持Google地图，请升级到最新版再尝试");
 }
}

参数说明:

公司名称comName
公司地址comAddress
公司电话comPhone
公司维度 dimensionality
公司经度 longitude

• 放置地图的html位置

<div id="map" style="width: 700px; height: 300px"></div>

• js调用

• $(document).ready(function () {
   load('飞飞','温州大学','13736325515',27.924806,120.699492);
   });

2、多个地点定位并标明

• js代码

function load(dimensionality, longitude) {     //加载地图
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());    //放大缩小
 map.addControl(new GMapTypeControl());     //地图种类
 map.enableScrollWheelZoom();    //启用鼠标滚轮
 var point = new GLatLng(dimensionality, longitude);     // 位置
 map.setCenter(point, 14);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"
 return map;
 }
}

function createMarker(map,point, address, name, tel) {  //创建标记内容及标记的鼠标事件
 var marker = new GMarker(point);
 var html = '<div style="font-size:12px;">' +
 '<a >公司名称：' + name + '</a><br/>' +
 '<a >公司地址：' + address + '</a><br/>' +
 '<a >联系电话：' + tel + '</a>' +
 '</div>';
 GEvent.addListener(marker, "mouseover", function () {
 marker.openInfoWindowHtml(html);
 });
 GEvent.addListener(marker, "mouseout", function () {
 marker.closeInfoWindow();
 });
 GEvent.addListener(marker, "click", function () {
 map.setCenter(point, 16);
 });
 return marker;
}

function Add_Marker(map,comName, comAddress, comPhone, dimensionality, longitude) {
 var point = new GLatLng(dimensionality, longitude);     // 设置标记
 map.addOverlay(createMarker(map,point, comAddress, comName, comPhone)); //加入标记
}

• c#调用

string a = @" var map = load(27.924806, 120.699492);
 Add_Marker(map,'温州大学', '茶山', '13736325515', 27.924806, 120.699492);
 Add_Marker(map,'温州大学111', '茶山22', '13736325515',27.925526, 120.700479);";
 Page.ClientScript.RegisterStartupScript(this.GetType(), "ab", a, true);

note:

在一个定位的js中，也可以采用添加多个

var point1 = new GLatLng(27.925526, 120.700479);
 map.addOverlay(createMarker(point1, 'comAddress', 'comName', 'comPhone')); 

来实现多个地点的定位和标明，但是这样可控制性太差