Trung tâm cá nhân
sách gpt4 ăn đã đi

javascript - Google Maps API - 在定义的点沿折线保留可拖动标记

In lại Tác giả: Walker 123 更新时间：2023-11-29 19:01:54 25 4
mua khóa gpt4 giày nike

我试图将标记点保留在示例中数组“polypath”中的预定义点(纬度/经度)中，因此标记会沿着折线到达最近的现有点，因此我可以使用选定的点到另一个计算。

下面的代码显示了用户可以将标记保留在多段线中任意位置的当前行为:

var gmap;
var currentMarker = new google.maps.Marker({
            position: new google.maps.LatLng(54.13512, -117.0114),
            draggable: true
        });
var snapToRoute = null;
var polypath = new Array(
        new google.maps.LatLng(54.13512, -117.0114),
        new google.maps.LatLng(54.13353, -117.01141),
        new google.maps.LatLng(54.1332, -117.01159),
        new google.maps.LatLng(54.13241, -117.01157),
        new google.maps.LatLng(54.13217, -117.01142),
        new google.maps.LatLng(54.12725, -117.01143),
        new google.maps.LatLng(54.12185, -117.00125),
        new google.maps.LatLng(54.1188, -116.9955),
        new google.maps.LatLng(54.11603, -116.99473),
        new google.maps.LatLng(54.11517, -116.99281),
        new google.maps.LatLng(54.10235, -116.97771),
        new google.maps.LatLng(54.10244, -116.96093),
        new google.maps.LatLng(54.10197, -116.96067),
        new google.maps.LatLng(54.10158, -116.96075),
        new google.maps.LatLng(54.09808, -116.95913),
        new google.maps.LatLng(54.09725, -116.95668),
        new google.maps.LatLng(54.09669, -116.95598),
        new google.maps.LatLng(54.08378, -116.9471),
        new google.maps.LatLng(54.08218, -116.94696),
        new google.maps.LatLng(54.07374, -116.93832),
        new google.maps.LatLng(54.07319, -116.93571),
        new google.maps.LatLng(54.07185, -116.93527));
        
    var polyline = new google.maps.Polyline({
				path: polypath,
				strokeColor: "red",
				strokeWeight: 2,
				strokeOpacity: 1
			});

function initialize() {
    gmap = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(54.10244, -116.96093),
        zoom: 12
    });
    
    
     currentMarker.setMap(gmap);
    polyline.setMap(gmap);
   
    
   snapToRoute = new SnapToRoute(gmap, currentMarker, polyline);
}

google.maps.event.addDomListener(window, "load", initialize);

function SnapToRoute(map, marker, polyline) {
    this.routePixels_ = [];
    this.normalProj_ = map.getProjection();
    this.map_ = map;
    this.marker_ = marker;
    this.polyline_ = polyline;

    this.init_();
}

SnapToRoute.prototype.init_ = function () {
    this.loadLineData_();
    this.loadMapListener_();
};

SnapToRoute.prototype.updateTargets = function (marker, polyline) {
    this.marker_ = marker || this.marker_;
    this.polyline_ = polyline || this.polyline_;
    this.loadLineData_();
};

SnapToRoute.prototype.loadMapListener_ = function () {
    var me = this;

    google.maps.event.addListener(me.marker_, "dragend", function (evt) {
        me.updateMarkerLocation_(evt.latLng);
    });

    google.maps.event.addListener(me.marker_, "drag", function (evt) {
        me.updateMarkerLocation_(evt.latLng);
    });

    google.maps.event.addListener(me.map_, "zoomend", function (evt) {
        me.loadLineData_();
    });
};

SnapToRoute.prototype.loadLineData_ = function () {
    var zoom = this.map_.getZoom();
    this.routePixels_ = [];
    var path = this.polyline_.getPath();
    for (var i = 0; i < path.getLength(); i++) {
        var Px = this.normalProj_.fromLatLngToPoint(path.getAt(i));
        this.routePixels_.push(Px);
    }
};

