私は Google Maps Javascript API を 4 日間使用した経験がありますが、ドキュメントと情報共有がせいぜいわかりにくいと感じています。
この例のように、(Javascript API V3 を使用して) Google マップにポリゴン/ポリラインを描画する方法について、経験や知識を持っている人はいますか? (これは、2008 年のこのブログ投稿で見つけました)
私の調査によると、この例では Javascript API V2 を直接使用するか、V2 の GeometryControl ユーティリティ ライブラリ (参照用にここで見つけることができます) を使用しています。Javascript API V3 にそのようなインターフェースを許可する方法があるかどうかはわかりません。
私は研究を続けますが、役に立つコメント、リンク、または提案をいただければ幸いです。さらなる研究のために正しい方向に私を向けたとしても。:)
多くの調査の後、私はこの例に出くわしました。それを発見してグーグルで調べた後、これは私のような質問に対する一般的な答えのようです. これは非常に基本的ですが、V3 API によれば正しいものです。
この例のコードを使用して、必要なプロトタイプを正常に構築しています。コードは基本的なものですが、仕様に合わせて拡張できることがわかりました。これは良いことです。
私のコメントで提供されているプレクサーの回答へのリンクが最良の解決策ですが、それを開発している人は、まだ開発中であり、リリースアプリケーションで使用するには安定していないと述べています。
Google マップ v3.7 では、 Drawing Libraryを使用できます。
別の優れたライブラリ: ryshkin@gmail.comによるpolygonEdit/polylineEdit
曲線のスクリプトを見てみましょう: http://curved_lines.overfx.net/
私が使用する関数は次のとおりです。
function curved_line_generate(LatStart, LngStart, LatEnd, LngEnd, Color, Horizontal, Multiplier) {
var LastLat = LatStart;
var LastLng = LngStart;
var PartLat;
var PartLng;
var Points = new Array(0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9);
var PointsOffset = new Array(0.2, 0.35, 0.5, 0.55, 0.60, 0.55, 0.5, 0.35, 0.2);
var OffsetMultiplier = 0;
if (Horizontal == 1) {
var OffsetLenght = (LngEnd - LngStart) * 0.1;
} else {
var OffsetLenght = (LatEnd - LatStart) * 0.1;
}
for (var i = 0; i < Points.length; i++) {
if (i == 4) {
OffsetMultiplier = 1.5 * Multiplier;
}
if (i >= 5) {
OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
} else {
OffsetMultiplier = (OffsetLenght * PointsOffset[i]) * Multiplier;
}
if (Horizontal == 1) {
PartLat = (LatStart + ((LatEnd - LatStart) * Points[i])) + OffsetMultiplier;
PartLng = (LngStart + ((LngEnd - LngStart) * Points[i]));
} else {
PartLat = (LatStart + ((LatEnd - LatStart) * Points[i]));
PartLng = (LngStart + ((LngEnd - LngStart) * Points[i])) + OffsetMultiplier;
}
curved_line_create_segment(LastLat, LastLng, PartLat, PartLng, Color);
LastLat = PartLat;
LastLng = PartLng;
}
curved_line_create_segment(LastLat, LastLng, LatEnd, LngEnd, Color);
}
function curved_line_create_segment(LatStart, LngStart, LatEnd, LngEnd, Color) {
var LineCordinates = new Array();
LineCordinates[0] = new google.maps.LatLng(LatStart, LngStart);
LineCordinates[1] = new google.maps.LatLng(LatEnd, LngEnd);
var Line = new google.maps.Polyline({
path: LineCordinates,
geodesic: false,
strokeColor: Color,
strokeOpacity: 1,
strokeWeight: 3
});
Line.setMap(map);
}
HTMLコンテンツと初期化スクリプトは次のとおりです。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var map;
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
/* Create Google Map */
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(41, 19.6),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
/* Add Sample Lines */
/* Sofia - Burgas */
curved_line_generate(42.68243562027229, 23.280029421875042, 42.488302202180364, 27.432861453125042,"#F00", true, 1);
/* Sofia - Varna */
curved_line_generate(42.68243562027229, 23.280029421875042, 43.19716750254011, 27.894287234375042,"#1a8809", true, 1);
/* Ancona - Sofia */
curved_line_generate(43.61221698671215, 13.458252078125042,42.68243562027229, 23.280029421875042, "#00F", true, 1);
/* Sofia - Florence */
curved_line_generate(42.68243562027229, 23.280029421875042, 43.73935229722859, 11.217041140625042,"#666", true, 1);
/* Sofia - Athens */
curved_line_generate(42.68243562027229, 23.280029421875042, 37.97884527841534, 23.719482546875042,"#ffa200", false, 2);
}
</script>
Maps API v3 の例のページから、この例を見てみましょう。
http://code.google.com/apis/maps/documentation/javascript/examples/polyline-complex.html
コードは地図上のクリックをリッスンし、クリックするたびに緯度/経度のペアをポリラインの配列に追加します。これにより、クリックした各ポイントを結合するポリラインが作成されます。
これをポリゴンに拡張するのは比較的簡単です。ある時点で、ポリゴンを閉じる必要があります。これを行うには、ポリゴンまたはマーカー (交差を示す) のクリックをリッスンするか、ユーザーがクリックできるボタンを用意して、ポリゴンを自動閉じるように設定します。
これは非常に簡単だと思いました..ポリゴンを描くことができ、その長さを見つけることができ、非常に簡単です.. http://geojason.info/demos/line-length-polygon-area-google-maps-v3/
リンクがダウンした場合のコードを次に示します。
var map;
// Create a meausure object to store our markers, MVCArrays, lines and polygons
var measure = {
mvcLine: new google.maps.MVCArray(),
mvcPolygon: new google.maps.MVCArray(),
mvcMarkers: new google.maps.MVCArray(),
line: null,
polygon: null
};
// When the document is ready, create the map and handle clicks on it
jQuery(document).ready(function() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: new google.maps.LatLng(39.57592, -105.01476),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggableCursor: "crosshair" // Make the map cursor a crosshair so the user thinks they should click something
});
google.maps.event.addListener(map, "click", function(evt) {
// When the map is clicked, pass the LatLng obect to the measureAdd function
measureAdd(evt.latLng);
});
});
function measureAdd(latLng) {
// Add a draggable marker to the map where the user clicked
var marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true,
raiseOnDrag: false,
title: "Drag me to change shape",
icon: new google.maps.MarkerImage(
"/images/demos/markers/measure-vertex.png",
new google.maps.Size(9, 9),
new google.maps.Point(0, 0),
new google.maps.Point(5, 5)
)
});
// Add this LatLng to our line and polygon MVCArrays
// Objects added to these MVCArrays automatically update the line and polygon shapes on the map
measure.mvcLine.push(latLng);
measure.mvcPolygon.push(latLng);
// Push this marker to an MVCArray
// This way later we can loop through the array and remove them when measuring is done
measure.mvcMarkers.push(marker);
// Get the index position of the LatLng we just pushed into the MVCArray
// We'll need this later to update the MVCArray if the user moves the measure vertexes
var latLngIndex = measure.mvcLine.getLength() - 1;
// When the user mouses over the measure vertex markers, change shape and color to make it obvious they can be moved
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(
new google.maps.MarkerImage("/images/demos/markers/measure-vertex-hover.png",
new google.maps.Size(15, 15),
new google.maps.Point(0, 0),
new google.maps.Point(8, 8)
)
);
});
// Change back to the default marker when the user mouses out
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(
new google.maps.MarkerImage(
"/images/demos/markers/measure-vertex.png",
new google.maps.Size(9, 9),
new google.maps.Point(0, 0),
new google.maps.Point(5, 5)
)
);
});
// When the measure vertex markers are dragged, update the geometry of the line and polygon by resetting the
// LatLng at this position
google.maps.event.addListener(marker, "drag", function(evt) {
measure.mvcLine.setAt(latLngIndex, evt.latLng);
measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
});
// When dragging has ended and there is more than one vertex, measure length, area.
google.maps.event.addListener(marker, "dragend", function() {
if (measure.mvcLine.getLength() > 1) {
measureCalc();
}
});
// If there is more than one vertex on the line
if (measure.mvcLine.getLength() > 1) {
// If the line hasn't been created yet
if (!measure.line) {
// Create the line (google.maps.Polyline)
measure.line = new google.maps.Polyline({
map: map,
clickable: false,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3,
path:measure. mvcLine
});
}
// If there is more than two vertexes for a polygon
if (measure.mvcPolygon.getLength() > 2) {
// If the polygon hasn't been created yet
if (!measure.polygon) {
// Create the polygon (google.maps.Polygon)
measure.polygon = new google.maps.Polygon({
clickable: false,
map: map,
fillOpacity: 0.25,
strokeOpacity: 0,
paths: measure.mvcPolygon
});
}
}
}
// If there's more than one vertex, measure length, area.
if (measure.mvcLine.getLength() > 1) {
measureCalc();
}
}
これは、私が見つけたポリゴン エディターに最も近い実装のようです: http://snipplr.com/view/38270/google-maps-api-v3--enableediting-polylines/