Javascript 谷歌地图API-在文本框中显示多个形状的经度和纬度
我对JavaScript非常陌生，因此非常感谢您的帮助 我正在使用谷歌地图的这个例子- 这是完美的，但我想做的是显示创建的任何形状的latlong（目前它只显示标记的latlong） 创建多边形/形状/直线后，我希望在文本框中显示latlongs，而不是显示直线和形状km信息 我试着编辑JavaScript，也检查了Google文档，但是页面上出现了错误 谢谢你 编辑 在进行以下更改后编写代码Javascript 谷歌地图API-在文本框中显示多个形状的经度和纬度,javascript,google-maps,google-maps-api-2,Javascript,Google Maps,Google Maps Api 2,我对JavaScript非常陌生，因此非常感谢您的帮助 我正在使用谷歌地图的这个例子- 这是完美的，但我想做的是显示创建的任何形状的latlong（目前它只显示标记的latlong） 创建多边形/形状/直线后，我希望在文本框中显示latlongs，而不是显示直线和形状km信息 我试着编辑JavaScript，也检查了Google文档，但是页面上出现了错误 谢谢你 编辑 在进行以下更改后编写代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
<!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>
Google Maps JavaScript API示例：可编辑多段线
身体{
字体系列：Arial，无衬线；字体大小：11px
}
#手帕{
背景图片：url(http://google.com/mapfiles/ms/t/Bsu.png)；宽度：31px；高度：31px
}
.所选#手#b{
背景图片：url(http://google.com/mapfiles/ms/t/Bsd.png)
}
#地标{
背景图片：url(http://google.com/mapfiles/ms/t/Bmu.png)；宽度：31px；高度：31px
}
.所选位置标记{
背景图片：url(http://google.com/mapfiles/ms/t/Bmd.png)
}
#线路{
背景图片：url(http://google.com/mapfiles/ms/t/Blu.png)；宽度：31px；高度：31px
}
.所选#行#{
背景图片：url(http://google.com/mapfiles/ms/t/Bld.png)
}
#b形{
背景图片：url(http://google.com/mapfiles/ms/t/Bpu.png)；宽度：31px；高度：31px
}
.所选形状{
背景图片：url(http://google.com/mapfiles/ms/t/Bpd.png)
}
变量颜色=[“红色”、“#ff0000”]、[“橙色”、“#ff8800”]、[“绿色”、“#008000”]，
[“蓝色”、“#000080”]、[“紫色”、“#800080”]；
var选项={}；
var lineCounter_u0；
var shapeCounter_u0；
var markerCounter_u0；
var颜色指数=0；
var特征表；
var映射；
功能选择（按钮）{
document.getElementById（“hand_b”）.className=“未选中”；
document.getElementById（“shape_b”）.className=“未选中”；
document.getElementById（“line_b”）.className=“未选中”；
document.getElementById（“placemark_b”）.className=“未选中”；
document.getElementById（buttonId）.className=“已选定”；
}
函数stopEditing（）{
选择（“手Èb”）；
}
函数getColor（已命名）{
返回颜色[（colorIndex_+）%COLORS.length][named？0:1]；
}
函数getIcon（颜色）{
var icon=new GIcon（）；
icon.image=”http://google.com/mapfiles/ms/micons/“+color+”.png”；
icon.iconSize=新的GSize（32,32）；
icon.iconAnchor=新的GPoint（15,32）；
返回图标；
}
函数startShape（）{
选择（“shape_b”）；
var color=getColor（false）；
var polygon=新的GPolygon（[]，颜色，2,0.7，颜色，0.2）；
startDrawing（多边形，“形状”+（++shapeCounter），函数（）{
var-cell=这个；
var area=polygon.getArea（）；
cell.innerHTML=（数学圆整（面积/10000）/100）+“km2”；
}，颜色）；
//$（“#控件左”）.text（“”）；
//对于（var m=0；m 0）
文本=文本+“；”；
var latlng=多边形getVertex（i）；
text=text+Math.round（latlng.y*100）/100+“，”+Math.round（latlng.x*100）/100；
}
cells.desc.innerHTML=文本+”；
}
函数初始化（）{
if（GBrowserIsCompatible（））{
map=新的GMap2（document.getElementById（“map”）；
赛特中心地图（新格拉特林（37.4419，-122.1419），13）；
addControl（新的gsmallmappcontrol（））；
addControl（新的GMapTypeControl（））；
map.clearOverlays（）；
featureTable=document.getElementById（“FeatureBody”）；
选择（“手Èb”）；
}
}
移动
标记
线
多边形
要在地图上绘制，请单击其中一个按钮，然后单击
地图。双击以停止绘制直线或形状。单击一个元素以
改变颜色。要编辑直线或形状，请将鼠标悬停在其上并拖动点。
单击某个点以将其删除
有几种方法可以做到这一点。这里重要的是获取多段线/多边形顶点的坐标。为此，请使用getVertexCount（）
和getVertex（索引：Number）
对象的GPolyline
/GPolygon
函数
现在，您可以从updateMarker（）
函数中汲取灵感，创建：
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 + ")";
}
lineupdated
事件侦听器被删除，以防止文本更改回区域/长度。您是否检查了正确的文档？这个例子是基于Google Maps API v2构建的，该版本已被正式弃用。API v3中有重大更改，这两个版本不兼容。@Tomik：是的，我也研究了v3 API，但没有任何关于在多个形状的文本框中显示横向长度的内容。有什么建议吗？非常感谢您的帮助，但在进行上述更改后，它不会在网页上显示任何内容。如果我做错了什么，请你看看我的整个HTML代码。非常感谢你的帮助！嗯，有两个问题：第一，加载谷歌地图API缺少脚本标签。第二，您删除了endline
事件侦听器，但您应该只更改处理程序函数：GEvent.addListener（poly，“endline”，在此处放置我写的函数）
。您知道是否可以在此处包含绘制圆的按钮？你过去做过类似的事情吗？非常感谢！恐怕地图API v2并没有提供一种简单的画圆的方法。你必须用其他（更难的）方法来做。例如，可以绘制多段线近似值（请参见）。不过，我认为您应该摆脱不推荐的API v2，改用API v3。顺便说一句，API v3提供了一种简单的画圆圈的方法。感谢您的回复-您知道是否有类似的v3示例可以指导我完成这一过程吗？因为我没有太多使用java
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});
}
});
}