Googleの図面は点座標を出力していません

私はこれにgoogle apiを使用していますが、いくつかの同様の投稿がありますが、これに関するものはありません。ポリゴンを使用して実装を作成しましたが、これは描画を使用しています。イベントリスナーでエラー"google is not defined"が発生しました。ヘッダーが動作するファイルと同じであるため、意味がありません。私は完全に迷っているのですが、なぜ私はそれらをマークするとポイントが表示されないのですか？ここに私のコードがあります。 JSBin：これは私がいる場所です。 http://jsbin.com/woqixir/edit?html,output これは、私がフィドルから取り組んでいる私の他のスニペットです：https://jsfiddle.net/tubbstravis/864um322/私は同じことをやろうとしていますが、ポリゴンの代わりにdraw.Insteadを使っています。あなたは非同期で、GoogleマップのJavaScript APIをロードしているGoogleの図面は点座標を出力していません

<!DOCTYPE html> 
<html> 
    <head> 
    <title>HireMaster: Select Location</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 


    #map { 
    width: auto; 
    height: 600px; 
    } 
    #info { 
     position: absolute; 
     font-family: arial, sans-serif; 
     font-size: 18px; 
     font-weight: bold; 
    } 

    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
     <div id="info"> 
    </div> 
    <script> 


     function initMap() { 

      center: {lat: 38, lng: 265}, 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     var map = new google.maps.Map(document.getElementById('map'), { 
     }); 

     var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingMode: google.maps.drawing.OverlayType.POLYGON, 
      drawingControl: true, 
      drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [ 





      ] 
      }, 
      markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'}, 
      circleOptions: { 
      fillColor: '#ffff00', 
      fillOpacity: 1, 
      strokeWeight: 5, 
      clickable: false, 
      editable: true, 
      zIndex: 1 

      } 
     }); 
     drawingManager.setMap(map); 
     google.maps.event.addListener(drawingManager, "dragend", getCoords); 
     google.maps.event.addListener(drawingManager.getPath(), "insert_at", getCoords); 
     google.maps.event.addListener(drawingManager.getPath(), "remove_at", getCoords); 
     google.maps.event.addListener(drawingManager.getPath(), "set_at", getCoords); 
     } 


    function getCoords() { 
     var len = drawingManager.getPath().getLength(); 
     var htmlStr = ""; 
     for (var i = 0; i < len; i++) { 
      var counter = i + 1; 
      htmlStr += "Point " + counter + ": " + drawingManager.getPath().getAt(i).toUrlValue(5) + "<br>"; 
      console.log(htmlStr); 
    } 
    document.getElementById('info').innerHTML = htmlStr; 

} 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzUfosWJzaDKzYuffioH8liWWmbdPzwAQ&libraries=drawing&callback=initMap" 
     async defer></script> 
    </body> 
</html>

出典

2016-05-24 Anonymous

：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzUfosWJzaDKzYuffioH8liWWmbdPzwAQ&libraries=drawing&callback=initMap" 
    async defer></script>

しかし、コールバック関数（initMap）の外でロードするAPIが必要なコードを持っている：

google.maps.event.addListener(drawingManager, "dragend", getCoords); 
google.maps.event.addListener(drawingManager.getPath(), "insert_at", getCoords); 
google.maps.event.addListener(drawingManager.getPath(), "remove_at", getCoords); 
google.maps.event.addListener(drawingManager.getPath(), "set_at", getCoords);

initMap機能内でGoogle Maps JavaScript APIに依存するコードを移動します。作業コードと

コードスニペット：

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 38, 
 
     lng: 265 
 
    }, 
 
    zoom: 5, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID 
 
    }); 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.POLYGON, 
 
    drawingControl: true, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: [] 
 
    }, 
 
    markerOptions: { 
 
     icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' 
 
    }, 
 
    circleOptions: { 
 
     fillColor: '#ffff00', 
 
     fillOpacity: 1, 
 
     strokeWeight: 5, 
 
     clickable: false, 
 
     editable: true, 
 
     zIndex: 1 
 
    } 
 
    }); 
 
    drawingManager.setMap(map); 
 
} 
 

 

 
function getCoords() { 
 
    var len = drawingManager.getPath().getLength(); 
 
    var htmlStr = ""; 
 
    for (var i = 0; i < len; i++) { 
 
    var counter = i + 1; 
 
    htmlStr += "Point " + counter + ": " + drawingManager.getPath().getAt(i).toUrlValue(5) + "<br>"; 
 
    console.log(htmlStr); 
 
    } 
 
    document.getElementById('info').innerHTML = htmlStr; 
 

 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    width: auto; 
 
    height: 600px; 
 
} 
 
#info { 
 
    position: absolute; 
 
    font-family: arial, sans-serif; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script> 
 
<div id="map"></div> 
 
<div id="info"></div>

出典

2016-05-24 17:59:32 geocodezip

は、どのように私はこの問題を解決するのですか？私は単純にasync deferを取り除くことはできません –

そのコードをinitMap関数内に移動します。他にも問題があります（描画マネージャには 'getPath'メソッドがありません。ポリゴンもありません）。 – geocodezip

hmm。私はそれがなぜ問題を引き起こすのか理解していない、このhttps://jsfiddle.net/tubbstravis/864um322/の解決策を私が理解しない理由として参照する。ここでもgetPathを使用していますが、非常によく似ていますが、drawではなくpolygonです。私はなぜそれが動作していないの違いを理解していない。 –

Googleの図面は点座標を出力していません

答えて

関連する問題