FineUI与百度地图简单示例

wanghenan · 发表于 2013-10-28 17:04:19

本帖最后由 wanghenan 于 2013-10-29 08:50 编辑

先上图

附上HTML代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Map.aspx.cs" Inherits="EmptyProjectNet40.Map" %>
<!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></title>
<style type="text/css">
.columnpanel
{
margin-right: 5px;
}
.rowpanel
{
margin-bottom: 5px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=C2c1257ee55b0cdb7d7df0ae4c3f4521"></script>
</head>
<body>
<form id="form1" runat="server">
<x:PageManager ID="PageManager1" runat="server" />
<x:Panel ID="Panel2" runat="server" Height="500px" Width="900px" ShowBorder="True"
BodyPadding="5px" Layout="Column" ShowHeader="True" Title="百度地图示例">
<Items>
<x:Panel ID="Panel4" ColumnWidth="75%" EnableBackgroundColor="true" runat="server" CssClass="columnpanel"
BodyPadding="5px" ShowBorder="true" ShowHeader="true" Layout="Fit" Height="464px" Title="地图">
<Toolbars>
<x:Toolbar ID="Toolbar1" runat="server" Position="Top">
<Items>
<x:Button runat="server" ID="Button1" Text="移动当前城市" EnablePostBack="false"
OnClientClick="panTo();">
</x:Button>
</Items>
</x:Toolbar>
</Toolbars>
<Items>
<x:ContentPanel runat="server" ShowBorder="True" ShowHeader="false">
<div id="container1" style="width:100%; height:400px; background-color:Blue;"></div>
</x:ContentPanel>
</Items>
</x:Panel>
<x:Panel ID="Panel3" ColumnWidth="25%" EnableBackgroundColor="true" runat="server"
BodyPadding="5px" ShowBorder="true" ShowHeader="true" Height="464px" Title="坐标">
<Items>
<x:Grid ID="Grid1" Title="表格" PageSize="4" ShowBorder="true" ShowHeader="False"
runat="server" Height="427px" IsDatabasePaging="true">
<Columns>
<x:BoundField Width="60px" DataField="CityName" DataFormatString="{0}" HeaderText="地区" />
<x:BoundField Width="60px" DataField="pointX" DataFormatString="{0}" HeaderText="经度" />
<x:BoundField Width="60px" DataField="pointY" DataFormatString="{0}" HeaderText="纬度" />
</Columns>
</x:Grid>
</Items>
</x:Panel>
</Items>
</x:Panel>
</form>
<script type="text/javascript">
var map;
var gridClientID = '<%= Grid1.ClientID %>';
function onReady() {
map = new BMap.Map("container1"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15);
map.addEventListener("click", showInfo); //注册单击事件
}
//移动到当前城市
function panTo() {
var myCity = new BMap.LocalCity();
myCity.get(myFun);
}
function myFun(result) {
var cityName = result.name;
map.setCenter(cityName);
//alert(cityName);
}
function showInfo(e) {
//可以把获取到的经度和纬度保存起来,或者动态添加到Grid中
//alert(e.point.lng + ", " + e.point.lat);
calcGridSummary(e);
}
function calcGridSummary(e) {
var grid = X(gridClientID);
var view = grid.getView(), store = grid.getStore(), storeCount = store.getCount();
store.add(new Ext.data.Record({
'citname': 1,
'pointX': e.point.lng,
'pointY': e.point.lat
}));
// // 为合计行添加自定义样式（隐藏序号列、复选框列，取消 hover 和 selected 效果）
// Ext.get(view.getRow(storeCount)).addClass('mygrid-row-summary');
// Ext.get(view.getRow(storeCount + 1)).addClass('mygrid-row-summary');
}
</script>
</body>
</html>

复制代码

本人菜鸟一枚,大侠请飘过,很简单的示例,目前这里面还有一问题,就是点击地图获取坐标想添加到Grid里面,没显示

sanshi · 发表于 2013-10-28 17:31:31

"点击地图获取坐标想添加到Grid里面"这个道理上很简单：
1. 点击地图获取坐标，应该是JavaScript里实现的把，发起一个PostBack请求；
2. 在PostBack请求中，更新表格数据源即可。

自定义回发参考：http://fineui.com/demo/#/demo/other/custom_postback.aspx

wanghenan · 发表于 2013-10-28 19:36:48

本帖最后由 wanghenan 于 2013-10-28 19:38 编辑

非常感谢,已经实现了，保存坐标到Grid表格中，然后双可以移动到指定的经度和纬度
更新前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Map.aspx.cs" Inherits="EmptyProjectNet40.Map" %>
<!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></title>
<style type="text/css">
.columnpanel
{
margin-right: 5px;
}
.rowpanel
{
margin-bottom: 5px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=C2c1257ee55b0cdb7d7df0ae4c3f4521"></script>
</head>
<body>
<form id="form1" runat="server">
<x:PageManager ID="PageManager1" runat="server" />
<x:Panel ID="Panel2" runat="server" Height="500px" Width="900px" ShowBorder="True"
BodyPadding="5px" Layout="Column" ShowHeader="True" Title="百度地图示例">
<Items>
<x:Panel ID="Panel4" ColumnWidth="75%" EnableBackgroundColor="true" runat="server" CssClass="columnpanel"
BodyPadding="5px" ShowBorder="true" ShowHeader="true" Layout="Fit" Height="464px" Title="地图">
<Toolbars>
<x:Toolbar ID="Toolbar1" runat="server" Position="Top">
<Items>
<x:Button runat="server" ID="Button1" Text="移动当前城市" EnablePostBack="false"
OnClientClick="panTo();">
</x:Button>
</Items>
</x:Toolbar>
</Toolbars>
<Items>
<x:ContentPanel runat="server" ShowBorder="True" ShowHeader="false">
<div id="container1" style="width:100%; height:400px; background-color:Blue;"></div>
</x:ContentPanel>
</Items>
</x:Panel>
<x:Panel ID="Panel3" ColumnWidth="25%" EnableBackgroundColor="true" runat="server"
BodyPadding="5px" ShowBorder="true" ShowHeader="true" Height="464px" Title="坐标">
<Items>
<x:Grid ID="Grid1" Title="表格" PageSize="4" ShowBorder="true" ShowHeader="False"
runat="server" Height="427px" IsDatabasePaging="true" EnableRowDoubleClickEvent="true" OnRowDoubleClick="Grid1_RowClick">
<Columns>
<x:BoundField Width="55px" DataField="CityName" DataFormatString="{0}" HeaderText="地区" />
<x:BoundField Width="75px" DataField="pointX" DataFormatString="{0}" HeaderText="经度" />
<x:BoundField Width="75px" DataField="pointY" DataFormatString="{0}" HeaderText="纬度" />
</Columns>
</x:Grid>
</Items>
</x:Panel>
</Items>
</x:Panel>
</form>
<script type="text/javascript">
var map;
var gridClientID = '<%= Grid1.ClientID %>';
var gc;
function onReady() {
map = new BMap.Map("container1"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15);
map.addEventListener("click", showInfo); //百度API注册单击事件
gc = new BMap.Geocoder();
}
//移动到当前城市
function panTo() {
var myCity = new BMap.LocalCity();
myCity.get(myFun);
}
//移动到某个经度和纬度
function PanToCity(x,y) {
map.panTo(new BMap.Point(x, y));
}
function myFun(result) {
var cityName = result.name;
map.setCenter(cityName);
}
//百度API点击回调事件
function showInfo(e) {
//可以把获取到的经度和纬度保存起来,或者动态添加到Grid中
var pt = e.point;
gc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
__doPostBack(addComp.city + "," + e.point.lng + "," + e.point.lat, 'specialkey');//获取坐标简单拼装发送给服务端
});
}
</script>
</body>
</html>

