Я новичок в JavaScript, поэтому буду очень признателен за вашу помощь.
Я работаю с этим примером карты Google - http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html
Это отлично работает, но я хотел бы отображать широту для любых созданных фигур (в настоящее время он отображает только широту для маркера).
Вместо отображения информации о линии и форме км я хотел бы отображать широты в текстовом поле, как только будет создан многоугольник / фигура / линия.
Я попытался отредактировать JavaScript, а также проверил документацию Google, но на странице возникли ошибки.
Спасибо!!!
ИЗМЕНИТЬ
КОД ПОСЛЕ ВНЕДРЕНИЯ НИЖЕ ИЗМЕНЕНИЙ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0069)http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html -->
<!--
Copyright 2008 Google Inc.
Licensed under the Apache License, Version 2.0:
http://www.apache.org/licenses/LICENSE-2.0
--><HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Google Maps JavaScript API Example: Editable Polylines</TITLE>
<META content="text/html; charset=utf-8" http-equiv=content-type>
<SCRIPT type=text/javascript
src="Google%20Maps%20JavaScript%20API%20Example%20Editable%20Polylines_files/maps"></SCRIPT>
<STYLE type=text/css>BODY {
FONT-FAMILY: Arial, sans serif; FONT-SIZE: 11px
}
#hand_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Bsu.png); WIDTH: 31px; HEIGHT: 31px
}
.selected#hand_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Bsd.png)
}
#placemark_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Bmu.png); WIDTH: 31px; HEIGHT: 31px
}
.selected#placemark_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Bmd.png)
}
#line_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Blu.png); WIDTH: 31px; HEIGHT: 31px
}
.selected#line_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Bld.png)
}
#shape_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Bpu.png); WIDTH: 31px; HEIGHT: 31px
}
.selected#shape_b {
BACKGROUND-IMAGE: url(http://google.com/mapfiles/ms/t/Bpd.png)
}
</STYLE>
<SCRIPT type=text/javascript>
var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green","#008000"],
["blue", "#000080"], ["purple", "#800080"]];
var options = {};
var lineCounter_ = 0;
var shapeCounter_ = 0;
var markerCounter_ = 0;
var colorIndex_ = 0;
var featureTable_;
var map;
function select(buttonId) {
document.getElementById("hand_b").className="unselected";
document.getElementById("shape_b").className="unselected";
document.getElementById("line_b").className="unselected";
document.getElementById("placemark_b").className="unselected";
document.getElementById(buttonId).className="selected";
}
function stopEditing() {
select("hand_b");
}
function getColor(named) {
return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}
function getIcon(color) {
var icon = new GIcon();
icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(15, 32);
return icon;
}
function startShape() {
select("shape_b");
var color = getColor(false);
var polygon = new GPolygon([], color, 2, 0.7, color, 0.2);
startDrawing(polygon, "Shape " + (++shapeCounter_), function() {
var cell = this;
var area = polygon.getArea();
cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
}, color);
// $("#controls_left").text("");
// for(var m=0; m<polygon.length; m++) {
// $("#controls_left").append("<textarea class='latlong'>" + polygon[m].getPoint().lat().toFixed(6) + "</textarea>");
// $("#controls_left").append("<textarea class='latlong'>" + polygon[m].getPoint().lng().toFixed(6) + "</textarea>");
}
function startLine() {
select("line_b");
var color = getColor(false);
var line = new GPolyline([], color);
startDrawing(line, "Line " + (++lineCounter_), function() {
var cell = this;
var len = line.getLength();
cell.innerHTML = (Math.round(len / 10) / 100) + "km";
}, color);
}
function addFeatureEntry(name, color) {
currentRow_ = document.createElement("tr");
var colorCell = document.createElement("td");
currentRow_.appendChild(colorCell);
colorCell.style.backgroundColor = color;
colorCell.style.width = "1em";
var nameCell = document.createElement("td");
currentRow_.appendChild(nameCell);
nameCell.innerHTML = name;
var descriptionCell = document.createElement("td");
currentRow_.appendChild(descriptionCell);
featureTable_.appendChild(currentRow_);
return {desc: descriptionCell, color: colorCell};
}
function startDrawing(poly, name, onUpdate, color) {
map.addOverlay(poly);
poly.enableDrawing(options);
poly.enableEditing({ onEvent: "mouseover" });
poly.disableEditing({ onEvent: "mouseout" });
function () {
select("hand_b");
var cells = addFeatureEntry(name, color);
updateDrawing(poly, cells);
GEvent.addListener(poly, "click", function (latlng, index) {
if (typeof index == "number") {
poly.deleteVertex(index);
} else {
var newColor = getColor(false);
cells.color.style.backgroundColor = newColor
poly.setStrokeStyle({ color: newColor, weight: 4 });
}
});
}
}
function placeMarker() {
select("placemark_b");
var listener = GEvent.addListener(map, "click", function(overlay, latlng) {
if (latlng) {
select("hand_b");
GEvent.removeListener(listener);
var color = getColor(true);
var marker = new GMarker(latlng, {icon: getIcon(color), draggable: true});
map.addOverlay(marker);
var cells = addFeatureEntry("Placemark " + (++markerCounter_), color);
updateMarker(marker, cells);
GEvent.addListener(marker, "dragend", function() {
updateMarker(marker, cells);
});
GEvent.addListener(marker, "click", function() {
updateMarker(marker, cells, true);
});
}
});
}
function updateMarker(marker, cells, opt_changeColor) {
if (opt_changeColor) {
var color = getColor(true);
marker.setImage(getIcon(color).image);
cells.color.style.backgroundColor = color;
}
var latlng = marker.getPoint();
cells.desc.innerHTML = "(" + Math.round(latlng.y * 100) / 100 + ", " +
Math.round(latlng.x * 100) / 100 + ")";
}
function updateDrawing(poly, cells) {
var text = "(";
for (var i = 0; i < poly.getVertexCount(); i++) {
if (i > 0)
text = text + "; ";
var latlng = poly.getVertex(i);
text = text + Math.round(latlng.y * 100) / 100 + ", " + Math.round(latlng.x * 100) / 100;
}
cells.desc.innerHTML = text + ")";
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.clearOverlays();
featureTable_ = document.getElementById("featuretbody");
select("hand_b");
}
}
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.6001.19154"></HEAD>
<BODY onunload=GUnload onload=initialize()>
<TABLE>
<TBODY>
<TR style="VERTICAL-ALIGN: top">
<TD style="WIDTH: 15em">
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id=hand_b onclick=stopEditing()>Move</DIV></TD>
<TD>
<DIV id=placemark_b onclick=placeMarker()>Marker</DIV></TD>
<TD>
<DIV id=line_b onclick=startLine()>Line</DIV></TD>
<TD>
<DIV id=shape_b
onclick=startShape()>Polygon</DIV></TD></TR></TBODY></TABLE><INPUT
id=featuredetails type=hidden rows="2"> </INPUT>
<P>To draw on the map, click on one of the buttons and then click on the
map. Double-click to stop drawing a line or shape. Click on an element to
change color. To edit a line or shape, mouse over it and drag the points.
Click on a point to delete it. </P>
<TABLE id=featuretable>
<TBODY id=featuretbody></TBODY></TABLE></TD>
<TD><!-- The frame used to measure the screen size -->
<DIV id=frame></DIV>
<DIV style="WIDTH: 600px; HEIGHT: 600px"
id=map></DIV></TD></TR></TBODY></TABLE>
<DIV id=controls_left </DIV>
</BODY></HTML>