SnapToRoute.prototype.updateMarkerLocation_ = function (mouseLatLng) {
    var markerLatLng = this.getClosestLatLng(mouseLatLng);
    this.marker_.setPosition(markerLatLng);
};

SnapToRoute.prototype.getClosestLatLng = function (latlng) {
    var r = this.distanceToLines_(latlng);
    return this.normalProj_.fromPointToLatLng(new google.maps.Point(r.x, r.y));
};

SnapToRoute.prototype.getDistAlongRoute = function (latlng) {
    if (typeof (opt_latlng) === 'undefined') {
        latlng = this.marker_.getLatLng();
    }
    var r = this.distanceToLines_(latlng);
    return this.getDistToLine_(r.i, r.to);
};

SnapToRoute.prototype.distanceToLines_ = function (mouseLatLng) {
    var zoom = this.map_.getZoom();
    var mousePx = this.normalProj_.fromLatLngToPoint(mouseLatLng);
    var routePixels_ = this.routePixels_;
    return this.getClosestPointOnLines_(mousePx, routePixels_);
};

SnapToRoute.prototype.getDistToLine_ = function (line, to) {
    var routeOverlay = this.polyline_;
    var d = 0;
    for (var n = 1; n < line; n++) {
        d += google.maps.geometry.spherical.computeDistanceBetween(routeOverlay.getAt(n - 1), routeOverlay.getAt(n));
    }
    d += google.maps.geometry.spherical.computeDistanceBetween(routeOverlay.getAt(line - 1), routeOverlay.getAt(line)) * to;
    return d;
};

SnapToRoute.prototype.getClosestPointOnLines_ = function (pXy, aXys) {
    var minDist;
    var to;
    var from;
    var x;
    var y;
    var i;
    var dist;

    if (aXys.length > 1) {
        for (var n = 1; n < aXys.length; n++) {
            if (aXys[n].x !== aXys[n - 1].x) {
                var a = (aXys[n].y - aXys[n - 1].y) / (aXys[n].x - aXys[n - 1].x);
                var b = aXys[n].y - a * aXys[n].x;
                dist = Math.abs(a * pXy.x + b - pXy.y) / Math.sqrt(a * a + 1);
            } khác {
                dist = Math.abs(pXy.x - aXys[n].x);
            }

            var rl2 = Math.pow(aXys[n].y - aXys[n - 1].y, 2) + Math.pow(aXys[n].x - aXys[n - 1].x, 2);
            var ln2 = Math.pow(aXys[n].y - pXy.y, 2) + Math.pow(aXys[n].x - pXy.x, 2);
            var lnm12 = Math.pow(aXys[n - 1].y - pXy.y, 2) + Math.pow(aXys[n - 1].x - pXy.x, 2);
            var dist2 = Math.pow(dist, 2);
            var calcrl2 = ln2 - dist2 + lnm12 - dist2;
            if (calcrl2 > rl2) {
                dist = Math.sqrt(Math.min(ln2, lnm12));
            }

            if ((minDist == null) || (minDist > dist)) {
                to = Math.sqrt(lnm12 - dist2) / Math.sqrt(rl2);
                from = Math.sqrt(ln2 - dist2) / Math.sqrt(rl2);
                minDist = dist;
                i = n;
            }
        }
        if (to > 1) {
            to = 1;
        }
        if (from > 1) {
            to = 0;
            from = 1;
        }
        var dx = aXys[i - 1].x - aXys[i].x;
        var dy = aXys[i - 1].y - aXys[i].y;

        x = aXys[i - 1].x - (dx * to);
        y = aXys[i - 1].y - (dy * to);
    }
    trở lại {
        'x': x,
            'y': y,
            'i': i,
            'to': to,
            'from': from
    };
};
html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

câu trả lời hay nhất

删除将点插值到顶点之间直线上最近点的代码。

var dx = aXys[i - 1].x - aXys[i].x;
var dy = aXys[i - 1].y - aXys[i].y;

