zoukankan      html  css  js  c++  java
  • 指定地图图标在视野范围内移动

    前言:地图图标移动过程中要求可见,下面针对三种地图给出实例。

    运用:GPS轨迹播放。
    1、Google地图:
    function calculateToView(latlng){
       var bounds=map.getBounds();
       //不在bounds之内则做相应的处理
       if(!bounds.contains(latlng)){
          var ne=bounds.getNorthEast(),sw=bounds.getSouthWest();
           var northEastX=ne.x,northEastY=ne.y,southWestX=sw.x,southWestY=sw.y;
           var center=map.getCenter();
           var lng=center.lng(),lat=center.lat();
           var px=latlng.lng(),py=latlng.lat();
           if(px<=southWestX){//出左边界
              var minusRt=southWestX-px;
              center=new google.maps.LatLng(lat,lng-minusRt);
           }else if(px>=northEastX){//出右边界
              var minusRt=px-northEastX;
              center=new google.maps.LatLng(lat,lng+minusRt);
           }else if(py>=northEastY){//出上边界
              var minusRt=py-northEastY;
              center=new google.maps.LatLng(lat+minusRt,lng);
           }else if(py<=southWestY){//出下边界
              var minusRt=southWestY-py;
              center=new google.maps.LatLng(lat-minusRt,lng);
           }
           map.panTo(center);
       }
    }
    2、OpenLayers地图:
    function calculateToView(lonlat){
       var bounds=map.getExtent();
       //不在bounds之内则做相应的处理
       if(!bounds.containsLonLat(lonlat)){
           var northEastX=bounds.right,northEastY=bounds.top,southWestX=bounds.left,southWestY=bounds.bottom;
           var center=map.getCenter();
           var lon=center.lon,lat=center.lat;
           var px=latlng.lon,py=latlng.lat;
           if(px<=southWestX){//出左边界
              var minusRt=southWestX-px;
              center=new OpenLayers.LonLat(lon-minusRt,lat);
           }else if(px>=northEastX){//出右边界
              var minusRt=px-northEastX;
              center=new OpenLayers.LonLat(lon+minusRt,lat);
           }else if(py>=northEastY){//出上边界
              var minusRt=py-northEastY;
              center=new OpenLayers.LonLat(lon,lat+minusRt);
           }else if(py<=southWestY){//出下边界
              var minusRt=southWestY-py;
              center=new OpenLayers.LonLat(lon,lat-minusRt);
           }
           map.panTo(center);
       }
    }
    3、ALiYun(阿里云地图):
    function calculateToView(latlng){
       var bounds=map.getBounds();
       //不在bounds之内则做相应的处理
       if(!bounds.containsLatLng(latlng)){
           var ne=bounds.getNorthEast(),sw=bounds.getSouthWest();
           var northEastX=ne.x,northEastY=ne.y,southWestX=sw.x,southWestY=sw.y;
           var center=map.getCenter();
           var lng=center.lng(),lat=center.lat();
           var px=latlng.lng(),py=latlng.lat();
           if(px<=southWestX){//出左边界
              var minusRt=southWestX-px;
              center=new AliLatLng(lat,lng-minusRt);
           }else if(px>=northEastX){//出右边界
              var minusRt=px-northEastX;
              center=new AliLatLng(lat,lng+minusRt);
           }else if(py>=northEastY){//出上边界
              var minusRt=py-northEastY;
              center=new AliLatLng(lat+minusRt,lng);
           }else if(py<=southWestY){//出下边界
              var minusRt=southWestY-py;
              center=new AliLatLng(lat-minusRt,lng);
           }
           map.panTo(center);
       }
    }

    注:所传参数均为经纬度坐标。

  • 相关阅读:
    Please verify that your alternate settings file is specified properly and exists in the workspace.
    史上最全最新微信小程序自动化教程
    Android的WebView调试工具(无需FanQ,可同时调试多个设备,永不过期)
    Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)
    appium+java(四)微信公众号自动化测试
    基于APPIUM测试微信公众号的UI自动化测试框架
    Appium测试微信公众号
    通过Debugx5在电脑端调试微信页面
    微信小程序自动化测试实践
    Rocketmq和Kafka区别
  • 原文地址:https://www.cnblogs.com/boonya/p/2512109.html
Copyright © 2011-2022 走看看