根据路径方向更改 Google 地图标记方向 [英] Change Google map marker orientation according path direction

问题描述

我想知道是否可以根据地图上绘制的路径更改标记方向.举个例子:

I'd like to know if it possible to change the marker orientation according the path drawn on the map. Here is a example:

如您所见，标记是一辆汽车(带有前保险杠和尾灯).我想将汽车定向到路径前进的方向(在此示例中，将汽车定向到右侧 45 度左右).

As you can see the marker is a car (with front bumper and tail lights). I'd like to orientate the car in the direction the path is going (in this exemple orientate the car around 45 degrees to the right).

我正在使用 DirectionsService 来绘制路径，并且我有一个随机数量的点.有时只有1分，有时10分.我在绘制路径之前添加标记.这是我绘制路径的方式:

I'm using DirectionsService to draw the path and I have a random number of point. Sometime only one, sometime 10 points. I'm adding the markers before drawing the paths. Here is how I'm drawing the path:

// Intialize the Path Array
var path = new google.maps.MVCArray();

// Intialise the Direction Service
var service = new google.maps.DirectionsService();

// Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: gmap, strokeColor: '#dd0000' }); // #4986E7

// Draw the path for this vehicle
for (var i = 0; i < pathPoints.length; i++) {
    if ((i + 1) < pathPoints.length) {
        var src = pathPoints[i];
        var des = pathPoints[i + 1];
        path.push(src);
        poly.setPath(path);
        service.route({
            origin: src,
            destination: des,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++){
                    path.push(result.routes[0].overview_path[i]);
                }
            }
        });
    }
}

能做到吗?

推荐答案

一种选择是将您的图标转换为 SVG，然后使用 Symbol rotation 属性将其与道路对齐(您可以执行与 PNG 图像相同，可以制作大量旋转一两度的图标副本，或者制作允许您任意旋转 PNG 图标的自定义图标)

One option is to translate your icon to SVG then use the Symbol rotation property to align it with the road (you can do the same with a PNG image by either making a large number of copies of the icon rotated by a degree or two, or by making a custom icon that allows you to rotate the PNG icon arbitrarily)

marker.setPosition(p);
var heading = google.maps.geometry.spherical.computeHeading(lastPosn,p);
icon.rotation = heading;
marker.setIcon(icon);

代码片段:

<div id="map_canvas" style="width:100%;height:90%;"></div>

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="tools">start: <input type="text" name="start" id="start" value="union square, NY" />end: <input type="text" name="end" id="end" value="times square, NY" /> <input type="submit" onclick="calcRoute();" /> </div> <div id="map_canvas" style="width:100%;height:90%;"></div>

这篇关于根据路径方向更改 Google 地图标记方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！