得到折線谷歌座標映射

這是我的代碼得到折線谷歌座標映射

http://jsfiddle.net/6KacA/

一切工作正常。我可以繪製地圖，但我想獲得座標，這是我在地圖上繪製的。我怎麼能在api v3上做到這一點？

P.S.對不起我的英語不好。

來源

2012-12-24 brio

有一個polylinecomplete事件爲DrawingManager會，觀察它訪問折線（這將是提供給回調函數的第一個參數）。

然後使用polyline.getPath()訪問路徑和使用MVCArray

Example:

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

來源

2012-12-24 10:40:27

方法你可以得到所有的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 = { 
 
\t 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, 
 
\t 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){ 
 
\t var codeStr = ' var linePath = [\n'; 
 
\t var pathArr = line.getPath(); 
 
\t for (var i = 0; i < pathArr.length; i++){ 
 
\t \t codeStr += ' {lat: ' + pathArr.getAt(i).lat() + ', lng: ' + pathArr.getAt(i).lng() + '}' ; 
 
     if (i !== pathArr.length-1) { 
 
\t \t \t codeStr += ',\n'; 
 
\t \t }; 
 
     
 
\t }; 
 
    
 
\t codeStr += '\n ];'; 
 
    
 
    //the coordinates path it´s print on the console of the browser 
 

 
    console.log (codeStr); 
 
    console.log(pathArr.length); 
 
\t 
 
};

#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>

來源

2016-06-24 00:14:17

得到折線谷歌座標映射

回答

相關問題