рисунок google, не выводящий координаты точки

Я использую google api для этого, и есть несколько похожих сообщений, но ничего не связано с этим. Я написал реализацию очень похожее, используя полигоны, но этот использует рисование. Я получаю сообщение об ошибке "google is not defined" на прослушиватели событий, и это бессмысленно, потому что заголовки такие же, как в файле, который работает. Я нахожусь в полной утрате, потому что это не показывает точки, как я их отмечаю. Вот мой код для всего. JSBin: Это то место, где я нахожусь. http://jsbin.com/woqixir/edit?html,output Это мой другой фрагмент, над которым я работаю на скрипке: https://jsfiddle.net/tubbstravis/864um322/ Я просто пытаюсь сделать то же самое, но с помощью draw.Instad polygon.рисунок 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

Вы загружаете Google Maps JavaScript API асинхронно:

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

Но есть код, который требует API для загрузки за пределами функции обратного вызова (initMap):

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

Переместите любой код, который зависит от API JavaScript Карт Google в функции initMap.

Связанные вопрос с рабочим кодом: Google Maps API how to get the click listener to recognize drags

фрагмент кода:

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, и он очень похож, но полигон вместо рисования. Я не понимаю разницы в том, почему он не работает. –

рисунок google, не выводящий координаты точки

ответ

Смежные вопросы