master

分支 (1)

管理

管理

master

tencent_map_demo
/
jquerymap.html

 <!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>地图</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="./js/jquery-1.12.4.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=7LVBZ-LDH3S-PXSOG-6XRG5-APHYH-JVBIS&libraries=place"></script>
<script src="./js/template.js"></script>
</head>
<body >
<div id="search" style="display:none">
    <span class="cancel">返回</span>
    <input type="text" value="" id="text">
    <span class="confirm">确认 </span>
</div>


<div id="container"></div>

<div class="btn-float">
  <div class="lis"><img src="./images/lis.png" width="54" height="54"></div>
  <div class="quy"><img src="./images/quy.png" width="54" height="54"></div>
  <div class="defalut"><img src="./images/defalut.png" width="54" height="54"></div>
</div>
<div class="praylay" style="display: block;"></div>
<div class="ivu-modal">
  <div class="ivu-modal-content">
    <div class="ivu-modal-body">
      <div class="ivu-modal-confirm">
        <div class="ivu-modal-confirm-head">
          <div class="ivu-modal-confirm-head-title">提示信息</div></div>
          <div class="ivu-modal-confirm-body"><div>您还未登录，请先行登录！</div></div>
          <div class="ivu-modal-confirm-footer">
            <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-large">确定</button>
          </div>
      </div>
    </div>
  </div>
</div>
<div class="ivu-modal-wrap" style="display: none">
  <div class="ivu-modal">
    <div class="ivu-modal-content">
      <a href="javascript:;" class="ivu-modal-close"></a>
      <div class="ivu-modal-header">
        <p class="title">
          <i class="ivu-icon ivu-icon-ios-paper"></i>
          <span style="font-size: 20px;font-weight:600">地区列表</span>
        </p>
      </div>
      <div class="ivu-modal-body">
        <ul class="alist" id="Place">
        </ul>
        <script type="text/html" id="PlaceTpl">
          {{each cityJson}}
            {{if $value.type == 1}}
              <li class="linkage cityactive" data-id="{{$value.id}}">{{$value.name}}</li>
            {{else if $value.type == 2}}
              <li class="linkage countactive" data-id="{{$value.id}}">{{$value.name}}</li>
            {{else}}
              <li data-id="{{$value.id}}">{{$value.name}}</li>
            {{/if}}
          {{/each}}
        </script>
      </div>
      <div class="ivu-modal-footer"></div>
    </div>
  </div>
</div>
<div class="ele_intro_box">
  <div class="ele_intro">
     <em class="intro_close"></em>
     <span class="intro_txt">该地块无养分数据</span>
     <em class="intro_close2"></em>
  </div>
</div>
    <script>
          //封装函数
          //address:输入的地址;
          //id:地图渲染的容器;
          //key:你的秘钥;
          var timerClass = 0;
        function init(address,id,key){
            $.ajax({
            type:'get',
            url:'http://apis.map.qq.com/ws/geocoder/v1/?address='+address+'&key='+key+'&output=jsonp',
            dataType:'jsonp',
            jsonp:'callback',
            success:function(data) {
              if(data.status == 0){
                  var posi=data.result.location;
                  var center = new qq.maps.LatLng(posi.lat,posi.lng);
                  var map = new qq.maps.Map(id,{
                      center: center,
                      zoom: 12
                  });

                  //实例化自动完成
                  var ap = new qq.maps.place.Autocomplete(document.getElementById('text'));
                  //调用Poi检索类。用于进行本地检索、周边检索等服务。
                  var searchService = new qq.maps.SearchService({
                      map : map
                  });
                  //添加监听事件
                  qq.maps.event.addListener(ap, "confirm", function(res){
                      searchService.search(res.value);
                  });

                  //调用地址解析类
                  geocoder = new qq.maps.Geocoder({
                      complete : function(result){
                          map.setCenter(result.detail.location);
                          var marker = new qq.maps.Marker({
                              map:map,
                              position: result.detail.location,
                              //设置Marker被添加到Map上时的动画效果为从天而降
                              animation:qq.maps.MarkerAnimation.DROP
                          });
                      }
                  });
                  // //文本标注
                  // var label = new qq.maps.Label({
                  //     position: center,
                  //     map: map,
                  //     content:'文本标注'
                  // });
                  //创建marker
                  var marker = new qq.maps.Marker({
                      position: center,
                      map: map,
                      //animation: qq.maps.MarkerAnimation.BOUNCE
                      //设置Marker被添加到Map上时的动画效果为从天而降
                      animation:qq.maps.MarkerAnimation.DROP
                      //设置Marker被添加到Map上时的动画效果为落下
                      //animation:qq.maps.MarkerAnimation.DOWN
                      //设置Marker被添加到Map上时的动画效果为升起
                      //animation:qq.maps.MarkerAnimation.UP
                  });

                  //绑定单击事件添加参数
                  //var timer = null;
                  qq.maps.event.addListener(map, 'click', function(event) {
                    alert('您点击的位置为: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']');
                    // clearInterval(timer)
                    //   timerClass++;
                    //   var htmlIntor = '';
                    //   htmlIntor +='<div class="ele_intro index_'+timerClass+'">';
                    //   htmlIntor +='   <em class="intro_close"></em>';
                    //   htmlIntor +='   <span class="intro_txt">该地块无养分数据</span>';
                    //   htmlIntor +='   <em class="intro_close2"></em>';
                    //   htmlIntor +='</div>';

                    //   $('.ele_intro_box').append(htmlIntor)
                    //   if(timer){
                    //     return;
                    //   }else{
                    //     debounce(timerIntro(), 100);
                    //   }
                  });
                }else{
                   alert('出错了，请输入正确的地址！！！')
                }
            }
          });
       }
       // function timerIntro(){
       //    var introBoxWidth = $('.ele_intro').outerWidth();
       //    timer = setInterval(function(){
       //     if($('.ele_intro').length !== 0){
       //        $('.ele_intro:first').stop().animate({'margin-left':introBoxWidth +'px'},500,function(){
       //          $(this).remove();
       //        });
       //        console.log('test');
       //      }else{
       //        clearInterval(timer)
       //      }
       //    },3000)
       //  }
       //  function debounce(fn, delay) { //滚动防抖动
       //      // debounce函数用来包裹我们的事件在事件触发的两秒后，我们包裹在debounce中的函数才会被触发
       //      // 持久化一个定时器 loadTimer
       //      var loadTimer = null;
       //      // 闭包函数可以访问 loadTimer
       //      return function() {
       //        // 通过 'this' 和 'arguments'
       //        // 获得函数的作用域和参数
       //        var context = this;
       //        var args = arguments;
       //        // 如果事件被触发，清除 loadTimer 并重新开始计时
       //        clearTimeout(loadTimer);
       //        loadTimer = setTimeout(function() {
       //          fn.apply(context, args);
       //        }, delay);
       //      }
       //    }


       //回到原始位置函数
        function codeAddress(parameter) {
            //通过getLocation();方法获取位置信息值
            geocoder.getLocation(parameter);
        }
       //点击事件
       var condiv=document.getElementById('container');

       //异步加载
       window.onload=function() {
        init('北京市朝阳区',condiv,'AJTBZ-W2MWK-WZHJT-AFN2S-ZKBVV-E7FCW');
        $('.defalut').click(function(){
            codeAddress('北京市朝阳区')
            //init('北京市朝阳区北四环中路27号盘古大观写字楼A座17F',div1,'AJTBZ-W2MWK-WZHJT-AFN2S-ZKBVV-E7FCW');
        });


        //点击确认
        $('.confirm').click(function(){
          var txtAdress = $('#text').val();
          codeAddress(txtAdress)
        })


        var cityJson = [
            {
              name: '打洛镇',
              type: '1',
              id: 1
            }, {
              name: '布郎和乡',
              type: '1',
              id: 2
            }, {
              name: '勐宋乡',
              type: '1',
              id: 3
            }
          ];

          var countyJson = [
              {
                name: '贺开村委会',
                type: '2',
                id: 11
              }, {
                name: '曼蚌村委会',
                type: '2',
                id: 22
              }, {
                name: '纳京河村委会',
                type: '2',
                id: 33
              }
            ];

          var villageJson = [
              {
                name: '贺开村',
                type: '3',
                id: 111
              }, {
                name: '曼蚌村',
                type: '3',
                id: 222
              }, {
                name: '纳京河村',
                type: '3',
                id: 333
              }
          ];

        //点击行政区域
        $('.quy').click(function(){
            event.preventDefault();
            //做演示用，实际项目会有接口
            $('#Place').html(template('PlaceTpl',{'cityJson':cityJson}))
            //做演示用，实际项目会有接口end
            getJson({
              id:'',
              type:''
            },function(res){
              console.log(res);
              $('#Place').html(template('PlaceTpl',{'cityJson':data}))
            })

          $('.praylay').show();
          $('.ivu-modal-wrap').show();


        })

        //点击每一个li
        var cityTxt = '',
            countTxt = '',
            village = '';
        $('body').on('click', '#Place li', function(event) {
          event.preventDefault();

          if($(this).hasClass('linkage')){
            if($(this).hasClass('cityactive')){

              //做演示用，实际项目会有接口
              $('#Place').html(template('PlaceTpl',{'cityJson':countyJson}))
              //做演示用，实际项目会有接口end

              cityTxt = $(this).text();
              console.log(cityTxt)
              getJson({
                id:'',
                type:''
              },function(res){
                console.log(res);
                $('#Place').html(template('PlaceTpl',{'cityJson':data}))
              })
            }else if($(this).hasClass('countactive')){

              //做演示用，实际项目会有接口
              $('#Place').html(template('PlaceTpl',{'cityJson':villageJson}))
              //做演示用，实际项目会有接口end

              countTxt = $(this).text();
              console.log(countTxt)
              getJson({
                id:'',
                type:''
              },function(res){
                console.log(res);
                $('#Place').html(template('PlaceTpl',{'cityJson':data}))
              })
            }
          } else {
            village = cityTxt + countTxt + $(this).text();
            console.log(village)
            $('.praylay').hide();
            $('.ivu-modal-wrap').hide();
            codeAddress(village)  //目前village获取数据是假的，可以用作 '北京市海淀区'  来做测试
          }
        });


        //关闭地区弹窗
        $('.ivu-modal-close').click(function(){
          $('.praylay').hide();
          $('.ivu-modal-wrap').hide();
        })

        //ajax接口地方
        function getJson(json,callback){
        $.ajax({
            url: '/path/to/file',
            type: 'default GET (Other values: POST)',
            dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
            data: json
          })
          .done(function(data) {
            callback&&callback(data);

          })
          .fail(function() {
            console.log("error");
          })
      }

      //提示框3秒以后隐藏
        function timerIntro(){
          var timer = null;
          var introBoxWidth = $('.ele_intro').outerWidth();
          timer = setTimeout(function(){
           $('.ele_intro').animate({'margin-left':introBoxWidth +'px'},500,function(){
            $(this).remove();
           });
          },3000)
        }

        timerIntro()


       }


    </script>
</body>
</html>