Question

这是我的代码

http://jsfiddle.net/6KacA/

一切正常。我可以在地图上绘制，但我想获得我在地图上绘制的坐标。我怎么能在api v3上做到这一点？

P.S。抱歉我的英文。

Answer 1

对于drawingManager有一个polylinecomplete事件，观察它以访问折线（它将是提供给回调函数的第一个参数）。

然后使用polyline.getPath()访问路径并使用MVCArray

的方法使用它

Example:

google.maps.event.addListener(drawingManager, 'polylinecomplete', function(line) {
  alert(line.getPath().getArray().toString());
});

Answer 2

您可以使用以下函数获取所有polilynes坐标。

function getPathVariableCode(line){
var codeStr = '  var linePath = [\n';
var pathArr = line.getPath();
for (var i = 0; i < pathArr.length; i++){
    codeStr += '    {lat: ' + pathArr.getAt(i).lat() + ', lng: ' + pathArr.getAt(i).lng() + '}' ;
    if (i !== pathArr.length-1) {
        codeStr += ',\n';
    };

};

codeStr += '\n  ];';

//the coordinates path it´s print on the console of the browser

console.log (codeStr);
console.log(pathArr.length);

};

这就是你如何调用函数

 line.addListener('click', function () {
 getPathVariableCode(line);
 });

然后你只需在一个点上clic来在控制台浏览器上生成坐标

------------这里是完整的代码---------

var map;
function initialize() {

  

    //Map options
   var mapOptions = {
	zoom: 7,
    center: new google.maps.LatLng(18.075464, -94.012622),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    scaleControl: false,
    mapTypeControl: false,
    zoomControl: false,
    draggable: true,
    disableDoubleClickZoom: true,
    keyboardShortcuts: false,
 
  }
    //map canvas
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions );
   //coordinates por the polyline
  var linePath = [
    {lat: 18.068652, lng: -94.25055299999997},
    {lat: 16.766951, lng: -93.31531000000001}
  ];
    //Polyline Options
  var line = new google.maps.Polyline({
    path: linePath,
    geodesic: true,
    strokeColor: '#ff0000',
    strokeOpacity: 0.4,
    strokeWeight: 8,
	editable: true // if you dont want to see the editable point change it to false
  });

     //call to the path coordinates function

  line.addListener('click', function () {
     getPathVariableCode(line);
 });
    //set map
 line.setMap(map);
 };

//here we call the initialize function which load the map
google.maps.event.addDomListener(window, 'load', initialize);


//function to get all the coordinates of the polyline
function getPathVariableCode(line){
	var codeStr = '  var linePath = [\n';
	var pathArr = line.getPath();
	for (var i = 0; i < pathArr.length; i++){
		codeStr += '    {lat: ' + pathArr.getAt(i).lat() + ', lng: ' + pathArr.getAt(i).lng() + '}' ;
        if (i !== pathArr.length-1) {
			codeStr += ',\n';
		};
       
	};
    
	codeStr += '\n  ];';
    
    //the coordinates path it´s print on the console of the browser

    console.log (codeStr);
    console.log(pathArr.length);
	
};

#map_canvas {
    width: 90%;
    height: 300px;
    margin: 0 auto;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 0px 0px 8px #999;
    color: black;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
 



</head>

<body>
    <div class="container">
        <!-- Push Wrapper -->
        <div class="mp-pusher" id="mp-pusher">


           
            <!-- /scroller-inner -->

            <div id="map_canvas"></div>

        </div>

        <!-- /pusher -->
    </div>
    <!-- /container -->

    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
    

</body>

</html>

Answer 3

尝试一下

    myfile.csv:

    -6.9906775;38.0667982
    -6.9906474;38.0666109
    -6.9904324;38.0663124
    ...

    var coordsList= [];
    $.ajax({
            type: "GET",
            url: "myfile.csv",
            dataType: "text",
            success: function(data) {                    
                var allTextLines = data.split(/\r\n|\n/);
                allTextLines.forEach(function(element) {
                    var entry = element.split(';');
                    coordsList.push({lat: entry[0]*1, lng: entry[1]*1});
                });
                console.log(coordsList);
            }
        });

    var myArea = new google.maps.Polygon({paths: coordsList});

从折线谷歌地图获取坐标

3 个答案: