·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 做测试做了一个百度地图api的例子保存读取坐标

【如有意向点此提交需求】关于我们

做测试做了一个百度地图api的例子保存读取坐标

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

首先是页面

<%@ 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="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图读取存储坐标</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>
      经度：<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">
    //创建和初始化地图函数：
    function initMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        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));
            });
        });   
       
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
        var point = new BMap.Point(114.522657, 38.049981); //定义一个中心点坐标
        map.centerAndZoom(point, 13); //设定地图的中心点和坐标并将地图显示在地图容器中
        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});  // 创建标注
//        map.addOverlay(marker2);
    }

    //地图事件设置函数：
    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);
    }

    //标注点数组
    var markerArr = [<%=strmapid %> ];

    //创建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);
                }
            })()
        }
    }
    //创建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;
    }
    //创建一个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(); //创建和初始化地图
</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();
    }
}

 

 

库结构很简单  表MapXY 列 id，name，x，y，shuoming，now，address，img

 

 

仅供参考