首先是頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NewMap.aspx.cs" Inherits="NewMap" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keyWords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" />
<meta name="descr<title>百度地圖讀取存儲坐標(biāo)</title>
<!--引用百度地圖API-->
<style type="text/CSS">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-PRe-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--百度地圖容器-->
<form id="form1" runat="server">
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
<table>
<tr>
<td>
緯度：
<asp:TextBox ID="x" runat="server" ReadOnly="True"></asp:TextBox>
</td>
<td>
經(jīng)度：<asp:TextBox ID="y" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2">
名字：
<asp:TextBox ID="name" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2">
地址：
<asp:TextBox ID="address" runat="server" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
說明：<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2">
顏色：<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="46">紅色</asp:ListItem>
<asp:ListItem Value="0">綠色</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="Button1" runat="server" Text="保存" onclick="Button1_Click" /></td>
</tr>
</table>
</form>
</body>
<script type="text/Javascript">
//創(chuàng)建和初始化地圖函數(shù)：
function initMap() {
createMap(); //創(chuàng)建地圖
setMapEvent(); //設(shè)置地圖事件
addMapControl(); //向地圖添加控件
addMarker(); //向地圖中添加marker
var gc = new BMap.Geocoder();
map.addEventListener("click", function(e) {
var pt = e.point;
gc.getLocation(pt, function(rs) {
var addComp = rs.addressComponents;
document.getElementById("x" ).innerText=e.point.lng ;
document.getElementById("y" ).innerText=e.point.lat ;
document.getElementById("address" ).innerText=addComp.province+ addComp.city+addComp.district+addComp.street+addComp.streetNumber;
//map.addOverlay(new BMap.Marker(pt));
});
});
}
//創(chuàng)建地圖函數(shù)：
function createMap() {
var map = new BMap.Map("dituContent"); //在百度地圖容器中創(chuàng)建一個地圖
var point = new BMap.Point(114.522657, 38.049981); //定義一個中心點(diǎn)坐標(biāo)
map.centerAndZoom(point, 13); //設(shè)定地圖的中心點(diǎn)和坐標(biāo)并將地圖顯示在地圖容器中
window.map = map; //將map變量存儲在全局
// var pt = new BMap.Point(116.417, 39.909);
// var myIcon = new BMap.Icon("img/iconpng.png", new BMap.Size(43,0));
// var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 創(chuàng)建標(biāo)注
// map.addOverlay(marker2);
}
//地圖事件設(shè)置函數(shù)：
function setMapEvent() {
map.enableDragging(); //啟用地圖拖拽事件，默認(rèn)啟用(可不寫)
map.enableScrollWheelZoom(); //啟用地圖滾輪放大縮小
map.enableDoubleClickZoom(); //啟用鼠標(biāo)雙擊放大，默認(rèn)啟用(可不寫)
map.enableKeyboard(); //啟用鍵盤上下左右鍵移動地圖
}
//地圖控件添加函數(shù)：
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);
}
//標(biāo)注點(diǎn)數(shù)組
var markerArr = [<%=strmapid %> ];
//創(chuàng)建marker
function addMarker() {
for (var i = 0; i < markerArr.length; i++) {
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0, p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point, { icon: iconImg });
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor: "#808080",
color: "#333",
cursor: "pointer"
});
(function() {
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click", function() {
this.openInfoWindow(_iw);
});
_iw.addEventListener("open", function() {
_marker.getLabel().hide();
})
_iw.addEventListener("close", function() {
_marker.getLabel().show();
})
label.addEventListener("click", function() {
_marker.openInfoWindow(_iw);
})
if (!!json.isOpen) {
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//創(chuàng)建InfoWindow
function createInfoWindow(i) {
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
return iw;
}
//創(chuàng)建一個Icon
function createIcon(json) {
var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
return icon;
}
initMap(); //創(chuàng)建和初始化地圖
</script>
</html>
代碼
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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 BLL;
public partial class NewMap : System.Web.UI.Page
{
public DataTable tb = new DataTable();
public string strmapid = "";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
show();
}
}
public void show()
{
string StrSql = "select * from MapXY ";
tb = Dataaccess.dataSet(StrSql).Tables[0];
for(int i=0;i<tb.Rows.Count;i++)
{
int m = int.Parse(tb.Rows[i]["now"].ToString());
string l = "";
if (m >= 0 && m < 3)
{
l = "0";
}
else
{
l = "46";
}
if (tb.Rows.Count - 1 == i)
{
strmapid += "{ title: /"" + tb.Rows[i]["name"].ToString() + "/", content: /"" + tb.Rows[i]["shuoming"].ToString() + "/", point: /"" + tb.Rows[i]["x"].ToString() + "|" + tb.Rows[i]["y"].ToString() + "/", isOpen: 0, icon: { w: 23, h: 25, l: " + l + ", t: 21, x: 9, lb: 12} }";
}
else
{
strmapid += "{ title: /"" + tb.Rows[i]["name"].ToString() + "/", content: /"" + tb.Rows[i]["shuoming"].ToString() + "/", point: /"" + tb.Rows[i]["x"].ToString() + "|" + tb.Rows[i]["y"].ToString() + "/", isOpen: 0, icon: { w: 23, h: 25, l: " + l + ", t: 21, x: 9, lb: 12} },";
}
//if (tb.Rows.Count - 1 == i)
//{
// strmapid += "{ title: /"" + tb.Rows[i]["name"].ToString() + "/", content: /"" + tb.Rows[i]["shuoming"].ToString() + "/", point: /"" + tb.Rows[i]["x"].ToString() + "|" + tb.Rows[i]["y"].ToString() + "/", isOpen: 0, icon: {/"" + tb.Rows[i]["img"].ToString() + "/",new BMap.Size(300,157)} }";
//}
//else
//{
// strmapid += "{ title: /"" + tb.Rows[i]["name"].ToString() + "/", content: /"" + tb.Rows[i]["shuoming"].ToString() + "/", point: /"" + tb.Rows[i]["x"].ToString() + "|" + tb.Rows[i]["y"].ToString() + "/", isOpen: 0, icon: {/"" + tb.Rows[i]["img"].ToString() + "/",new BMap.Size(300,157)} },";
//}
//"fox.gif", new BMap.Size(300,157)
}
}
protected void Button1_Click(object sender, EventArgs e)
{
string sqlstr = "";
sqlstr = "INSERT INTO MapXY (name,x,y,shuoming,now,address) VALUES ('" + name.Text + "','" + Request.Form["x"].ToString() + "','" + Request.Form["y"].ToString() + "','" + TextBox1.Text + "','" + DropDownList1.SelectedValue + "','" + Request.Form["address"].ToString() + "')";
DataAccess.excuteSql(sqlstr);
show();
}
}
庫結(jié)構(gòu)很簡單 表MapXY 列 id，name，x，y，shuoming，now，address，img
僅供參考
新聞熱點(diǎn)
疑難解答
圖片精選
