두 개의 입력 사이에 Google Maps API 드로잉 라인

그래서이 코드가 "var points ..."코드 라인 때문에 작동하지 않는 이유가 있다는 의혹이 있습니다. 검색 결과를 나중에 사용할 수 있도록 검색 결과를 저장하려고 시도했지만 아직 손상되지 않았습니다.두 개의 입력 사이에 Google Maps API 드로잉 라인

<!DOCTYPE html> 

<header> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { width: 1000px; height: 100% } 

    </style> 


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     var geoResults = {}; 
     var geocoder; 
     var map; 
     function initialize() { 
      geocoder = new google.maps.Geocoder(); 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var myOptions = { 
       zoom: 8, 
       center: latlng, 
      } 
      map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
     } 

     function codeAddress(id) { 
      var address = document.getElementById(id).value; 
      geocoder.geocode({ 'address': address }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location 
        }); 

        searchResults[id] = results[0].geometry.location; 


       } else { 
        alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 

      function drawLine() { 
       var points = [searchResults.address1, searchResults.address2]; 
       var polyline = new google.maps.Polyline({ 
        path: points, 
        strokeColor: '#ff0000', 
        strokeWeight: 5, 
        strokeOpacity: 0.7, 
        map: map 
       }); 

      } 
     } 
     function clearDiv1() { 
      document.getElementById("address1").value = ""; 
     } 

     function clearDiv2() { 
      document.getElementById("address2").value = ""; 
     } 

    </script> 
</header> 

<body onload="initialize()"> 

    <div> 
    <input id="address1" type="text"> 
    <button type="button" onclick="codeAddress('address1')">Search Start Address</button> 
    <button type="button" onclick="clearDiv1()">Clear</button> 
    </div> 
    <div> 
    <input id="address2" type="text""> 
    <button type="button" value="Search End Address" onclick="codeAddress('address2')">Submit End Address</button> 
      <button type="button" onclick="clearDiv2()">Clear</button> 
    </div> 
    <div> 
     <button type="button" onclick="drawLine()">DRAW</button> 
    </div> 
    <div id="map-canvas"></div> 
</body>

출처

2014-03-01 user3367151

좋아, 당신은 몇 가지 구문 오류

여기

가 jsfiddle

http://jsfiddle.net/wXV7t/1/

및 업데이트 된 코드를 작동하고 있었다

 <!DOCTYPE html> 

<header> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { width: 1000px; height: 100% } 

    </style> 


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     var geoResults = {}; 
     var geocoder; 
     var map; 
     var searchResults = []; 
     function initialize() { 
      geocoder = new google.maps.Geocoder(); 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var myOptions = { 
       zoom: 8, 
       center: latlng, 
      } 
      map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
     } 

     function codeAddress(id) { 
      var address = document.getElementById(id).value; 
      geocoder.geocode({ 'address': address }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location 
        }); 

        searchResults[id] = results[0].geometry.location; 

       } else { 
        alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 


     } 

     function drawLine() { 
       var points = [searchResults.address1, searchResults.address2]; 
       var polyline = new google.maps.Polyline({ 
        path: points, 
        strokeColor: '#ff0000', 
        strokeWeight: 5, 
        strokeOpacity: 0.7, 
        map: map 
       }); 

      } 

     function clearDiv1() { 
      document.getElementById("address1").value = ""; 
     } 

     function clearDiv2() { 
      document.getElementById("address2").value = ""; 
     } 

    </script> 
</header> 
<body onload="initialize()"> 
    <div> 
    <input id="address1" type="text"> 
    <button type="button" onclick="codeAddress('address1')">Search Start Address</button> 
    <button type="button" onclick="clearDiv1()">Clear</button> 
    </div> 
    <div> 
    <input id="address2" type="text""> 
    <button type="button" value="Search End Address" onclick="codeAddress('address2')">Submit End Address</button> 
      <button type="button" onclick="clearDiv2()">Clear</button> 
    </div> 
    <div> 
     <button type="button" onclick="drawLine()">DRAW</button> 
    </div> 
    <div id="map-canvas"></div> 
</body>

출처

2014-03-01 02:39:43

두 개의 입력 사이에 Google Maps API 드로잉 라인

답변

관련 문제