x = aXys[i - 1].x - (dx * to);
y = aXys[i - 1].y - (dy * to);

将其更改为返回一个顶点(i 是下一个顶点，i-1 是前一个顶点):

x = aXys[i].x; 
y = aXys[i].y;

proof of concept fiddle

代码片段:

var gmap;
var currentMarker = new google.maps.Marker({
  position: new google.maps.LatLng(54.13512, -117.0114),
  draggable: true
});
var snapToRoute = null;
var polypath = new Array(
  new google.maps.LatLng(54.13512, -117.0114),
  new google.maps.LatLng(54.13353, -117.01141),
  new google.maps.LatLng(54.1332, -117.01159),
  new google.maps.LatLng(54.13241, -117.01157),
  new google.maps.LatLng(54.13217, -117.01142),
  new google.maps.LatLng(54.12725, -117.01143),
  new google.maps.LatLng(54.12185, -117.00125),
  new google.maps.LatLng(54.1188, -116.9955),
  new google.maps.LatLng(54.11603, -116.99473),
  new google.maps.LatLng(54.11517, -116.99281),
  new google.maps.LatLng(54.10235, -116.97771),
  new google.maps.LatLng(54.10244, -116.96093),
  new google.maps.LatLng(54.10197, -116.96067),
  new google.maps.LatLng(54.10158, -116.96075),
  new google.maps.LatLng(54.09808, -116.95913),
  new google.maps.LatLng(54.09725, -116.95668),
  new google.maps.LatLng(54.09669, -116.95598),
  new google.maps.LatLng(54.08378, -116.9471),
  new google.maps.LatLng(54.08218, -116.94696),
  new google.maps.LatLng(54.07374, -116.93832),
  new google.maps.LatLng(54.07319, -116.93571),
  new google.maps.LatLng(54.07185, -116.93527));

var polyline = new google.maps.Polyline({
  path: polypath,
  strokeColor: "red",
  strokeWeight: 2,
  strokeOpacity: 1
});

function initialize() {
  gmap = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(54.10244, -116.96093),
      zoom: 12
    });


  currentMarker.setMap(gmap);
  polyline.setMap(gmap);


  snapToRoute = new SnapToRoute(gmap, currentMarker, polyline);
}

google.maps.event.addDomListener(window, "load", initialize);

function SnapToRoute(map, marker, polyline) {
  this.routePixels_ = [];
  this.normalProj_ = map.getProjection();
  this.map_ = map;
  this.marker_ = marker;
  this.polyline_ = polyline;

  this.init_();
}

SnapToRoute.prototype.init_ = function() {
  this.loadLineData_();
  this.loadMapListener_();
};

SnapToRoute.prototype.updateTargets = function(marker, polyline) {
  this.marker_ = marker || this.marker_;
  this.polyline_ = polyline || this.polyline_;
  this.loadLineData_();
};

SnapToRoute.prototype.loadMapListener_ = function() {
  var me = this;

  google.maps.event.addListener(me.marker_, "dragend", function(evt) {
    me.updateMarkerLocation_(evt.latLng);
  });

  google.maps.event.addListener(me.marker_, "drag", function(evt) {
    me.updateMarkerLocation_(evt.latLng);
  });

  google.maps.event.addListener(me.map_, "zoomend", function(evt) {
    me.loadLineData_();
  });
};

SnapToRoute.prototype.loadLineData_ = function() {
  var zoom = this.map_.getZoom();
  this.routePixels_ = [];
  var path = this.polyline_.getPath();
  for (var i = 0; i < path.getLength(); i++) {
    var Px = this.normalProj_.fromLatLngToPoint(path.getAt(i));
    this.routePixels_.push(Px);
  }
};

SnapToRoute.prototype.updateMarkerLocation_ = function(mouseLatLng) {
  var markerLatLng = this.getClosestLatLng(mouseLatLng);
  this.marker_.setPosition(markerLatLng);
};

