Google Maps API로 거리의 일부를 선택할 수 있습니까?

-2

Google지도에서 거리의 일부분을 선택/삭제/업데이트 할 수 있어야합니다 (그림 울트라와 같이).Google Maps API로 거리의 일부를 선택할 수 있습니까?

이 선택된 부분은 서버에 저장해야하며 선택한 거리의 카운터가 있어야합니다.

Google Maps API에이 문제가있을 수 있습니까?

2016-10-19 Tony V.

Google지도 자바 스크립트 API를 사용한다고 가정.

인코딩 코드 :

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     <title>Encoding methods</title> 
 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
     <meta charset="utf-8"> 
 
     <style> 
 
      #right-panel { 
 
      font-family: 'Roboto','sans-serif'; 
 
      line-height: 30px; 
 
      padding-left: 10px; 
 
      } 
 
    
 
      #right-panel select, #right-panel input { 
 
      font-size: 15px; 
 
      } 
 
    
 
      #right-panel select { 
 
      width: 100%; 
 
      } 
 
    
 
      #right-panel i { 
 
      font-size: 12px; 
 
      } 
 
      html, body { 
 
      height: 100%; 
 
      margin: 0; 
 
      padding: 0; 
 
      } 
 
      #map { 
 
      height: 100%; 
 
      width: 50%; 
 
      float: left; 
 
      } 
 
      #right-panel { 
 
      width: 46%; 
 
      float: left; 
 
      } 
 
      #encoded-polyline { 
 
      height: 100px; 
 
      width: 100%; 
 
      } 
 
     </style> 
 
     </head> 
 
     <body> 
 
     <div id="map"></div> 
 
     <div id="right-panel"> 
 
      <div>Encoding:</div> 
 
      <textarea id="encoded-polyline"></textarea> 
 
     </div> 
 
     <script> 
 
\t \t    var poly, map; 
 
      // This example requires the Geometry library. Include the libraries=geometry 
 
      // parameter when you first load the API. For example: 
 
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"> 
 
    
 
      function initMap() { 
 
      map = new google.maps.Map(document.getElementById('map'), { 
 
       zoom: 14, 
 
       center: {lat: 34.366, lng: -89.519} 
 
      }); 
 
    
 
      // Add a listener for the click event 
 
      google.maps.event.addListener(map, 'click', function(event) { 
 
       addLatLngToPoly(event.latLng, poly); 
 
      }); 
 
      } 
 
    
 
      /** 
 
      * Handles click events on a map, and adds a new point to the Polyline. 
 
      * Updates the encoding text area with the path's encoded values. 
 
      */ 
 
      function addLatLngToPoly(latLng) { 
 
\t \t \t if(!poly){ 
 
\t \t \t \t poly = new google.maps.Polyline({ 
 
\t \t \t \t \t strokeColor: '#000000', 
 
\t \t \t \t \t strokeOpacity: 1, 
 
\t \t \t \t \t strokeWeight: 3, 
 
\t \t \t \t \t map: map 
 
\t \t \t \t \t }); 
 
\t \t \t } 
 
      var path = poly.getPath(); 
 
      // Because path is an MVCArray, we can simply append a new coordinate 
 
      // and it will automatically appear 
 
\t \t \t if(path.length==2){ 
 
\t \t \t \t poly = new google.maps.Polyline({ 
 
\t \t \t \t \t strokeColor: '#000000', 
 
\t \t \t \t \t strokeOpacity: 1, 
 
\t \t \t \t \t strokeWeight: 3, 
 
\t \t \t \t \t map: map 
 
\t \t \t \t \t }); 
 
\t \t \t } 
 
\t \t \t path = poly.getPath(); 
 
\t \t \t path.push(latLng); 
 
      // Update the text field to display the polyline encodings 
 
      var encodeString = google.maps.geometry.encoding.encodePath(path); 
 
      if (encodeString) { 
 
       document.getElementById('encoded-polyline').value = encodeString; 
 
      } 
 
      } 
 
     </script> 
 
     <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" 
 
      async defer></script> 
 
     </body>

당신은 데이터베이스의 인코딩 된 문자열을 저장할 수 있습니다.

마찬가지로 당신은 저장된 폴리 라인을 디코딩 할 수 있습니다

<html> 
 
    <head> 
 
    <title>Test</title> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=false"></script> 
 
    <style type="text/css"> 
 
    #map {width:670px;height:600px;} 
 
    </style> 
 
    <script type='text/javascript'> 
 
    function initialize() { 
 
     var myLatlng = new google.maps.LatLng(51.65905179951626, 7.3835928124999555); 
 
     var myOptions = { 
 
      zoom: 8, 
 
      center: myLatlng, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     } 
 
     var map = new google.maps.Map(document.getElementById("map"), myOptions); 
 
      
 
     var decodedPath = google.maps.geometry.encoding.decodePath('}[email protected]\\[email protected]@r{[email protected]@[email protected]@[email protected]}[email protected]_h|@r{Zad\\y|_D}[email protected]@[email protected]}llBpoZqa{@[email protected]~eBaaX}{[email protected]}[email protected]`dYs_NquNgbjAf{[email protected]|[email protected]@}[email protected]}[email protected]|[email protected]@r{ZhjFr}[email protected]}@[email protected]@'); 
 
     var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"); 
 
    
 
     var setRegion = new google.maps.Polyline({ 
 
      path: decodedPath, 
 
      levels: decodedLevels, 
 
      strokeColor: "#FF0000", 
 
      strokeOpacity: 1.0, 
 
      strokeWeight: 2, 
 
      map: map 
 
     }); 
 
    } 
 
    
 
    function decodeLevels(encodedLevelsString) { 
 
     var decodedLevels = []; 
 
    
 
     for (var i = 0; i < encodedLevelsString.length; ++i) { 
 
      var level = encodedLevelsString.charCodeAt(i) - 63; 
 
      decodedLevels.push(level); 
 
     } 
 
     return decodedLevels; 
 
    } 
 
    </script> 
 
    </head> 
 
    <body onload="initialize()"> 
 
    <div id="map"></div> 
 
    </body> 
 
    </html>

이 도움이된다면 찬성 투표하는 것을 잊지 마세요!

출처

2016-10-19 09:49:56 arnabkaycee

하나의 폴리 라인 대신 여러 개의 연결된 폴리 라인을 만들 수 있습니까? –

코드 스 니펫을 업데이트했습니다. 이제 2 점 사이에 연결된 폴리 라인을 여러 개 추가 할 수 있습니다. 텍스트 상자는 마지막 폴리 라인에 대한 문자열을 표시합니다. 희망이 도움이됩니다! – arnabkaycee

Google Maps API로 거리의 일부를 선택할 수 있습니까?

답변

관련 문제