精华内容
下载资源
问答
  • 项目需求是做一个类似于滴滴的车辆救援,...但是有一个问题是,不同的订单状态因为表单高度不同,导致地图的定位坐标点可能不在可视区域的中心。特别是我使用了bottomsheet来实现抽屉式表单,地图和表单肯定是有部...

    项目需求是做一个类似于滴滴的车辆救援,界面是地图上面再覆盖一部分表单。订单状态不同,表单里的信息不同,那么表单的高度就不同。因为界面都使用到了map,所以尽管订单有不同的状态,但是我都在一个界面做,通过状态变化来控制表单的显示状态。但是有一个问题是,不同的订单状态因为表单高度不同,导致地图的定位坐标点可能不在可视区域的中心。特别是我使用了bottomsheet来实现抽屉式表单,地图和表单肯定是有部分重叠的。那么如何才能让定位点位于可见地图区域的中心呢?

    1、高德地图移动中心点的方法:

    AMap.setPointToCenter(centerX, centerY)

    2、寻找地图可见区域的中心点

    主要是寻找地图中心点的Y坐标,思路是屏幕高度-title高度-表单高度,这样即使我的mapview设置的是match_parent,也可以让定位坐标点位于我计算的屏幕中心。

    计算高度时遇到的问题是,什么时候计算高度。我们知道只有当view完成绘制的时候才能测量高度,所以在OnCreate里去获取控件高度肯定是不准的。网上的方法主要是以下四个:

    (1)在onWindowFocuseChanged的时候去获取。这个方法虽然能获取到宽高,但是很被动。因为这个方法只有在activity获取焦点和失去焦点的时候才会被调用。而我希望是自己能够主动去获取宽高,设置中心点

    (2)post runnable方法。没有用这个因为当时不懂原理,怕不稳妥,后来看了一下原理(https://blog.csdn.net/scnuxisan225/article/details/49815269)大概就是view.post(runnable)之后view会先取attachInfo,如果是空就会把这个runnable 添加到一个runnableQueue里,这个runnableQueue会在view.performTraversals里去遍历执行(performTraversals就是很重要的执行measure,layout.draw的地方)。最后这个list里的runnable会被handler post到主线程的消息队列中。而主线程正在执行view.performTraversals,那么post的runnable会等这个方法执行完再执行,就保证了post的runnable可以获取到宽高。(我知道onCreate的时候attchInfo是空的,那onResume的时候呢?onResume的时候会调用到view的attchToWindow的方法,如果post方法是在onResume里面,能否获取到宽高呢?不清楚)

    (3)view.measure:不推荐会有错误

    (4)ViewTreeObserver,它是一种观察者模式,可以通过给view添加布局监听,在布局完成之后进行中心点的设置。注意设置完之后要remove监听,不然每次布局变换都会被调用。

    /**
         * 根据bottom view的高度设置地图中心点位置
         * @param view
         */
        private void setMapCenter(final View view) {
            LogUtils.i("setMapCenter:" + view);
            Display defaultDisplay = getWindowManager().getDefaultDisplay();
            Point point = new Point();
            defaultDisplay.getSize(point);
            final int screenWidth = point.x;
            final int screenHeight = point.y;
            final int centerX = screenWidth / 2;
            LogUtils.i("screenWidth:" + screenWidth + ",screenHeight:" + screenHeight);
            if (view.getVisibility() == View.VISIBLE) {
                view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        int bootomViewHeight = view.getHeight();
                        int centerY = (screenHeight - bootomViewHeight) / 2;
                        LogUtils.i("centerY:" + centerY);
                        if (mImLocation.getVisibility() == View.VISIBLE) {
                            centerY = (screenHeight - bootomViewHeight + mImLocation.getHeight()) / 2;
                            LogUtils.i("centerY:" + centerY);
                        }
                        //设置map中心点
                        mAmap.setPointToCenter(centerX, centerY);
                        LogUtils.i("onGlobalLayout,centerX:" + centerX + ",centerY:" + centerY);
                        view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                });
            }
        }

    这样我在因为订单状态更新而更新界面的时候,可以通过这个方法将地图中心点(坐标marker)始终保持在地图中间

    展开全文
  • 地图页面: 关于我们 公司简介 aaaaaaaaaaa 荣誉资质 honor-and-qualification {{ item.text }} 联系我们 欢迎来到a公司,如果您有需要意向, 请您留言或者是通过以下方式联系我们! 电话:028-85756992 028-...

    百度了一大堆。乱七八糟的。

    其实不需要安装什么。

    下面就是步骤:

     

     

    https://lbs.amap.com/console/show/picker

    这里可以获取想要位置的经纬度

     

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
    <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
            Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=638bc48934e46413faf2432fdd11a6ce">
    </script>
    </body>
    </html>
    

    vue.config.js

    module.exports = {
        // 热更新配置
        // chainWebpack: config => {
        //     // 修复HMR
        //     config.resolve.symlinks(true);
        // },
        configureWebpack: {
            externals: {
                "AMap": "AMap"
            }
        }
    };

    地图页面:

    <template>
      <div class="about">
        <div class="big-img">
          <img :src="imgUrl.src" alt="关于我们"/>
        </div>
        <div class="main-box">
          <h1>关于我们</h1>
    
          <!--公司简介-->
          <div class="company-profile">
            <h2>公司简介</h2>
            <p>
             aaaaaaaaaaa
            </p>
          </div>
    
          <!--        荣誉资质-->
          <div class="honor-and-qualification">
            <h2>荣誉资质</h2>
            <h2>honor-and-qualification</h2>
            <ul>
              <li v-for="(item, index) in honorAndQualificationList" :key="index">
                <img :src="item.url" :alt="item.text">
                <h2>{{ item.text }}</h2>
              </li>
            </ul>
    
          </div>
          <div class="clearfix"></div>
    
          <!--      联系我们-->
          <div class="contact-us">
            <h2>联系我们</h2>
            <p>欢迎来到a公司,如果您有需要意向,
    
              请您留言或者是通过以下方式联系我们!</p>
            <p>电话:028-85756992 028-85756996</p>
            <p>邮箱:
              <a href="mailto:1123456789@qq.com">
                1123456789@qq.com
              </a>
            </p>
            <p>地址:中国·四川省泸州市高新工业开发区</p>
            <!--二维码-->
            <div class="QR-code">
              <div>
                <img :src="xcxImgSrc" alt="小程序二维码">
                <p>小程序二维码</p>
              </div>
              <div>
                <img :src="wxImgSrc" alt="微信二维码">
                <p>微信二维码</p>
              </div>
            </div>
          </div>
          <!--      地图-->
          <div id="mapContainer"></div>
        </div>
      </div>
    </template>
    
    <script>
    import AMap from "AMap";
    
    export default {
      name: "About",
      data() {
        return {
          honorAndQualificationList: [
            {
              url: require('../../assets/images/zizhi1.jpg'),
              text: '荣誉1'
            },
            {
              url: require('../../assets/images/zizhi2.jpg'),
              text: '荣誉2'
            },
            {
              url: require('../../assets/images/zizhi3.jpg'),
              text: '荣誉3'
            },
            {
              url: require('../../assets/images/zizhi4.jpg'),
              text: '荣誉4'
            },
            {
              url: require('../../assets/images/zizhi5.jpg'),
              text: '荣誉5'
            },
            {
              url: require('../../assets/images/zizhi6.jpg'),
              text: '荣誉6'
            },
          ],
          imgUrl: {
            src: require('../../assets/images/gywm.jpg'),
          },
          xcxImgSrc: require('../../assets/images/ewmxcx.jpg'),
          wxImgSrc: require('../../assets/images/ewmwx.jpg'),
        }
      },
      mounted() {
        this.showMap()
      },
      methods: {
        showMap() {
          let map = new AMap.Map("mapContainer", {
            resizeEnable: true,
            center: [104.037969,30.521942],
            zoom: 13,
          })
          // 坐标点
          let marker = new AMap.Marker({
            position: new AMap.LngLat(104.037969,30.521942),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '北京'
          });
    
          // 将创建的点标记添加到已有的地图实例:
          map.add(marker);
          // 同时引入工具条插件,比例尺插件和鹰眼插件
          AMap.plugin([
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.OverView',
            'AMap.MapType',
            'AMap.Geolocation',
          ], function () {
            // 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(new AMap.ToolBar());
    
            // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺
            map.addControl(new AMap.Scale());
    
            // 在图面添加鹰眼控件,在地图右下角显示地图的缩略图
            map.addControl(new AMap.OverView({isOpen: true}));
    
            // 在图面添加类别切换控件,实现默认图层与卫星图、实施交通图层之间切换的控制
            map.addControl(new AMap.MapType());
    
            // 在图面添加定位控件,用来获取和展示用户主机所在的经纬度位置
            map.addControl(new AMap.Geolocation());
          });
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .clearfix {
      clear: both;
    }
    
    .about {
      background-color: lightskyblue;
      width: 100%;
      height: 100%;
      margin-top: 70px;
      margin-bottom: 100px;
    
      .big-img {
        //margin-top: 70px;
      }
    
      .main-box {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
    
        .company-profile {
    
        }
    
        .honor-and-qualification {
          margin-top: 70px;
    
          ul {
            margin-left: 40px;
    
            li {
              list-style: none;
              width: 310px;
              border: 1px solid black;
              margin: 10px;
              padding: 20px;
              float: left;
    
              img {
                width: 350px;
    
                height: 300px;
              }
            }
    
            li:hover {
              border: 1px solid blue;
            }
          }
        }
    
        .contact-us {
          height: 1000px;
    
          .QR-code {
            div {
              width: 200px;
              height: 200px;
              float: left;
              margin: 50px;
            }
          }
        }
    
        #mapContainer {
          width: 1000px;
          height: 500px;
          background-color: #ffffff;
          margin: 50px;
        }
    
      }
    
    
    }
    </style>

     

    展开全文
  • 高德地图JS轨迹(gps坐标点转换并轨迹纠偏)

    千次阅读 热门讨论 2020-07-09 17:27:55
    设置中心点效果 坐标点转换 var pointsArr = [ [116.362209, 39.887487], [116.422897, 39.878002], [116.372105, 39.90651], [116.428945, 39.89663] ]; //每次请求做多40个点 AMap.convertFrom(pointsArr, '...

    之前用的百度多,高德感觉差不多


    最近又看的下 api , 像获取地图中心坐标, 层级 高德都直接有方法.代码得改改 # 坐标点转换
    var pointsArr =  [
            [116.362209, 39.887487],
            [116.422897, 39.878002],
            [116.372105, 39.90651],
            [116.428945, 39.89663]
        ];
    //每次请求做多40个点
    AMap.convertFrom(pointsArr, 'gps', function(status, result){
             convertCallback(status, result);
         })
    //回调函数
    function convertCallback(status, result) {
    
            if (status=='error') {
                layer.msg("地图坐标转换错误!", {icon: 2});
                return;
            }
    
            if (result.info === 'ok') {
                var pointArr = result.locations;
    
                if (0 == pointIndex) { //转换后计算
                    maxLng = pointArr[0].lng;
                    minLat = pointArr[0].lat;
                }
              }
        }            
    

    轨迹纠偏

    
    /**
    * 纠偏请求坐标格式 
    * tm参数传入存在问题,第一个元素的tm值为从1970年开始的unix的时间戳, 精确到秒,
    * 其余元素的tm值为当前采集点的时间减去第一个元素的采集时间的差值。(一开始直接取成时间戳,纠偏报异常,数据库
    * 查询是根据tm排序直接用了rownum替换 
    * 直接用rownum 发现了一个纠偏错误的地方, 但是我用实际时间戳减出来的值纠偏一直报错. 最后试2小时吧rownum
    * 乘以10 反而纠偏的轨迹是对的了)
    * 测试时有个订单的抓取的时间间隔太长, 纠偏无法规划路线
    */
    var correctPointArry = [
    {"x": 117.635982, "y": 36.696961, "sp": 0, "ag": 128, "tm": 1478031031}
    , {"x": 117.635982, "y": 36.696961, "sp": 0, "ag": 128, "tm": 2}
    ,{"x": 117.635821, "y": 36.697116, "sp": 0, "ag": 15, "tm": 3}
    ,{"x": 117.635914, "y": 36.697266, "sp": 0, "ag": 15, "tm": 4}
    ,{"x": 117.635914, "y": 36.697266, "sp": 0, "ag": 15, "tm": 5}
    ,{"x": 117.611242, "y": 36.67224, "sp": 30, "ag": 284, "tm": 6}
    ,{"x": 117.606902, "y": 36.673317, "sp": 65, "ag": 287, "tm": 7}
    ,{"x": 117.601149, "y": 36.674796, "sp": 68, "ag": 288, "tm": 8}
    ,{"x": 117.595432, "y": 36.676315, "sp": 68, "ag": 287, "tm": 9}
    ,{"x": 117.589239, "y": 36.677907, "sp": 69, "ag": 287, "tm": 10}
    , {"x": 117.5836, "y": 36.679367, "sp": 69, "ag": 287, "tm": 11}
    , {"x": 117.578022, "y": 36.680809, "sp": 61, "ag": 287, "tm": 12}
    , {"x": 117.573092, "y": 36.682101, "sp": 47, "ag": 287, "tm": 13}]
    
    //一次最多400点求情
    graspRoad.driving(correctPointArry,function(error,result) {
                correctCallback(error, result);
            });
     //回调函数
    function correctCallback(error, result) {
    
            if (!error) { //成功时error为null 
                var path2 = [];
                var newPath = result.data.points;
              }
     }
    

    画轨迹

    var map = new AMap.Map('container');
    var newLine = new AMap.Polyline({
                        path: correctPoints,
                        strokeWeight: 5,
                        strokeOpacity: 0.8,
                        strokeColor: '#009688',
                        showDir: true
                    })
     map.add(newLine)
    

    其他

    1. 轨迹顺序

    ajax获取的数据是带顺序的,转换或纠偏怕数据返回时间不一样,最好分组递归查询再统一画线

    2. 线的事件

     newLine.show(); //显示
     newLine.hide(); //隐藏
    

    3. 自定义控件

    // 两条线的按钮  设置在最上边 z-index:
    <div id='maptitle' style="float: left;padding: 30px;position: absolute;z-index: 998">
          <p class="mapp" onclick="dbonclick()">
               <button id="dbid" type="button" class="layui-btn layui-btn-danger mapbuttion" ></button>&nbsp;&nbsp;
               <strong>司机轨迹</strong>
           </p>
            <p class="mapp" onclick="cbonclick()">
            	<button id="cbid" type="button" class="layui-btn mapbuttion"></button>&nbsp;&nbsp;
            	<strong>车辆轨迹</strong>
             </p>
      </div>
      <div id="container" style="width: 100% ;height: 890px;"></div>
    

    4. 设置中心点

      map.getZoom(); //获取当前地图级别
      map.getCenter(); //获取当前地图中心位置
    /*var maxLng = 0; //最大经度
    var minLng = 0; //最小经度
    var maxLat = 0; //最大纬度
    var minLat = 0; //最小纬度
    //循环点时获取
    if (v.lon > maxLng) maxLng = v.lon;
    if (v.lon < minLng) minLng = v.lon;
    if (v.lat > maxLat) maxLat = v.lat;
    if (v.lat < minLat) minLat = v.lat;
    */
    
    //  (从网上复制)
     /**
      * 设置中心点和层级
      * @param pointslength
      */
      /*
    function setZoom(pointslength,poliyType) {
        if (pointslength > 0) {
            var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;
            var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;
            var zoom = getZoom(maxLng, minLng, maxLat, minLat);
            map.setCenter([cenLng, cenLat]);//设置中心点
            map.setZoom(zoom); //设置地图层级
    
            if ('car' == poliyType) {
                carCenterPoint = [cenLng, cenLat];
                carZoom = zoom;
            }else if ('driver' == poliyType) {
                driverCenterPoint = [cenLng, cenLat];
                driverZoom = zoom;
            }
        } else {
            //没有坐标,显示全中国
            map.setCenter([103.388611, 35.563611]);//设置中心点
            map.setZoom(zoom); //设置地图层级
        }
    }
    
     //根据经纬极值计算绽放级别。 (从网上复制)
    function getZoom(maxLng, minLng, maxLat, minLat) {
        var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]; // 级别18到3。
        var p1 = new AMap.LngLat(maxLng, maxLat)
        var p2 = new AMap.LngLat(minLng, minLat)
        //计算两个点的距离
        var distance = Math.round(p1.distance(p2)); 
        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
            if (zoom[i] - distance > 0) {
                let j = 3;
                return 18 - i + j; //之所以会多3,是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
            }
        }
        return 6;
    }*/
    

    效果

    990点画线截取 效果
    在这里插入图片描述 在这里插入图片描述

    所有代码

    //初始页面中心
    var jiananPoint = [117.000923,36.675807];
    var map = new AMap.Map('container',{
    	resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 12, //初始地图级别
        center: jiananPoint, //初始地图中心点
        showIndoorMap: false //关闭室内地图**
    });
        AMap.plugin([
            'AMap.ToolBar',
        ], function(){
            // 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(new AMap.ToolBar({
                // 简易缩放模式,默认为 false
                liteStyle: true
            }));
        });
        var pointsArry = [];
        var lwFlage = false;
        var carLine = null;
        var drvierLine = null;
        var carCenterPoint = null;
        var carZoom = null;
        var driverCenterPoint= null;
        var driverZoom= null;
        var graspRoad  = new AMap.GraspRoad();
        var carPathParam=[] ;
        var carPoints;
        var driverPoints;
        var sIndexs = null;
        //开始结束位置的图标 图片直接从高德下 [高德图标](http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png)
      var  startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: baseUrl+ 'static/img/amap.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(135, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(-9, -3)
            }),
        endIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: baseUrl+ 'static/img/amap.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-95, -3)
            });
        //初始化百度地图
        function initBaiduMap() {
         sIndexs = layer.msg('地图轨迹生成中,请稍后...', {icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: 'auto', time: 0});
         
          $.ajax({
              url: baseUrl + "pmslocusinfo/getMapOrderbyGtm",
              type: "post",
              dataType: "json",
              data: xxxJson,
              async: false,
              success: function (result) {
                  var pointMap = result.data;
                  carPoints = pointMap['car'];
     				 if (carPoints.length>0) {
                         console.log("车辆轨迹");
                         createCarPoints(carPoints,cardl.vcltn);
                      }else{
                       	 layer.close(sIndexs)
                      }
              },
              error: function (result) {
                  $("#container").text("轨迹查询异常! ")
                  layer.close(sIndexs)
              }
          });
    
    
    
    
        }
        //统计车辆坐标点
        function createCarPoints(points,loadWeight) {
            if (points.length > 0) {
    
                if (parseFloat(loadWeight) / 1000 >= 4.5) {
                    lwFlage = true;
                    var total = 0; //总记录数
                    var groupCount = 0; //每次转十条
                    if (points.length % 40 > 0) {
                        groupCount = parseInt(points.length / 40) + 1;
                    } else {
                        groupCount = parseInt(points.length / 40);
                    }
    
                    for (var i = 0; i < groupCount; i++) { //外层循环,有多少组四十条
                        var pos = []
                        for (var j = 0; j < 40; j++) { //内层循环,每组四十条
                            let pointCount = 0;
                            if (i > 1) {
                                pointCount = (i * 40) + j - 1;
                            } else {
                                pointCount = (i * 40) + j;
                            }
    
                            if (total < points.length) { //不超过总记录数结束
                                pos.push([
                                    points[pointCount].lon,
                                    points[pointCount].lat
                                ]);
                            }
                            total++;
                        }
                        pointsArry[i] = pos;
                    }
    
                    convertCoordinates(pointsArry);
                } else {
    
                    let pointArr = [];
                    $.each(points, function (i, v) {
                        pointArr.push([
                            v.lon, v.lat
                        ]);
    
                        carPathParam.push({
                            'x':v.lon,
                            'y':v.lat,
                            "sp":v.spd,
                            "ag":v.agl,
                            "tm":v.gtm
                        })
                       
                    });
    
                    createAMap(pointArr,'#009688','car');
                    map.setCenter(driverCenterPoint);
                    map.setZoom(driverZoom);
                    layer.close(sIndexs)
    
                }
            }else{
                layer.close(sIndexs)
            }
        }
    
        /**
         * 坐标转换
         * @param points
         */
        var converPointsArr = [];
        var pointIndex = 0;
        function convertCoordinates(pointsArr) {
    
            AMap.convertFrom(pointsArr[pointIndex], 'gps', function(status, result){
                convertCallback(status, result);
            })
        }
        //坐标转换回调函数
        function convertCallback(status, result) {
    
            if (status=='error') {
                layer.msg("地图坐标转换错误!", {icon: 2});
                return;
            }
    
            if (result.info === 'ok') {
                var pointArr = result.locations;
    
              
    
                $.each(pointArr, function (i, v) {
                    converPointsArr.push([
                        v.lng, v.lat
                    ]);
                   
                });
            }
            pointIndex++;
            if (pointIndex < pointsArry.length) {
                convertCoordinates(pointsArry);
            } else {
                //转换完成
                //组装纠偏数据
                assembleCorrectionData(converPointsArr)
            }
        }
        //坐标轨迹纠偏数据整合
        function assembleCorrectionData(beforeList,) {
    
            for (let x in beforeList) {
    
                carPathParam.push({
                    "x":beforeList[x][0],
                    "y":beforeList[x][1],
                    "sp":parseInt(carPoints[x].spd),
                    "ag":parseInt(carPoints[x].agl),
                    "tm":parseInt(carPoints[x].gtm)
                })
    
            }
    
            groupCorrectPoints(carPathParam);
    
        }
    
        var correctPointArry = [];
        //分组轨迹纠偏数据点 每次提交做多400个
        function groupCorrectPoints(pointss) {
            var flage=400;
            var groupCount = 0;
            if (pointss.length % flage > 0) {
                groupCount = parseInt(pointss.length / flage) + 1;
            } else {
                groupCount = parseInt(pointss.length / flage);
            }
    
            for (var i = 0; i < groupCount; i++) {
                let bIndex =i*flage;
                let eIndex =(i+1)*flage-1
                let pos = pointss.slice(bIndex, eIndex);
                pos[0].tm=1478031031;
                correctPointArry[i]=pos;
            }
            console.log(correctPointArry);
            correctLocus(correctPointArry);
        }
        var correctIndex=0 ;
        var correctPoints = [];
        //高德轨迹纠偏请求
        function correctLocus(pointArry) {
    
            graspRoad.driving(correctPointArry[correctIndex],function(error,result) {
                correctCallback(error, result);
            });
        }
        //轨迹纠偏回调函数
        function correctCallback(error, result) {
    
            if (error !=null && !error) {
                var path2 = [];
                var newPath = result.data.points;
                for (var i = 0; i < newPath.length; i += 1) {
                    correctPoints.push([newPath[i].x, newPath[i].y]);
                }
                correctIndex++
    
                if (correctIndex < correctPointArry.length) {
                    //递归
                    correctLocus(correctPointArry);
                } else {
                    //画车辆轨迹
                	createAMap(correctPoints,'#009688','car');
                }
            }else{
    			console.log(error);
            // console.log('车辆轨迹转换'+error.errdetail+', 不进行纠偏');
    
            carLine = new AMap.BezierCurve({
                path: converPointsArr,
                isOutline: true,
                outlineColor: '#ffeeff',
                borderWeight: 3,
                strokeColor: "#3366FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                // 线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                strokeDasharray: [10, 10],
                lineJoin: 'round',
                lineCap: 'round',
                zIndex: 50,
                showDir: true
            })
    
            carLine.setMap(map)
            // 缩放地图到合适的视野级别
            map.setFitView([carLine])
    
             cStartMarker = new AMap.Marker({
                position: new AMap.LngLat(converPointsArr[0].lng,converPointsArr[0].lat),
                icon: startIcon,
                offset: new AMap.Pixel(-13, -30),
            });
    
            // 将 icon 传入 marker
             cEndMarker = new AMap.Marker({
                position: new AMap.LngLat(converPointsArr[converPointsArr.length1].lng,converPointsArr[converPointsArr.length-1].lat),
                icon: endIcon,
                offset: new AMap.Pixel(-13, -30),
            });
    
            cStartMarker.setMap(map);
            cEndMarker.setMap(map);
            map.setFitView();
            carZoom = map.getZoom(); //获取当前地图级别
            carCenterPoint = map.getCenter(); //获取当前地图中心位置
    
            layer.close(sIndexs);
    		}
        }
    
        /**
         * 渲染高德地图轨迹
         * @param pointArr
         * @param lineColor
         * @param poliyType
         */
        function createAMap(pointArr,lineColor,poliyType) {
    
    
          carLine = new AMap.BezierCurve({
                path: pointArr,
                isOutline: true,
                outlineColor: '#ffeeff',
                borderWeight: 3,
                strokeColor: "#3366FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                // 线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                strokeDasharray: [10, 10],
                lineJoin: 'round',
                lineCap: 'round',
                zIndex: 50,
                showDir: true
            })
    
            carLine.setMap(map)
            // 缩放地图到合适的视野级别
            map.setFitView([carLine])
    
            cStartMarker = new AMap.Marker({
                position: new AMap.LngLat(pointArr[0].lng,pointArr[0].lat),
                icon: startIcon,
                offset: new AMap.Pixel(-13, -30),
            });
    
            // 将 icon 传入 marker
            cEndMarker = new AMap.Marker({
                position: new AMap.LngLat(pointArr[pointArr.length-1].lng,pointArr[pointArr.length-1].lat),
                icon: endIcon,
                offset: new AMap.Pixel(-13, -30),
            });
    
            cStartMarker.setMap(map);
            cEndMarker.setMap(map);
            map.setFitView();
            carZoom = map.getZoom(); //获取当前地图级别
            carCenterPoint = map.getCenter(); //获取当前地图中心位置
            layer.close(sIndexs);
        }
    	//车辆轨迹图标点击事件
    	function cbonclick() {
    	
    	    if (carLine != null) {
    	        let css = $("#cbid").attr("class")
    	        if(css.indexOf("layui-btn-primary") !=-1){
    	            map.setCenter(carCenterPoint);//设置中心点
    	            map.setZoom(carZoom);
    	            carLine.show();
    	            cStartMarker.show();
    	            cEndMarker.show();
    	            $("#cbid").attr("class","layui-btn carMapbuttion")
    	        }else{
    	            carLine.hide();
    	            cStartMarker.hide();
    	            cEndMarker.hide();
    	            $("#cbid").attr("class","layui-btn layui-btn-primary carMapbuttion")
    	        }
    	    }else {
    	        layer.alert('暂无轨迹坐标数据!', {icon: 5});
    	    }
    	
    	}
    
    展开全文
  • 人狠话不多,直接上代码 ...将POI搜索查询后的点设置地图中心,然后点击获取标记点坐标 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati...

    人狠话不多,直接上代码

    直接POI提示搜索后查询,结果查询后地图上标记的点无法获取坐标

    在这里插入图片描述
    改进之后:
    将POI搜索查询后的点设置为地图中心,然后点击获取标记点坐标

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>输入提示</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <style>
            html,
            body,
            #container {
              width: 100%;
              height: 100%;
            }
        </style>
    </head>
    <body>
    <div class="layui-form-item layui-form-text" style="height: 300px">
        <div class="layui-input-block">
            <div id="container" style="height: 290px"></div>
            <div id="myPageTop">
                <table>
                    <tr>
                        <td>
                            <label>按关键字搜索:</label>
                        </td>
                        <td class="column2">
                            <label>左击标记点获取经纬度:</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="tipinput"   autocomplete="off" "if(event.keyCode==13)return false;" placeholder="请输入关键字进行搜索" >
                        </td>
                        <td class="column2">
                            <input type="text"  readonly="true" id="lnglat" name="lnglat" >
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        
    </div>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=aa31c41926555dea9c2dfc2cfaac68f1&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript">
    	var address = "";
        var map = new AMap.Map("container", {
                resizeEnable: true,
                
                zoom: 18
            })
    
            //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
    
            if (marker) {
                marker.setMap(null);
                marker = null;
            }
            addMarker(e.lnglat.getLng(),e.lnglat.getLat());
            //这边是数组
            var lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()];
            //regeocoder(lnglatXY);
        });
    
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
    
        //注册监听,当选中某条记录时会触发
        AMap.event.addListener(auto, "select", select);
        function select(e) {
            var lng = e.poi.location.lng;
            var lat = e.poi.location.lat;
            document.getElementById("lnglat").value = lng+","+lat;
            console.log(address);
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
                addMarker(lng,lat);
            }
        }
    
        var marker;
        // 实例化点标记
        function addMarker(lng,lat) {
            marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [lng, lat]
            });
            marker.setMap(map);
        }
    
        //坐标-地址
        function regeocoder(lnglatXY) {  //逆地理编码
            var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });
            geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    geocoder_CallBack(result);
                }
            });
        }
    
        function geocoder_CallBack(data) {
             var address1 = data.regeocode.formattedAddress; //返回地址描述
            document.getElementById("tipinput").value=address1;
        }
        
        console.log(address);
    </script>
    </body>
    </html>
    

    在这里插入图片描述

    原文https://www.cnblogs.com/SeaWxx/p/9519462.html

    展开全文
  • 纬度:22.525351,经度:...设置地图中心坐标点 CLLocationCoordinate2D cl2d = CLLocationCoordinate2DMake(22.540396,113.951832); _mapView.centerCoordinate = cl2d; 谷歌地图:22.5254311346,113.93963...
  • 1、高德坐标拾取的demo ... 2、设置地图中心点的demo ... 3、将两个代码合并 1)、设置中心点 2)、改造坐标拾取的代码 txtp=txtp+ ',['+e.lnglat.getLng() + ...
  • center: [118.326443, 35.065282], //中心点坐标 viewMode: '3D', //使用3D视图 mapStyle: "amap://styles/8ce81794726a2f639a98dc3873d40114"//地图皮肤 }); var mess; //设置自定义 点样式,根据后台返回的数据...
  • 高德地图 zoom地图级别无效问题

    千次阅读 2020-05-15 14:25:03
    center: [116.397428, 39.90923],//设置地图中心点坐标 layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组 mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式 ...
  • 高德地图使用

    2017-12-23 15:14:43
    1.初始化地图: var map; function(){  map = new IMAP.MAP("map",{  minZoom : 3,  maxZoom:22,  zoom:22,//设置地图初始化级别  center: new IMAP.LngLat(经度,纬度),//地图中心坐标点  anim
  • 申请JSAPI的开发者key引入高德地图JavaScript API文件:创建地图容器在页面body里你想展示地图的地方创建一个div 容器,并指定id标识:指定容器大小按照需要设定地图容器的大小,确保大小合适,比如用CSS这样设置它:#...
  • java服务器高德地图API

    2015-07-06 17:56:18
    // 设置地图中心点坐标 } */ if (parseFloat(longitude)!=0&&parseFloat(latitude)!=0){ var marker = new AMap.Marker({ id:"m", position:new AMap.LngLat(longitude,latitude), offset:new AMap....
  • 问题描述就是我想让页面打开时默认划分显示的区域就是广州市问题出现的环境背景及自己尝试过哪些方法不知道怎么设置默认,没又... {zoom:11,//级别center: [113.107901,22.995755],//中心点坐标viewMode:'3D',//使...
  • 高德地图JavaScript API

    2019-07-09 17:44:20
    初始化地图: var map = new AMap.Map('map', { ... center: [116.397428, 39.90923],//中心点坐标 }); 自定义图标的点标记: //设置图标 var icon = new AMap.Icon({ size: new AMap.Size(40, 40), ...
  • 3、获取地图中心点坐标,移动地图后获取地图中心点坐标; 4、逆地理编码,根据当前经纬度获取附近的地理位置信息; ①、显示地图和蓝点,设置一些地图上面的显示信息: if (aMap == null) {...
  • 前不久发现个小问题,项目需要实现点击某个Marker时将地图放大到合适的级别,中心点设置为当前Marker的坐标,并显示一个InfoWindow;问题所在就是当点击该Marker的时候,经常无法将地图中心设置为当前Marker的坐标,导致...
  • 为何要计算zoom级别 当我们在地图设置很多坐标点的时候需要对地图进行初始化,...很多坐标地图上的时候,实际中心点的位置,可以根据坐标最大最小值进行计算出来 伪码举例: for(var latlng in latLngList){ ...
  • 高德地图轨迹回放、路径规划以及计算面积(超详细!!) 主要涉及到高德地图的路径规划、区域规划以及轨迹回放功能... //中心点坐标 // pitch:45, layers: [//使用多个图层 new AMap.TileLayer.Satellite(), new AM
  • 高德地图当前定位失败Geolocation permission denied 代码来自官网 ``` mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ ...
  • 高德定位学习 Day2

    2018-12-11 11:49:16
    这是学习使用高德地图api的第二天,可能我的学习过程不是完善的,毕竟我也是在... // 传入经纬度,设置地图中心点 //宣武门坐标 var position = new AMap.LngLat(116.374314, 39.899765); // 标准写法 // 简写 var...
  • 中心坐标、缩放级别、倾斜度的设置,支持动画过渡 地图事件(onPress、onLongPress、onLocation、onStatusChange) 地图标记(Marker) 自定义信息窗体 自定义图标 折线绘制(Polyline) 多边形绘制(Polygon) ...
  • 提供精美炫酷的大屏地图模块,包括静态图片+闪烁效果+迁徙效果+世界地图+区域地图等,可指定点的经纬度坐标,识别单击响应,可以做地图跳转等,每个都可以不同的颜色和提示信息,功能超牛逼! 除了提供大屏系统外...

空空如也

空空如也

1 2
收藏数 24
精华内容 9
关键字:

高德地图设置中心点坐标