Google Map API - 在文本框中显示多个形状的经度和纬度

时间:2011-11-16 16:09:09

标签: javascript google-maps google-maps-api-2

我是JavaScript的新手,所以非常感谢您的帮助。

我正在使用Google Map的这个示例 - http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html

这很完美但我想要做的是显示所创建的任何形状的latlongs(目前它只显示标记的latlong)。

创建多边形/形状/线时,我想在文本框中显示latlongs,而不是显示Line和Shape km信息。

我尝试编辑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>

1 个答案:

答案 0 :(得分:1)

有几种方法可以做到这一点。这里重要的是获取折线/多边形顶点的坐标。为此,请使用getVertexCount() / getVertex(index:Number)个对象的GPolylineGPolygon函数。

现在您可以从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 + ")";
}

并更改endline函数中的startDrawing()事件侦听器:

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});
      }
   });
}

删除lineupdated事件侦听器以防止将文本更改回区域/长度。