map_frm.html 6.53 KB
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/utils/map.css"/>
      <style>
          html,
          body{
            background: #FFFFFF;
          }
      </style>
  </head>
  <body>
    <div class="search-area" >
      <input id="gzdl" class="aui-input" oninput="OnInput(event)" onpropertychange="OnPropChanged(event)" placeholder="搜索地点" type="text" style="height:100%;width:100%;text-align:center;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    var bmap;
      apiready = function(){
        bmap = api.require('bMap');
        api.openFrame({
            name: 'map_list',
            url: './map_list.html',
            rect: {
                x: 0,
                y: 360,
                w: api.winWidth,
                // h: api.pageParam.fH-400
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
        });

        initMap();

        // api.addEventListener({
        //     name: 'selected_device_location'
        // }, function(ret, err){
        //     if( ret ){
        //       updateLocation(ret.value.address);
        //     }
        // });
      };
//searchInBounds  //56px
      function initMap() {
        if ($api.getStorage('SYSTEMTYPE') == 'ios') {
          bmap.initMapSDK(function(ret) {
            if (ret.status) {
                // alert('地图初始化成功,可以从百度地图服务器检索信息了!');
            }
          });
        }
        bmap.getLocationServices(function(ret, err) {
            if (ret.enable) {
              bmap.getLocation({
                  accuracy: '10m',
                  autoStop: true,
                  filter: 1
              }, function(ret1, err) {
                  if (ret1.status) {
                    bmap.open({
                        rect: {
                            x: 0,
                            y: 56,
                            w: api.winWidth,
                            h: 234

                        },
                        center: {
                            lon: ret1.lon,
                            lat: ret1.lat
                        },
                        zoomLevel: 17,
                        showUserLocation: true,
                        fixedOn: api.frameName,
                        fixed: true
                    }, function(ret) {
                        if (!ret.status) {
                          alert('打开地图失败');
                        }else {
                          bmap.getNameFromCoords({
                              lon: ret1.lon,
                              lat: ret1.lat
                          }, function(ret2, err) {
                              if (ret2.status) {
                                api.sendEvent({
                                    name: 'updateMapList',
                                    extra: {
                                        mapList: ret2.poiList,
                                        search: false
                                    }
                                });
                              }
                          });
                        }
                    });
                  } else {
                      alert(err.code);
                  }
              });
            } else {
                alert("您未开启定位功能,请前往设置开启!");
            }
        });


      }

      function updateLocation(val) {
        // bmap.open({
        //     rect: {
        //         x: 0,
        //         y: 56,
        //         w: api.winWidth,
        //         h: 234
        //
        //     },
        //     center: {
        //         lon: val.lon,
        //         lat: val.lat
        //     },
        //     zoomLevel: 17,
        //     showUserLocation: true,
        //     fixedOn: api.frameName,
        //     fixed: true
        // }, function(ret) {
        //     if (!ret.status) {
        //       alert('打开地图失败');
        //     }else {
        //       bmap.getNameFromCoords({
        //           lon: val.lon,
        //           lat: val.lat
        //       }, function(ret2, err) {
        //           if (ret2.status) {
        //             api.sendEvent({
        //                 name: 'updateMapList',
        //                 extra: {
        //                     mapList: ret2.poiList,
        //                 }
        //             });
        //           }
        //       });
        //     }
        // });
      }

      function searchInBounds(keyword) {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '加载中...',
            text: '',
            modal: true
        });
        bmap.getLocation({
            accuracy: '10m',
            autoStop: true,
            filter: 1
        }, function(ret1, err) {
          bmap.searchNearby({
              keyword: keyword,
              lon: ret1.lon,
              lat: ret1.lat,
              radius: 2000
          }, function(ret, err) {
            api.hideProgress();
              if (ret.status) {
                if (ret.results.length > 0) {
                  api.sendEvent({
                      name: 'updateMapList',
                      extra: {
                          mapList: ret.results,
                          search: true
                      }
                  });
                }
              }
          });
        });

      }

  // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
      function OnInput (event) {
          // alert ("The new content: " + event.target.value);
          // console.log(event.target.value);
          searchInBounds(event.target.value);
      }
  // Internet Explorer
      // function OnPropChanged (event) {
      //     if (event.propertyName.toLowerCase () == "value") {
      //         alert ("The new content: " + event.srcElement.value);
      //     }
      // }
  </script>
  </html>