-1
多角形の面積と周長、またはポリラインの長さを計算するための測定ツールを実装しようとしています。ポリゴンで動作する既存のコードを修正しましたが（コード内でコメントアウトされています）、ポリゴンとポリラインの両方で動作するようにはなりません。Googleマップを取得するv3エリア、周長、および長さ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_div {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.17&sensor=false&libraries=drawing"></script>
<script>
function initialize() {
map = new google.maps.Map(document.getElementById('map_div'), {
center: {lat: 49.820, lng: 6.100},
zoom: 8
});
// create a dialog box but dont bind it to anything yet
// myInfoWindow = new google.maps.InfoWindow();
// show drawing tools
DrawingTools();
}
function DrawingTools() {
myDrawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE
]
},
polygonOptions: {
draggable: true,
editable: true,
fillColor: '#fb0a2a',
fillOpacity: 0.2,
strokeColor: '#fb0a2a',
zIndex: 2000
},
polylineOptions: {
draggable: true,
editable: true,
strokeColor: '#fb0a2a',
zIndex:2000
}
});
myDrawingManager.setMap(map);
// when polygon drawing is complete, an event is raised by the map
// this function will listen to the event and work appropriately
DrawingCompletionListener();
};
/* Code that already works for polygones
function DrawingCompletionListener() {
// capture the field, set selector back to hand, remove drawing
google.maps.event.addListener(
myDrawingManager,
'polygoncomplete',
function(polygon) {
myField = polygon;
ShowDrawingTools(false);
ObjectEditable(false);
FieldClickListener();
}
);
}
*/
// Code I tried to get work for both polygones AND polylines
function DrawingCompletionListener() {
// capture the field, set selector back to hand, remove drawing
google.maps.event.addListener(
myDrawingManager,
'overlaycomplete',
function(event) {
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
function pg (polygon) {
myField = polygon;
ShowDrawingTools(false);
ObjectEditable(false);
FieldClickListener();
}}
else if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
function pl (polyline) {
myField = polyline;
ShowDrawingTools(false);
ObjectEditable(false);
AddPropertyToField();
FieldClickListener();
}}
}
);
}
/**
* Show or hide drawing tools
*/
function ShowDrawingTools(val) {
myDrawingManager.setOptions({
drawingMode: null,
drawingControl: val
});
}
/**
* Allow or disallow polygon/polyline to be editable and draggable
*/
function ObjectEditable(val) {
myField.setOptions({
editable: val,
draggable: val
});
myInfoWindow.close();
return false;
}
/**
* Attach an event listener to the polygon/polyline. When a user clicks on the
* object, get a formatted message that contains links to re-edit the
* object, mark it as complete, or delete it. The message
* appears as a dialog box
*/
function FieldClickListener() {
google.maps.event.addListener(
myField,
'click',
function(event) {
var message = GetMessage(myField);
myInfoWindow.setOptions({ content: message });
myInfoWindow.setPosition(event.latLng);
myInfoWindow.open(map);
}
);
}
/**
* Delete the polygon and show the drawing tools so that new polygon can be
* created
*/
function DeleteField() {
myInfoWindow.close();
myField.setMap(null);
ShowDrawingTools(true);
}
/**
* Get coordinates of the polygon/polyline and display information that should
* appear in the polygons dialog box when it is clicked
*/
function GetMessage(polygon) {
var coordinates = polygon.getPath().getArray();
var message = '';
message += '<div>'
+ 'area : ~' + GetArea(polygon) + ' ar<br />'
+ 'perimeter : ~' + GetPerimeter(polygon) + ' m'
+ 'length : ~' + GetLength(polyline) + ' m'
+ '</div>';
message += '<hr><div class="btn-group"><button type="button" class="btn btn-primary btn-xs" onclick="PolygonEditable(true);">Edit</button>'
+ '<button type="button" class="btn btn-primary btn-xs" onclick="ObjectEditable(false);">OK</button>'
+ '<button type="button" class="btn btn-primary btn-xs" onclick="DeleteField(myField);">Löschen</button></div>';
return message;
}
/**
* Get area/perimeter of the drawn polygon
*/
function GetArea(poly) {
var result = parseFloat(google.maps.geometry.spherical.computeArea(poly.getPath()))/100;
return result.toFixed(2);
}
function GetPerimeter(poly) {
var perimeter = parseFloat(google.maps.geometry.spherical.computeLength(poly.getPath()));
return perimeter.toFixed(0);
}
function GetLenght(poly) {
var length = parseFloat(google.maps.geometry.spherical.computeLength(poly.getPath()));
return length.toFixed(0);
}
</script>
</head>
<body onload="initialize()">
<div id="map_div">
</div>
</body>
</html>
あなたの問題を示す[mcve]を入力してください。 – geocodezip
欠落しているマップオブジェクトとその初期化が追加されました。そのため、コードは機能するはずです。 – geom
どうすればいいですか？それとも仕事ですか？ [mcve]のポイントは、問題が発生していることを確認したことです。投稿コードで 'Uncaught SyntaxError：Unexpected identifier'を取得します。 – geocodezip