百度地图PAI:查询自己的数据库在页面显示，点击其中任一行在地图标注
今天做一个小功能需要标注地图，用的数据库是ORacle，用asp.net写的代码，记录一下。需要的朋友只需要修改一下数据库连接字符串就可以了，绑定用的是Gridview。
下载地址：http://download.csdn.net/detail/drr789/4559240
前台
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title>测试程序</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:300px;width:600px;border:1px solid blue;}
</style>
<script language="javascript" type="text/javascript">
if (!objbeforeItem)
{
var objbeforeItem=null;
var objbeforeItembackgroundColor=null;
}
function ItemOver(obj)
{
if(objbeforeItem)
{
objbeforeItem.style.backgroundColor = objbeforeItembackgroundColor;
}
objbeforeItembackgroundColor = obj.style.backgroundColor;
objbeforeItem = obj;
obj.style.backgroundColor = "#FF8000";
}
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div id="container"></div>
<input type="button" id="startBtn"onclick="maker()" value="标注"/>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="pt"
AutoGenerateColumns="False" CellPadding="3" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
onrowdatabound="GridView1_RowDataBound"
onrowcommand="GridView1_RowCommand">
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerSettings Visible="False" />
<FooterStyle BackColor="White" ForeColor="#000066" />
<RowStyle ForeColor="#000066" />
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<%# Eval("id")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="地名">
<ItemTemplate>
<%# Eval("pt")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="标注">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" CausesValidation="false"
CommandName="biaozhu" Text="标注" CommandArgument='<%#Eval("id")%>'/>
</ItemTemplate>
</asp:TemplateField>
<%-- <asp:ButtonField ButtonType="Button" HeaderText="标注" Text="标注" CommandName="biaozhu"/>
--%> </Columns>
</asp:GridView>
<asp:LinkButton ID="lnkbtnFirst" runat="server" OnClick="PagerButtonClick">首页</asp:LinkButton><asp:LinkButton ID="lnkbtnPre" runat="server" OnClick="PagerButtonClick">上一页</asp:LinkButton>
<asp:LinkButton ID="lnkbtnNext" runat="server" OnClick="PagerButtonClick">下一页</asp:LinkButton>
<asp:LinkButton ID="lnkbtnLast" runat="server" OnClick="PagerButtonClick">尾页</asp:LinkButton>
<p><asp:Label ID="lblCurrentIndex" runat="server" Text="第1页"></asp:Label>
<asp:Label ID="lblPageCount" runat="server" Text="共1页"></asp:Label>
<asp:Label ID="lblRecordCount" runat="server" Text="记录数"></asp:Label>
<asp:TextBox ID="txtJumpPage" runat="server" Width="24px">1</asp:TextBox>
<asp:LinkButton ID="lnkbtnJumpPage" runat="server" OnClick="lnkbtnJumpPage_Click" >跳转</asp:LinkButton>
</p>
</div>
</form>
</body>
<script type="text/javascript">
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("container");//在百度地图容器中创建一个地图
map.centerAndZoom(new BMap.Point(118.517679,31.706102),12); //设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
map.addControl(new BMap.NavigationControl()); //添加鱼骨控件
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom();
map.enableAutoResize();
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap();//创建和初始化地图
function maker(the){
map.clearOverlays();
var point=the;
var pointX=point.split(',');
var marker = new BMap.Marker(new BMap.Point(pointX[0],pointX[1])); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var infoWindow = new BMap.InfoWindow("欢迎光临"); // 创建信息窗口对象
marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow);});
}
</script>
</html>
后台
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OracleClient;
public partial class _Default : System.Web.UI.Page
{
private double[] Longitudes = new double[1024];
private double[] Latitudes = new double[1024];
public string longitude = string.Empty;
public string latitude = string.Empty;
public string sqlid = string.Empty;
public static int SumCount;
private SQLHelper sqlHelper;
protected void Page_Load(object sender, EventArgs e)
{
sqlHelper = new SQLHelper();
if (!IsPostBack)
{
fillGridView();
}
}
//填充GridView
protected void fillGridView()
{
DataSet ds = new DataSet();
ds = GetData();
GridView1.DataSource = ds;
GridView1.DataKeyNames = new string[] { "pt" };
GridView1.DataBind();
getRefSet(ds);
}
//分页
protected void getRefSet(DataSet ds)
{
lblCurrentIndex.Text = "第 " + (GridView1.PageIndex + 1).ToString() + " 页";
lblPageCount.Text = "共 " + GridView1.PageCount.ToString() + " 页";
lblRecordCount.Text = "总共 " + ds.Tables[0].Rows.Count.ToString() + " 条";
if (ds.Tables[0].Rows.Count == 0)
{
lnkbtnFirst.Visible = false;
lnkbtnPre.Visible = false;
lnkbtnNext.Visible = false;
lnkbtnLast.Visible = false;
lblCurrentIndex.Visible = false;
lblPageCount.Visible = false;
lblRecordCount.Visible = false;
}
else if (GridView1.PageCount == 1)
{
lnkbtnFirst.Visible = false;
lnkbtnPre.Visible = false;
lnkbtnNext.Visible = false;
lnkbtnLast.Visible = false;
}
lnkbtnFirst.CommandArgument = "1";
lnkbtnPre.CommandArgument = (GridView1.PageIndex == 0 ? "1" : GridView1.PageIndex.ToString());
lnkbtnNext.CommandArgument = (GridView1.PageCount == 1 ? GridView1.PageCount.ToString() : (GridView1.PageIndex + 2).ToString());
lnkbtnLast.CommandArgument = GridView1.PageCount.ToString();
}
//第几页
protected void lnkbtnJumpPage_Click(object sender, EventArgs e)
{
GridView1.PageIndex = int.Parse(txtJumpPage.Text) - 1;
lblCurrentIndex.Text = "第 " + (GridView1.PageIndex + 1).ToString() + " 页";
fillGridView();
GridView1.DataBind();
}
protected void PagerButtonClick(object sender, EventArgs e)
{
GridView1.PageIndex = Convert.ToInt32(((LinkButton)sender).CommandArgument) - 1;
fillGridView();
GridView1.DataBind();
}
// 转换SQL查询结果为DataSet
private DataSet GetData()
{
OracleConnection conn = new OracleConnection("Data Source=wgyx;user=wgyx;password=wgyx;");
OracleCommand cmd = new OracleCommand();
cmd.Connection = conn;
String strSql = "select id,fuid,pt from sys_organ";
cmd.CommandText = strSql;
cmd.CommandType = CommandType.Text;
DataSet ds = new DataSet();
try
{
conn.Open();
OracleDataAdapter ad = new OracleDataAdapter();
ad.SelectCommand = cmd;
ad.Fill(ds);
}
catch (Exception ex)
{
Response.Write("数据库错误，错误原因：" + ex.Message);
Response.End();
}
finally
{
conn.Close();
}
return ds;
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "biaozhu")
{
string sqlid = e.CommandArgument.ToString();//获取id
try
{
string sql = "select longitude,latitude from SYS_LL where id=" + sqlid;
DataSet ds = sqlHelper.getDataSet(sql);
int count = 0;
foreach (DataRow dr in ds.Tables[0].Rows)
{
Longitudes[count] = System.Double.Parse(dr["Longitude"].ToString());
longitude += Longitudes[count];//将读取的经纬度存储为字符串形式
Latitudes[count] = System.Double.Parse(dr["Latitude"].ToString());
latitude += Latitudes[count];//将读取经纬度存储为字符串形式
count = count + 1;
}
}
catch (Exception ee)
{
Response.Write(ee.Message);
}
ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>maker();</script>");
}
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "ItemOver(this)";
int count = GridView1.Rows.Count;
for (int i = -1; i < count; i++)
{
string the = GridView1.DataKeys[e.Row.RowIndex].Value.ToString();
e.Row.Attributes.Add("onclick", "maker('" + the + "');");
e.Row.Attributes.Add("style", "cursor:hand");
}
}
}
}
SDLhelper.cs
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.OracleClient;
/// <summary>
///Class1 的摘要说明
/// </summary>
public class SQLHelper
{
public SQLHelper()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
private static string GetConnectionString()
{
return "Data Source=wgyx;user=wgyx;password=wgyx;";
}
/// <summary>
/// 返回查询的数据集
/// </summary>
/// <param name="sql"></param>
/// <returns></returns>
public DataSet getDataSet(String sql)
{
DataSet ds = new DataSet();
OracleConnection oraConn = null;
try
{
oraConn = new OracleConnection(GetConnectionString());
oraConn.Open();
OracleDataAdapter oraDa = new OracleDataAdapter(sql, oraConn);
oraDa.Fill(ds);
}
catch
{
return null;
}
finally
{
oraConn.Close();
}
return ds;
}
/// <summary>
/// OracleDataReader
/// </summary>
/// <param name="sql"></param>
/// <returns></returns>
public OracleDataReader getDataReader(String sql)
{
OracleDataReader oraDr;
OracleConnection oraConn = null;
OracleCommand oraCmd=null;
try
{
oraConn = new OracleConnection(GetConnectionString());
oraConn.Open();
oraCmd= new OracleCommand(sql, oraConn);
oraDr = oraCmd.ExecuteReader();
}
catch
{
return null;
}
finally
{
oraConn.Close();
}
return oraDr;
}
}
效果图
