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

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

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

如何让用户点,我们可以获得经纬度,我们就要先了解下它给我们提供的百度地图的事件


主要有两个操作事件的,绑定(addEventListener)和解绑(removeEventListener)

一些事件:click  地图被单击 map.addEventListener("tilesloaded", function (e){alert(e.point.lng + ", " + e.point.lat);})

              tilesloaded  地图完全加载完成 map.addEventListener("tilesloaded", function (){})

              load  地图加载时候   map.addEventListener("load", function (){})

              dragend 地图拖拽完成后 map.addEventListener("dragend", function (){})

              zoomend 地图缩放时候     

ap.addEventListener("zoomend", function(){
  alert("地图缩放至:" + this.getZoom() + "级");
});


解绑的demo

 map.removeEventListener("click", 对应的方法名字);


 

案例1     存储手机用户的信息

1.获得用户的地点,从地图上点选

基本页面布局代码

@{
    ViewBag.Title = "FirstSaveInfo";
}

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



<div id="userForm">
    <form method="post" name="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="UserId" name="UserId" 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="PhoneUnique" name="PhoneUnique" 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" value="" max="18" id="hflng" name="hflng" />
                    <input type="hidden" value="" max="18" id="hflat" name="hflat" />
                </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">
    $(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);

    })
    function SaveData() {
        //不验证了


    }
  
    


</script>

效果图:

表名字叫 LeverTerminal   

添加的字段


休息一下--http://aaronyang.cnblogs.com

一切准备好了,开始试验,堆代码,我哈哈


 

1.知识点-事件,单击地图获得经纬度

接下来,我们添加下面代码

map.addEventListener("click", function (e) {
            var lng = e.point.lng;
            var lat = e.point.lat;
            $("#hflng").val(lng);
            $("#hflat").val(lat);
            $("#tudeShow").val(lng + "," + lat);
            //经纬度转换成汉字  

        })

2.知识点-反地址解析

使用 var gc = new BMap.Geocoder();   

修改后的代码如下:

        var gc = new BMap.Geocoder();

        map.addEventListener("click", function (e) {
            var lng = e.point.lng;
            var lat = e.point.lat;
            $("#hflng").val(lng);
            $("#hflat").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);
            });

        })

效果图:

 3.我们在使用百度地图的时候,一般点一下,应该都有个标记才对,添加标注点 maker

使用   var marker = new BMap.Marker(point);  

代码如下:

var marker = new BMap.Marker(pt);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中          //  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

竟然知道怎么添加maker,我们每次选择都要移除掉上一个,所以每次单击,我们记住上一个,单击时候,移除上一个maker,添加新的maker

js代码如下:

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;
            $("#hflng").val(lng);
            $("#hflat").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); //跳动的动画
         
        })
    })

效果图:

好了,到目前为止,我们竟然有了数据,我们就可以把这个数据,本地数据库存一遍,然后LBS云再存一份,方便LBS提供给我更多快捷的惊喜

到目前为止:数据的获得已经拿到了。


 

休息一下,下面一节课,我们学习下POI的数据存储,有了这个数据,我们就可以有更多丰富的强大的功能!

感兴趣,就给个赞吧,自己研究百度地图的东东的,求支持O(&cap;_&cap;)O~~么么哒

 

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

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

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

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

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

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

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

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

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

标签列表