Event.LatLng返回undefined

我試圖在移動Google Map時獲取LatLng點。我在地圖上添加了一個domListener，但是當我嘗試訪問event.latLng時，它會回到未定義狀態。當我嘗試調用函數addPointsToArray時，變量pnt始終未定義。Event.LatLng返回undefined

fiddle

我的代碼是

<html> 
    <body> 

    <div> 
     <button id="move-mode" onClick="moveMode()">Move</button> 
     <button id="draw-mode" onClick="drawMode()">Draw</button> 
    </div> 
<script> 

var map; 
var points = []; 
var modeType; 
var bMouseDown; 
var poly; 

function moveMode() { 
    //alert("Move Mode Clicked"); 
    modeType = 'move'; 
    if ("ontouchend" in document) { 
     return; 
    } 
    var options = { 
     draggable: true, 
     panControl: true, 
     scrollwheel: true 
    }; 
    map.setOptions(options); 
} 

function drawMode() { 
    //alert("Draw Mode Clicked"); 
    console.log("Draw Mode"); 
    modeType = 'draw'; 
    if ("ontouchend" in document) { 
     return; 
    } 
    var options = { 
     draggable: false, 
     panControl: false, 
     scrollwheel: false 
    }; 
    map.setOptions(options); 
} 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(32.7150, -117.1625), 
     disableDefaultUI: true, 
     zoomControl: true, 

     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
      mapTypeIds: [ 
       google.maps.MapTypeId.ROADMAP, 
       google.maps.MapTypeId.TERRAIN, 
       google.maps.MapTypeId.SATELLITE 
      ] 
     } 
    }); 

    bMouseDown = false; 

    var polyOptions = { 
     strokeWeight: 0, 
     fillOpacity: 0.45, 
     editable: true 
    }; 

    google.maps.event.addDomListener(map.getDiv(), 'mousedown', function (e) { 
     //do it with the right mouse-button only 
     if (e.button != 1 && modeType != "draw") { 
      return; 
     } 

     bMouseDown = true; 

     //the polygon 
     poly = new google.maps.Polyline({ 
      map: map, clickable: false 
     }); 
     //move-listener 
     var move = google.maps.event.addListener(map, 'mousemove', function (eventPoint) { 
      poly.getPath().push(eventPoint.latLng); 
      addPointsToArray(eventPoint.latLng); 
     }); 
     //mouseup-listener 
     google.maps.event.addListenerOnce(map, 'mouseup', function (e) { 
      google.maps.event.removeListener(move); 
      bMouseDown = false; 
      arrayOfPoints.push(points); 
      points = []; 
      polylinesArray.push(poly); 
      if (document.getElementById('overlay').value == 'Polygon') { 
       var path = poly.getPath(); 
       poly.setMap(null); 
       poly = new google.maps.Polygon({map: map, path: path}); 
       polylinesArray.push(poly); 
      } else { 
       polylinesArray.push(poly); 
      } 
     }); 

    }); 
} 

function addPointsToArray(pnt) { 
    if (bMouseDown == true && modeType == 'draw') { 
     points.push(pnt); 
     console.log(pnt); 
    } 
} 
</script> 
</body> 
</html>

當我嘗試推到了點陣列，pnt永遠是不確定的。

我的品牌新的JavaScript和谷歌地圖API，因此任何幫助將不勝感激

來源

2015-11-12 Ryan Newman

請提供[最小的，完整的，經過測試和讀示例]（http://stackoverflow.com/help/mcve），演示了這個問題。 – geocodezip

我增加了更多的代碼。希望這有助於 –

我仍然沒有看到與[你的代碼]報告的問題（http://jsfiddle.net/geocodezip/d7cdsrsn/3/） – geocodezip

你的問題不是在標題描述。 eventPoint.latLng總是被定義的。當您處理arrayOfPoints以在文本框中顯示它時，您正在尋找google.maps.LatLng的.latitude和.longitude屬性。那些不存在，您需要使用和.lng()對象的google.maps.LatLng對象的方法來獲取這些值。

function createFarm() { 
    document.getElementById('search-field').value = ""; 

    var xmlString = ""; 
    for (var i = 0; i < arrayOfPoints.length; ++i) { 
     xmlString += '<Shape><Points>'; 

     var singleArrayOfPoints = arrayOfPoints[i]; 

     for (var j = 0; j < singleArrayOfPoints.length; ++j) { 
      xmlString += "<Point><Latitude>" + singleArrayOfPoints[j].lat() + "</Latitude><Longitude>" + 
        singleArrayOfPoints[j].lng(+ "</Longitude></Point>"; 
     } 

     xmlString += "</Points></Shape>"; 
    } 

    document.getElementById('search-field').value = xmlString; 
}

proof of concept fiddle

來源

2015-11-13 01:03:59 geocodezip

Event.LatLng返回undefined

回答

相關問題