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

2021-07-20 09:50:40

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

主要有两个操作事件的，绑定(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.获得用户的地点，从地图上点选

基本页面布局代码

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

@{
    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(∩_∩)O~~么么哒

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

码农公寓

相关文章