会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
卡莱
百度地图应用实例两则
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="baidu.aspx.cs" Inherits="baidu" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="68%"> <div style="width: 100%; height: 340px; border: 1px solid gray" id="container"> </div> </td> <td width="30%" valign="top" style="padding-left: 10px; line-height: 30px;"> <b style="color: Red">我现处位置:</b><br /> <input type="hidden" id="lat" value="120.3"> <input type="hidden" id="lng" value="30.3"> 名称:<span id="thename">阿里巴巴</span><br /> 地址:<span id="address">浙江省杭州市</span><br /> 楼层:<span id="layer">12</span> 楼<br /> 场所类型:<span id="TypeName1">住宿</span> - <span id="TypeName2">写字楼</span> <input type="hidden" id="BigTypeId" value="16" /> <input type="hidden" id="SmallTypeId" value="1604" /> <div> <input onclick="DoLoadIframeInPage(800, 500, 'baiduSure.aspx', 0)" id="Submit1" type="button" value="我还可以再精确" /> </div> <input type="hidden" id="HasUpdate" value="1" /> </td> </tr> </table> <script type="text/javascript"> var setmapload = function () { if ($("#HasUpdate").val() == "0") return; var map = new BMap.Map("container"); var lattxt = $("#lat").val(); var lngtxt = $("#lng").val(); var Prompt = $("#address").html(); var point = new BMap.Point(lattxt, lngtxt); map.centerAndZoom(point, 12); var opts = { width: 250, // 信息窗口宽度 height: 30, // 信息窗口高度 title: "当前位置:" // 信息窗口标题 } var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.setPosition(point); var infoWindow = new BMap.InfoWindow(Prompt, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 $("#HasUpdate").val("0"); } window.onload = setmapload; setInterval(setmapload, 1000); </script> </asp:Content>
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="baiduSure.aspx.cs" Inherits="baiduSure" %> <html> <head> <title></title> <style> body { font-size: 12px; background-color: White; } * { font-size: 12px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> <script src="Scripts/IFrameWindow.js" type="text/javascript"></script> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> </head> <body> <form runat="server" id="form1"> <div style="height: 25; line-height: 25px; text-align: right; padding-right: 15px; background-color: #eee; margin-bottom: 30px;"> <input id="Button1" onclick="CloseMe(0)" style="cursor: pointer; border: 0px; color: Red; text-decoration: underline" type="button" value="关闭地图" /> </div> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="60%"> <div> 输入地址:<input type="text" size="10" id="putcity" /> <input type="text" size="10" id="putaddress" /><input type="button" onclick="getLocAddress($('#putaddress').val(),$('#putcity').val())" value="搜索" /> </div> <div style="width: 100%; height: 340px; border: 1px solid gray" id="container"> </div> </td> <td valign="top" style="padding-left: 10px;"> <b style="color: Red">我现处位置:</b><br /> <input type="hidden" id="lat"> <input type="hidden" id="lng"> <script type="text/javascript"> //获取父窗体信息 var parentLat = $('#lat', parent.document).val(); var parentLng = $('#lng', parent.document).val(); if (parentLat == "" || parentLng == "") { parentLat = "120.2"; parentLng = "30.3"; } var parentname = $('#thename', parent.document).html(); var parentaddress = $('#address', parent.document).html(); var parentLayer = $('#layer', parent.document).html(); var BigType = $('#BigTypeId', parent.document).val(); var SmallType = $('#SmallTypeId', parent.document).val(); var isstart = true; //数据提交 function onsumbit() { if ($("#name").val() == "") { alert("请填写名称"); return false; } if ($("#address").val() == "") { alert("请填写地址信息,或者重新地位您所在的地址"); return false; } //设置父窗体数据 $('#lat', parent.document).val($("#lat").val()); $('#lng', parent.document).val($("#lng").val()); $('#thename', parent.document).html($("#name").val()); $('#address', parent.document).html($("#address").val()); $('#layer', parent.document).html($("#layer").val()); $('#TypeName1', parent.document).html($("#DDL_BigType").find("option:selected").text()); $('#TypeName2', parent.document).html($("#DDL_Smalltype").find("option:selected").text()); $('#BigTypeId', parent.document).val($("#DDL_BigType").val()); $('#SmallTypeId', parent.document).val($("#DDL_Smalltype").val()); $('#HasUpdate', parent.document).val("1"); CloseMe(0); } function setBtShow(btId) { document.getElementById(btId).style.display = ""; } function setBtHidden(btId) { document.getElementById(btId).style.display = "none"; } function setInputNull(inputId) { document.getElementById(inputId).value = ""; } GetSmallType = function (bbid) { $.get("./GetPlaceCategory.aspx", { bid: bbid }, function (data, textStatus) { //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图 formatString(data); }); } function formatString(data) { var typeList = data.split('&'); $("#Select2").find("option").remove(); var options = "<option value=''>--二级场所信息--</option>"; for (i = 0; i < typeList.length; i++) { if (typeList[i] != "") options += "<option value='" + typeList[i].split('|')[0] + "'>" + typeList[i].split('|')[1] + "</option>"; } $('#DDL_Smalltype').html(options); if (isstart) { $('#DDL_Smalltype').val(SmallType); isstart = false; } } </script> <style> .outdiv { border: 1px #ccc solid; height: 20px; margin-bottom: 5px; } .put { border: 0px; height: 18px; } .btDelete { height: 18px; cursor: pointer; border: 0px; background-color: White; width: 18px; font-size:18px; overflow:hidden; line-height:18px; } .tdheight td,select{ padding-bottom:5px;} </style> <table border="0" class="tdheight" cellpadding="0" cellspacing="0"> <tr> <td> 名称: </td> <td> <div style="width: 155px;" class="outdiv" onmousemove="setBtShow('bt_name')" onmouseout="setBtHidden('bt_name')"> <input class="put" type="text" id="name"><input class="btDelete" onclick="setInputNull('name')" title="点击清空" style="display: none" id="bt_name" type="button" value="×" /> </div> </td> </tr> <tr> <td> 地址: </td> <td> <div class="outdiv" style="width: 205px;" onmousemove="setBtShow('bt_address')" onmouseout="setBtHidden('bt_address')"> <input type="text" class="put" id="address" size="30"><input class="btDelete" onclick="setInputNull('address')" title="点击清空" style="display: none" id="bt_address" type="button" value="×" /> </div> </td> </tr> <tr> <td> 楼层: </td> <td> <input type="text" size="5" maxlength="5" id="layer" /> 楼 </td> </tr> <tr> <td valign="top"> 场所类型: </td> <td> <asp:DropDownList ID="DDL_BigType" onchange="GetSmallType($('#DDL_BigType').val())" runat="server"> <asp:ListItem Text="--一级场所信息--" Value=""></asp:ListItem> </asp:DropDownList> <br /><br /> <select id="DDL_Smalltype"> <option>--二级场所信息--</option> </select> </td> </tr> <tr> <td> </td> <td> <input id="Submit1" onclick="return onsumbit()" type="button" value="提交" /> </td> </tr> </table> </td> </tr> </table> <script type="text/javascript"> if (BigType != "") { $("#DDL_BigType").val(BigType); GetSmallType(BigType); } $("#lat").val(parentLat); $("#lng").val(parentLng); $("#name").val(parentname); $("#layer").val(parentLayer); var map = new BMap.Map("container"); // 创建Map实例 var point = new BMap.Point(parentLat, parentLng); // 创建点坐标 map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.enableDragging(true); // 设置标注可拖拽 var opts = { width: 250, // 信息窗口宽度 height: 50, // 信息窗口高度 title: "<b>地址信息:</b>" // 信息窗口标题 } var gc = new BMap.Geocoder(); if (parentaddress == "") getlocInfo(point); else { var infoWindow = new BMap.InfoWindow(parentaddress, opts); // 创建信息窗口对象 marker.openInfoWindow(infoWindow); $("#address").val(parentaddress); } marker.addEventListener("dragend", function (e) { var pt = e.point; getlocInfo(pt); }); //地址反解析 function getlocInfo(pointInfo) { $("#lat").val(pointInfo.lat); $("#lng").val(pointInfo.lng); gc.getLocation(pointInfo, function (rs) { var addComp = rs.addressComponents; var _address = ""; if (addComp.province != "") { _address = addComp.province; if (addComp.city != "") { _address += "," + addComp.city; if (addComp.district != "") { _address += "," + addComp.district; if (addComp.street != "") { _address += "," + addComp.street; if (addComp.streetNumber != "") { _address += "," + addComp.streetNumber; } } } } } $("#address").val(_address); var infoWindow = new BMap.InfoWindow(_address, opts); // 创建信息窗口对象 marker.openInfoWindow(infoWindow); }); } //地址解析 // 将地址解析结果显示在地图上,并调整地图视野 function getLocAddress(address, city) { var myGeo = new BMap.Geocoder(); myGeo.getPoint(address, function (point) { if (point) { marker.setPosition(point) map.setCenter(point) getlocInfo(point); } }, city); } </script> </form> </body> </html>
发表于
2011-11-04 10:22
卡莱
阅读(
590
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告
导航
博客园
首页
新随笔
新文章
联系
订阅
管理