Question

我正在为我的大学开展一个项目，我必须绘制折线以重建我所在城市的公共交通路线。（这对我来说很容易）。

现在我必须画一个圆圈，当圆圈在它们上面时（当它们相交时）使折线变色（或出现/消失）。我在互联网上找到了一个很好的例子，但出于某种原因，如果我将它复制/粘贴到Sublime Text 2，它将无法正常工作......

    (function(){
  var polyline = new google.maps.Polyline();

  google.maps.Polyline.prototype.closestDistanceToSegment = function(center, segment)
  {
    var firstPoint, lastPoint, A, B, C, D, E, distanceAB, t, map = this.getMap();

    // The other extreme of the path
    lastPoint  = segment[0];

    // One extreme of the path
    firstPoint = segment[1];

    //  C
    //  |\ 
    //  | \
    //  |  \
    //  |_ _\
    //  A    B
    //
    // Transform to points
    A = map.getProjection().fromLatLngToPoint(lastPoint);  
    B = map.getProjection().fromLatLngToPoint(firstPoint);
    C = map.getProjection().fromLatLngToPoint(center);

    // Calculte distance between A and B
    distanceAB = Math.sqrt( Math.pow(A.x-B.x, 2)+Math.pow(A.y -B.y, 2) );

    // Compute the direction vector D from A to B
    D = { x: (B.x-A.x)/distanceAB, y: (B.y-A.y)/distanceAB };

    t = D.x*(C.x-A.x) + D.y*(C.y-A.y);

    // LatLng of the point 
    E = map.getProjection().fromPointToLatLng({ x: t*D.x+A.x, y: t*D.y+A.y });

    polyline.setPath(segment);

    // En la docuemntacion poly.containsLocation sirve para Polygonos.
    // poly.isLocationOnEdge no es muy preciso
    if(google.maps.geometry.poly.containsLocation(E, polyline))
    {
      return google.maps.geometry.spherical.computeDistanceBetween(E, center);
    }

    return Number.POSITIVE_INFINITY;   
  }

  google.maps.Polyline.prototype.intersectsCircle = function(circle)
  {
    var poly = this,
        path = poly.getPath(), 
        totalPoints = path.getLength(), 
        center = circle.getCenter(), 
        radius = circle.getRadius(),
        intersect = false;

    path.forEach(function(point, index) {
      if(intersect === true) return;

      if(google.maps.geometry.spherical.computeDistanceBetween(center, point) <= radius || 
        (index < totalPoints - 1 && poly.closestDistanceToSegment(center, [point, path.getAt(index+1)]) <= radius))
      {
        intersect = true;
      }
    });

    return intersect;
  }

})()

var center = null
, path = new google.maps.MVCArray()
, polyline = null
, circle = null;

function initGoogleMaps() {
  var myOptions = {
      zoom: 12,
      center: center = new google.maps.LatLng(-12.04762,-77.061626), 
      mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID,
            google.maps.MapTypeId.SATELLITE]
      },
      disableDoubleClickZoom: true, 
      draggableCursor: "crosshair"
    }

  map = new google.maps.Map(document.getElementById("mapa"), myOptions);
  polyline = new google.maps.Polyline({ map: map, editable: true });
  circle = new google.maps.Circle({ map: map, editable: true, radius: 600, draggable: true });

  google.maps.event.addListener(map, 'click', function(e){
    path.push(e.latLng);
    if(path.getLength() == 1)
    {
      polyline.setPath(path);
    }
    circle.setCenter(e.latLng);

    google.maps.event.trigger(circle, 'dragend');
  });
  google.maps.event.addListener(circle, 'radius_changed', function(){
    google.maps.event.trigger(this, 'dragend');
  });
  google.maps.event.addListener(circle, 'dragend', function(){
    if(polyline.intersectsCircle(this)){
      color = '#FF0';
    }else{
      color = '#000';
    }
    polyline.setOptions({ strokeColor: color });
  });
}

initGoogleMaps();

我必须说我是Javascript中的新手，所以任何帮助都将不胜感激。非常感谢你！

Answer 1

<script src="https://maps.googleapis.com/maps/api/js?signed_in=true"></script>

在脚本/功能之前添加上面的行。它会起作用。

Google Maps Api Circle和折线交叉点

1 个答案: