当前位置:网站首页 / 百度地图.NET / 正文

aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【把数据存到LBS云2/2】

时间:2014年04月18日 | 作者 : aaronyang | 分类 : 百度地图.NET | 浏览: 3138次 | 评论 8

中国的IT 需要无私分享和贡献的人,一起努力


 

本篇博客来自地址:www.ayjs.net  请支持原创,未经允许不许转载

  1. 新建一个百度地图父类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Baidu_POI_AaronYang.Models
{
    public class BaiduMap
    {
        public string geotable_id { get; set; }
        public string title { get; set; }

        public string address { get; set; }

        public double longitude { get; set; }

        public double latitude { get; set; }

        public string ak { get; set; }
        public string tags { get; set; }

        /// <summary>
        /// 坐标类型1:GPS经纬度坐标
        ///2:国测局加密经纬度坐标
        ///3:百度加密经纬度坐标
        ///4:百度加密墨卡托坐标
        /// </summary>

        private int _coord_type = 3;
        public int coord_type
        {
            get { return _coord_type; }
            set { _coord_type = value; }
        }

    }
}

 

新增一个viewmodel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Baidu_POI_AaronYang.Models
{
    public class leverTerminal : BaiduMap
    {
        /// <summary>
        /// 基本品牌 例如 iphone
        /// </summary>
        public string BaseType { get; set; }

        /// <summary>
        /// 基本手机型号  例如 iphone 5s
        /// </summary>
        public string PhoneType { get; set; }

        /// <summary>
        /// 当时买的价格
        /// </summary>
        public string PhonePrice { get; set; }
        
        public string UserId { get; set; }

        /// <summary>
        /// 机主
        /// </summary>
        public string UserName { get; set; }

        /// <summary>
        /// 购买日期 前台选择时间 2014年4月18日存储结果 20140418
        /// </summary>
        public string BuyDate { get; set; }

    }
}


这两个类,已经说明了我在LBS云上的表设计


 

我们在HomeController添加一个action,基本格式如下

        [HttpPost]
        public ActionResult SaveBaseInfo(leverTerminal model) {
            CommonReturnDto result = new CommonReturnDto();
            //操作内容
            return Json(result,JsonRequestBehavior.AllowGet);
        }

CommonReturnDto 类如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Baidu_POI_AaronYang.Models
{
    /// <summary>
    /// 公共返回结果类
    /// </summary>
    /// <typeparam name="T"></typeparam>
    public class CommonReturnDto<T>
    {
        public bool IsSuccess { get; set; }
        public string Message { get; set; }
        public T Result { get; set; }
    }

    /// <summary>
    /// 公共返回结果类
    /// </summary> 
    public class CommonReturnDto
    {
        public bool IsSuccess { get; set; }
        public string Message { get; set; }
        /// <summary>
        /// 返回某条数据
        /// </summary>
        private int data = 0;
        /// <summary>
        /// 返回某条数据,例如成功后的ID
        /// </summary>
        public int Data
        {
            get { return data; }
            set { data = value; }
        }
    }
}


我封装的POST和GET类代码,这个类可以很简单将对象作为post对象,使用容易,整理不易,且用且珍惜,如果需要这个类,亲,评个论吧,留下你的邮箱,我发给你

Post的ActionResult方法:

//百度POI基本地址
        private  const string POI_CREATE = "http://api.map.baidu.com/geodata/v3/poi/create";
        //我的AK
        private  const string AK = "你的ak";
        
        [HttpPost]
        public ActionResult SaveBaseInfo(leverTerminal model) {
            CommonReturnDto result = new CommonReturnDto();
            model.BaseType = model.PhoneType.Split(' ')[0];
            model.UserId=Guid.NewGuid().ToString();
            model.ak = AK;
            //Post,自己封装的,如果需要,亲,评论一下哦,留下你的邮箱,我会发送给你
            result.Message = HttpUtils.PostData<leverTerminal>(POI_CREATE,model);
            result.IsSuccess = true;
            return Json(result,JsonRequestBehavior.AllowGet);
        }

下面我们在前台访问这个action

function SaveData() {
        //不验证了
        $.ajax({
            type: "post",
            url: "/home/SaveBaseInfo",
            data:$("#phoneUser").serialize(),
            beforeSend: function (data) {

            },
            success: function (data) {
                var baiduResponse;
                eval("baiduResponse=" + data.Message);
                if (data.IsSuccess) {
                    alert(baiduResponse.message);
                } else {
                    alert("操作失败" + baiduResponse.message);
                }
                
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('错误代码:' + jqXHR.status);
            },
            complete: function (jqXHR, textStatus, errorThrown) {

            }
        });

    }

整个前台页面代码如下:

@{
    ViewBag.Title = "FirstSaveInfo";
}
<h2>第一次存储地图的数据</h2>
@section BaiduApi{
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
}
<br />



<div id="userForm">
    <form method="post" name="phoneUser" id="phoneUser">
        <table cellpadding="0" cellspacing="0" width="800" style="border-collapse: collapse;border:1px solid #808080" id="userDetail">
            <tr>
                <td colspan="6">
                    <input type="button" value="保存用户信息" width="200" height="40" onclick="SaveData()" />
                </td>
            </tr>
            <tr>
                <td width="17%" align="right">
                    购买年份:
                </td>
                <td width="17%" align="left">
                    <input type="text" value="" max="18" id="BuyDate" name="BuyDate" width="100" />
                </td>
                <td width="17%" align="right">
                    姓名:
                </td>
                <td width="17%" align="left">
                    <input type="text" value="" max="18" id="UserName" name="UserName" width="100" />
                </td>
                <td width="17%" align="right">
                    手机型号:
                </td>
                <td width="15%" align="left">
                    <input type="text" value="" max="18" id="PhoneType" name="PhoneType" width="100" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    手机价格:
                </td>
                <td align="left">
                    <input type="text" value="" max="18" id="PhonePrice" name="PhonePrice" width="100" />
                </td>
                <td align="right">
                    标题:
                </td>
                <td align="left">
                    <input type="text" value="" max="18" id="title" name="title" width="100" />
                </td>
                <td align="right">
                    经度纬度:
                </td>
                <td align="left">
                    <input type="text" value="" max="   18" id="tudeShow" name="tudeShow" width="100" />
                    <input type="hidden" id="geotable_id" name="geotable_id" value="59897" />
                    <input type="hidden" value="" max="18" id="longitude" name="longitude" />
                    <input type="hidden" value="" max="18" id="latitude" name="latitude" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    标签:
                </td>
                <td colspan="5" align="left">
                    <input type="text" value="" max="70" id="tags" name="tags" style="width:500px" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    地址:
                </td>
                <td colspan="5" align="left">
                    <input type="text" value="" max="70" id="address" name="address" style="width:500px" />
                </td>
            </tr>
            <tr>
                <td colspan="6" style="height:350px;width:800px">
                    <div id="container" style="width:100%;height:350px;"></div>
                </td>
            </tr>


        </table>
    </form>

</div>

<script type="text/javascript">
    var lastMaker;//记住前一次的maker
    $(function () {
        var point = new BMap.Point(117.234963, 31.858815);
        var map = new BMap.Map("container");
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        //map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
        map.enableScrollWheelZoom();                            //启用滚轮放大缩小
        map.centerAndZoom(point, 18);
        var gc = new BMap.Geocoder();

        map.addEventListener("click", function (e) {
            var lng = e.point.lng;
            var lat = e.point.lat;
            $("#longitude").val(lng);
            $("#latitude").val(lat);
            $("#tudeShow").val(lng + "," + lat);
            //经纬度转换成汉字  
            var pt = e.point;
            gc.getLocation(pt, function (rs) {
                var addComp = rs.addressComponents;
                $("#address").val(addComp.province + addComp.city  + addComp.district + addComp.street + addComp.streetNumber);
            });
            if (lastMaker) {
                map.removeOverlay(lastMaker);
            }
            var marker = new BMap.Marker(pt);  // 创建标注
            lastMaker = marker;
            map.addOverlay(marker);              // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
         
        })
    })

    function SaveData() {
        //不验证了
        $.ajax({
            type: "post",
            url: "/home/SaveBaseInfo",
            data:$("#phoneUser").serialize(),
            beforeSend: function (data) {

            },
            success: function (data) {
                var baiduResponse;
                eval("baiduResponse=" + data.Message);
                if (data.IsSuccess) {
                    alert(baiduResponse.message);
                } else {
                    alert("操作失败" + baiduResponse.message);
                }
                
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('错误代码:' + jqXHR.status);
            },
            complete: function (jqXHR, textStatus, errorThrown) {

            }
        });

    }
  
   
</script>

主要方法就在SaveData()这个方法里面,我把百度返回的结果直接返回给前台,然后用前台的js转换成js然后判断

百度的create返回json结果示例,我这里又输出百度返回给我的message,如果我们点击保存后alert一个成功的框,就说明我们数据添加成功了

效果预览静态图:

动态图:

没错,就是如此的简单,这里我们继续添加很多数据

下一次我们将利用LBS的云的数据,给我们提供很多很好的震撼效果,比如麻点地图,获得附近多少米的 跟你使用同型号手机的人的信息


祝大家学习愉快!

本篇博客来自地址:www.ayjs.net,未经允许不许转载


 

 

 

推荐您阅读更多有关于“百度地图.NET,”的文章

猜你喜欢

已有8位网友发表了看法:

1#王做  2018-01-21 02:40:49 回复该评论

写的很实用,能不能发份post提交的代码阿!非常感谢bac046d217097f29983d3ebdb17d03b2

2#千百度  2017-05-23 16:05:26 回复该评论

496526516@qq.com,求有一份post提交代码,非常感谢

博主我需要您的这个类,能发一份源码吗?

博主求代码

5#访客  2016-06-05 09:42:30 回复该评论

哇,好厉害的!的确需要博主的这个类,能发一份源码吗?

我的邮箱:hilzeo@163.com

5#aaronyang  2016-06-06 09:00:50 回复该评论

代码已经发了

6#访客  2015-08-14 12:11:14 回复该评论
博主你好,麻烦发一份你封装的post源码,我的邮箱是shan17311@qq.com
谢谢博主!
7#见识人  2015-05-26 12:28:55 回复该评论
写的很实用,能不能发份post提交的代码阿!非常感谢

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没成立公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF

声明:AYUI个人与商用免费,源码可购买。部分DEMO不免费

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

兼容XP到win10,vs2015/2017,最新AYUI:7.6.2.8

一次购买,永久免费更新,bug反馈及时修复,普通话回答你的问题,3个月的技术支持

AYUI7.6.X 企业服务详情:680元

AYUI7.6.X 官方风格详情:4000元

AYUI7.6.X 医疗+官方风格详情5000元

本AYUI知识版权最终归杨洋(AY)所有

本AYUI最终销售权归杨洋(AY)所有

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表