复制代码

后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Newtonsoft.Json.Linq;
using FineUI;
namespace EmptyProjectNet40
{
public partial class Map : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetData();
}
else
{
if ( Request.Form["__EVENTARGUMENT"] == "specialkey")
{
string req = Request.Form["__EVENTTARGET"];
string[] point=req.Split(',');
if (point.Length > 1)
{
JObject defaultObj = new JObject();
defaultObj.Add("CityName", point[0]);
defaultObj.Add("pointX", point[1]);
defaultObj.Add("pointY", point[2]);
DataTable dbt = (DataTable)Session["KEY_FOR_DATASOURCE_SESSION"];
dbt.Rows.Add(new object []{point[0],point[1],point[2]});
Session["KEY_FOR_DATASOURCE_SESSION"] = dbt;
Grid1.DataSource = dbt;
Grid1.DataBind();
}
}
}
}
protected void Grid1_RowClick(object sender, FineUI.GridRowClickEventArgs e)
{
DataTable dbt = (DataTable)Session["KEY_FOR_DATASOURCE_SESSION"];
DataRow dr = dbt.Rows[e.RowIndex];
string x = Convert.ToString(dr["pointX"]);
string y = Convert.ToString(dr["pointY"]);
PageContext.RegisterStartupScript("PanToCity(" + x + "," + y + ");");
}
private DataTable dt;
public void GetData()
{
dt = new DataTable();
dt.Columns.Add("CityName");
dt.Columns.Add("pointX");
dt.Columns.Add("pointY");
dt.Rows.Add(new object[] { "北京市", "116.222", "39.2222" });
dt.Rows.Add(new object[] { "武汉市", "114.333", "30.222"});
Grid1.DataSource = dt;
Grid1.DataBind();
Session["KEY_FOR_DATASOURCE_SESSION"] = dt;
}
}
}

复制代码

最后还是来一张图

erp8@live.cn · 发表于 2013-10-28 23:41:30

赞一个！！！

erp8@live.cn · 发表于 2013-10-29 08:26:24

本帖最后由 erp8@live.cn 于 2013-10-29 09:18 编辑

SCRIPT5: 拒绝访问。
getscript, 行1 字符26711
SCRIPT5009: “BMap”未定义
Map.aspx, 行228 字符13
===请问运行后出现以上错误?应如何解决?---设计ie安全降低一下就好了@----------再次感谢!

zoukaix · 发表于 2013-11-1 22:04:41

怎样在地图上标记刚才选择的位置，或双击GRID，在地图上标记位置？

wanghenan · 发表于 2013-11-4 14:10:12

zoukaix 发表于 2013-11-1 22:04
怎样在地图上标记刚才选择的位置，或双击GRID，在地图上标记位置？

http://developer.baidu.com/map/jsdemo.htm#d0_4　　这里面有很多API方法,你说的这个实现也很简单

		自动登录	找回密码
密码			立即注册

FineUI与百度地图简单示例

本帖子中包含更多资源

本帖子中包含更多资源