SnapToRoute.prototype.getClosestLatLng = function(latlng) {
  var r = this.distanceToLines_(latlng);
  return this.normalProj_.fromPointToLatLng(new google.maps.Point(r.x, r.y));
};

SnapToRoute.prototype.getDistAlongRoute = function(latlng) {
  if (typeof(opt_latlng) === 'undefined') {
    latlng = this.marker_.getLatLng();
  }
  var r = this.distanceToLines_(latlng);
  return this.getDistToLine_(r.i, r.to);
};

SnapToRoute.prototype.distanceToLines_ = function(mouseLatLng) {
  var zoom = this.map_.getZoom();
  var mousePx = this.normalProj_.fromLatLngToPoint(mouseLatLng);
  var routePixels_ = this.routePixels_;
  return this.getClosestPointOnLines_(mousePx, routePixels_);
};

SnapToRoute.prototype.getDistToLine_ = function(line, to) {
  var routeOverlay = this.polyline_;
  var d = 0;
  for (var n = 1; n < line; n++) {
    d += google.maps.geometry.spherical.computeDistanceBetween(routeOverlay.getAt(n - 1), routeOverlay.getAt(n));
  }
  d += google.maps.geometry.spherical.computeDistanceBetween(routeOverlay.getAt(line - 1), routeOverlay.getAt(line)) * to;
  return d;
};

SnapToRoute.prototype.getClosestPointOnLines_ = function(pXy, aXys) {
  var minDist;
  var to;
  var from;
  var x;
  var y;
  var i;
  var dist;

  if (aXys.length > 1) {
    for (var n = 1; n < aXys.length; n++) {
      if (aXys[n].x !== aXys[n - 1].x) {
        var a = (aXys[n].y - aXys[n - 1].y) / (aXys[n].x - aXys[n - 1].x);
        var b = aXys[n].y - a * aXys[n].x;
        dist = Math.abs(a * pXy.x + b - pXy.y) / Math.sqrt(a * a + 1);
      } khác {
        dist = Math.abs(pXy.x - aXys[n].x);
      }

      var rl2 = Math.pow(aXys[n].y - aXys[n - 1].y, 2) + Math.pow(aXys[n].x - aXys[n - 1].x, 2);
      var ln2 = Math.pow(aXys[n].y - pXy.y, 2) + Math.pow(aXys[n].x - pXy.x, 2);
      var lnm12 = Math.pow(aXys[n - 1].y - pXy.y, 2) + Math.pow(aXys[n - 1].x - pXy.x, 2);
      var dist2 = Math.pow(dist, 2);
      var calcrl2 = ln2 - dist2 + lnm12 - dist2;
      if (calcrl2 > rl2) {
        dist = Math.sqrt(Math.min(ln2, lnm12));
      }

      if ((minDist == null) || (minDist > dist)) {
        to = Math.sqrt(lnm12 - dist2) / Math.sqrt(rl2);
        from = Math.sqrt(ln2 - dist2) / Math.sqrt(rl2);
        minDist = dist;
        i = n;
      }
    }
    if (to > 1) {
      to = 1;
    }
    if (from > 1) {
      to = 0;
      from = 1;
    }
    x = aXys[i].x; // aXys[i - 1].x - (dx * to);
    y = aXys[i].y; // aXys[i - 1].y - (dy * to);
  }
  trở lại {
    'x': x,
    'y': y,
    'i': i,
    'to': to,
    'from': from
  };
};
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

关于javascript - Google Maps API - 在定义的点沿折线保留可拖动标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46285775/

25 4 0
Đề xuất bài viết: php - mysql插入数据时数组使用和bindParam使用有什么区别？
Đề xuất bài viết: android - ExoPlayer Hls 质量
Đề xuất bài viết: php - 为什么在 SELECT 语句中使用 RAND() 时 MySQL 返回相同的结果？
Đề xuất bài viết: android - 如何在 "X"和 "Y"方向移动对象
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress