0
私はGoogleマップで経路の途中に矢印記号を持つ湾曲した経路を作成しようとしているJavascriptの追加アイコン
私が作成しようとしていますkiwi.comに表示されているポリラインに似たGoogleマップの2つの座標の間のカーブしたパスです（利用可能なフライトにカードを置いたとき）。残念ながら、ポリラインはこの機能をサポートしていませんが、2つのポリラインが互いに近くにあるときに2つのポリラインが重なり合うようにします。私は2つのポリラインを測地線オプションを使って作成しようと試みましたが、もう一方はそうではありませんでしたが、ラインはまだ2つの近くの点で重なり合っているようです。このリンクでgeocodezipから解決策を見つけましたcurve svg path svgパスを使用してポリラインを使用する代わりに曲線を描きますが、作成されたパスの途中に矢印を追加できませんでした。この方法を使って、kiwi.comに似た真ん中の矢印のある線を実現する方法はありますか？ 、あなたがの位置や進行方向を計算する必要があり、気の利いたsymbols on a polylineを使用することはできません「SVG」マーカーで
var map;
var curvature = 0.175;
var invercurve = -0.175;
$(window).load(function() {
init();
});
function init() {
var Map = google.maps.Map,
LatLng = google.maps.LatLng,
LatLngBounds = google.maps.LatLngBounds,
Marker = google.maps.Marker,
Point = google.maps.Point;
var pos1 = new LatLng(35.6730185, 139.4302008);
var pos2 = new LatLng(34.678395, 135.4601306);
var bounds = new LatLngBounds();
bounds.extend(pos1);
bounds.extend(pos2);
map = new Map(document.getElementById('map-canvas'), {
center: bounds.getCenter(),
zoom: 6
});
map.fitBounds(bounds);
var markerP1 = new Marker({
position: pos1,
map: map
});
var markerP2 = new Marker({
position: pos2,
map: map
});
var curveMarker, curveMarkerInv;
function updateCurveMarker() {
var pos1 = markerP1.getPosition(), // latlng
pos2 = markerP2.getPosition(),
projection = map.getProjection(),
p1 = projection.fromLatLngToPoint(pos1), // xy
p2 = projection.fromLatLngToPoint(pos2);
var e = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
m = new Point(e.x/2, e.y/2), // midpoint
o = new Point(e.y, -e.x), // orthogonal
c = new Point(// curve control point
m.x + curvature * o.x,
m.y + curvature * o.y);
var f = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
n = new Point(f.x/2, f.y/2), // midpoint
p = new Point(f.y, -f.x), // orthogonal
d = new Point(// curve control point
n.x + invercurve * p.x,
n.y + invercurve * p.y);
console.log('F:' + p1.x * curvature/2 + ' ' + p1.y * curvature/2);
var pathDef = 'M 0,0 ' +
'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;
var pathDefInv = 'M 0,0 ' +
'q ' + d.x + ',' + d.y + ' ' + f.x + ',' + f.y;
var zoom = map.getZoom(),
scale = 1/(Math.pow(2, -zoom));
var marker = new google.maps.Marker({
position: new google.maps.LatLng,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 10
},
//draggable: true,
map: map
});
var symbol = {
path: pathDef,
scale: scale,
strokeWeight: 2,
strokeColor: '#f00',
fillColor: 'none'
};
var symbolInv = {
path: pathDefInv,
scale: scale,
strokeWeight: 2,
strokeColor: '#f00',
fillColor: 'none'
};
if (!curveMarker) {
curveMarker = new Marker({
position: pos1,
clickable: false,
icon: symbol,
zIndex: 0, // behind the other markers
map: map
});
curveMarkerInv = new Marker({
position: pos1,
clickable: false,
icon: symbolInv,
zIndex: 0, // behind the other markers
map: map
});
} else {
curveMarker.setOptions({
position: pos1,
icon: symbol,
});
curveMarkerInv.setOptions({
position: pos1,
icon: symbolInv,
});
}
}
google.maps.event.addListener(map, 'projection_changed', updateCurveMarker);
google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker);
google.maps.event.addListener(markerP1, 'position_changed', updateCurveMarker);
google.maps.event.addListener(markerP2, 'position_changed', updateCurveMarker);
var lineLength = google.maps.geometry.spherical.computeDistanceBetween(markerP1.getPosition(), markerP2.getPosition());
var lineHeading = google.maps.geometry.spherical.computeHeading(markerP1.getPosition(), markerP2.getPosition());
}#map-canvas {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<div id="map-canvas"></div>
あなたが行の途中に入れたい "矢印" とは何ですか？ – geocodezip