兩個輸入之間的谷歌地圖API繪圖線

所以我有我的懷疑，這是不工作的原因是因爲我的「var points ..」行代碼。我嘗試將搜索結果存儲到某些內容中，以便稍後在繪圖函數中使用它，但尚未破解它。兩個輸入之間的谷歌地圖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

兩個輸入之間的谷歌地圖API繪圖線

回答

相關問題