通过拖动路线的中间位置在此处地图上绕行路线

时间：2018-10-15 13:15:07

标签： javascript here-api

是否可以使用javascript API在此处地图上绕行？我浏览了所有文档，但找不到允许重新布置路线并将其捕捉到街道的方法，就像在Google地图中一样。

我找到了similar，但似乎仅限于预定义的航路点。而且我不知道地图如何知道是否以某种方式添加了一种在单击时添加对象到地图的方法

1 个答案:

答案 0 :(得分：0)

要更改路线/绕行路线，您需要重新计算路线，其中包括您的地点（地理坐标）作为航路点之一。您可以设置参数viewbounds和presentation = dragNdrop，以仅针对您的视域而不是整个路径（重新路由的优化方式）获取重新路由。有关详细的源代码示例，请参阅developer.here.com/api-explorer/rest/routing/route-within-viewport和tcs.ext.here.com/examples/v3/fleet。下面是一个非常简单的重新路由逻辑，我们在路由上添加了可拖动标记，以便在拖动时可以通过其当前位置重新路由。相应地将YOUR-APP-ID和YOUR-APP-CODE替换为您的ID。希望您觉得这个有帮助。祝您编码愉快！

可以修改示例鼠标事件侦听器以显示您喜欢的形状的标记，而不是下面示例中显示的标准形状：

function setUpClickListener(map) {
  // Attach an event listener to map display
  // obtain the coordinates and display in an alert box.
  map.addEventListener('tap', function (evt) {
    var coord = map.screenToGeo(evt.currentPointer.viewportX,
            evt.currentPointer.viewportY);
    alert('Clicked at ' + Math.abs(coord.lat.toFixed(4)) +
        ((coord.lat > 0) ? 'N' : 'S') +
        ' ' + Math.abs(coord.lng.toFixed(4)) +
         ((coord.lng > 0) ? 'E' : 'W'));
  });
}

带有标准可拖动标记的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>
<body>

  <div id="map" style="position:absolute; width:100%; height:100%; background:grey" ></div>
  <!--<div id="panel" style="position:absolute; width:49%; left:51%; height:100%; background:inherit" ></div>-->

  <script  type="text/javascript" charset="UTF-8" >


/**
 * Calculates and displays a car route from the Brandenburg Gate in the centre of Berlin
 * to Friedrichstraße Railway Station.
 *
 * A full list of available request parameters can be found in the Routing API documentation.
 * see:  http://developer.here.com/rest-apis/documentation/routing/topics/resource-calculate-route.html
 *
 * @param   {H.service.Platform} platform    A stub class to access HERE services
 */
function calculateRouteFromAtoB (platform) {
  var router = platform.getRoutingService(),
    routeRequestParams = {
      mode: 'fastest;car',
      representation: 'display',
      routeattributes : 'shape,legs',
      maneuverattributes: 'direction,action',
      waypoint0: '52.5160,13.3779', // Brandenburg Gate
      waypoint1: '52.5206,13.3862'  // Friedrichstraße Railway Station
    };


  router.calculateRoute(
    routeRequestParams,
    onSuccess,
    onError
  );
}

var polyline, marker; 
/**
 * This function will be called once the Routing REST API provides a response
 * @param  {Object} result          A JSONP object representing the calculated route
 *
 * see: http://developer.here.com/rest-apis/documentation/routing/topics/resource-type-calculate-route.html
 */
function onSuccess(result) {
  var route = result.response.route[0];
 /*
  * The styling of the route response on the map is entirely under the developer's control.
  * A representitive styling can be found the full JS + HTML code of this example
  * in the functions below:
  */
  addRouteShapeToMap(route);
  if(!marker) addDraggableMarker(route);
}

/**
 * This function will be called if a communication error occurs during the JSON-P request
 * @param  {Object} error  The error message received.
 */
function onError(error) {
  alert('Ooops!');
}




/**
 * Boilerplate map initialization code starts below:
 */

// set up containers for the map  + panel
var mapContainer = document.getElementById('map'),
  routeInstructionsContainer = document.getElementById('panel');

//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'YOUR-APP-ID',
  app_code: 'YOUR-APP-CODE',
  useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
  tileSize: pixelRatio === 1 ? 256 : 512,
  ppi: pixelRatio === 1 ? undefined : 320
});

//Step 2: initialize a map - this map is centered over Berlin
var map = new H.Map(mapContainer,
  defaultLayers.normal.map,{
  center: {lat:52.5160, lng:13.3779},
  zoom: 13,
  pixelRatio: pixelRatio
});

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

/**
 * Creates a H.map.Polyline from the shape of the route and adds it to the map.
 * @param {Object} route A route as received from the H.service.RoutingService
 */
function addRouteShapeToMap(route){
  var lineString = new H.geo.LineString(),
    routeShape = route.shape;

  routeShape.forEach(function(point) {
    var parts = point.split(',');
    lineString.pushLatLngAlt(parts[0], parts[1]);
  });
  if(polyline) map.removeObject(polyline);
  polyline = new H.map.Polyline(lineString, {
    style: {
      lineWidth: 4,
      strokeColor: 'rgba(0, 128, 255, 0.7)'
    }
  });
  // Add the polyline to the map
  map.addObject(polyline);
  // And zoom to its bounding rectangle
  map.setViewBounds(polyline.getBounds(), true);
}

function addDraggableMarker(route){
  // setting the draggable marker to a center point when first loaded
  var point = route.shape[Math.floor(route.shape.length/2)].split(',');
  marker = new H.map.Marker(new H.geo.Point(point[0],point[1]));
  // Ensure that the marker can receive drag events
  marker.draggable = true;
  map.addObject(marker);

  // disable the default draggability of the underlying map
  // when starting to drag a marker object:
  map.addEventListener('dragstart', function(ev) {
    var target = ev.target;
    if (target instanceof H.map.Marker) {
      behavior.disable();
    }
  }, false);


  // re-enable the default draggability of the underlying map
  // when dragging has completed
  map.addEventListener('dragend', function(ev) {
    //alert(map.getViewBounds());
    var target = ev.target,
      pointer = ev.currentPointer,
      point = map.screenToGeo(pointer.viewportX, pointer.viewportY);
    if (target instanceof mapsjs.map.Marker) {
      behavior.enable();
    }
    var router = platform.getRoutingService(),
      routeRequestParams = {
        mode: 'fastest;car',
        representation: 'display',
        routeattributes : 'shape,legs',
        maneuverattributes: 'direction,action',
        waypoint0: '52.5160,13.3779', // Brandenburg Gate
        waypoint1: 'street!passThrough!!'+point.lat+','+point.lng,
        waypoint2: '52.5206,13.3862'  // Friedrichstraße Railway Station
      };


    router.calculateRoute(
      routeRequestParams,
      onSuccess,
      onError
    );

  }, false);
  // Listen to the drag event and move the position of the marker
  // as necessary
   map.addEventListener('drag', function(ev) {
    var target = ev.target,
        pointer = ev.currentPointer;
    if (target instanceof mapsjs.map.Marker) {
      target.setPosition(map.screenToGeo(pointer.viewportX, pointer.viewportY));
    }
  }, false);
}

// Now use the map as required...
calculateRouteFromAtoB (platform);
  </script>
</body>
</html>
相关问题
最新问题