無法在谷歌地圖繪製多邊形

我有下面的代碼繪製多邊形使用谷歌地圖V3 API時：無法在谷歌地圖繪製多邊形

var configurePolygonOptions = function configurePolygonOptions(strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity) { 
this.strokeColor = strokeColor; 
this.strokeWeight = strokeWeight; 
this.strokeOpacity = strokeOpacity; 
this.fillColor = fillColor; 
this.fillOpacity = fillOpacity; 
}; 

configurePolygonOptions.prototype.setPaths = function setPathsForPolygon(paths) { 
this.paths = paths; 
console.log('The points have been added to polygon options'); 
}; 

configurePolygonOptions.prototype.setMap = function (map) { 
this.map = map; 
}; 

//Use in initialize: 
    var polyPoints = []; 
polyPoints.splice(0, 0, new google.maps.LatLng(-34.9290, 138.6010), new google.maps.LatLng(-37.8136, 144.9631), new google.maps.LatLng(-27.4679, 153.0278)); 
console.log(polyPoints.length); 
var polygonOptions = new configurePolygonOptions('#FF0000', 2, 0.8, '#FF0000', 0.35); 
polygonOptions.setPaths(polyPoints); 
var pgon = createPolygon(polygonOptions); 
addPolygonToMap(pgon); 
console.log('polygon has been added');

我發現代碼沒有繪製多邊形的地圖上，我就指望它。

這是關於該問題的小提琴：http://jsfiddle.net/vamsiampolu/F9TEu/

來源

2014-02-15 vamsiampolu

它有什麼問題？你有任何的JavaScript錯誤？ – geocodezip

令人驚訝的是，我有代碼，它不工作... – vamsiampolu

你可以看看小提琴並告訴我 – vamsiampolu

你會看到，當你將它添加到configurePolygonOptions.prototype.setMap的原因：

alert('call of configurePolygonOptions.setMap');

雖然polygonOptions.setMap不會被地方叫，警報就會出現。

原因是：當您提供polygonOptions作爲參數傳遞給google.maps.Polygon的polygonOptions所有方法將覆蓋google.maps.Polygon的內置方法。

您的自定義的setMap功能簡單地更改屬性，多邊形實例被創建之後究竟會沒有效果，你必須調用，而不是setter方法的方法MVCObject：

this.set('map',map);

但最好的解決辦法要使用不與內置方法競爭的方法名（當你必須使用你的嘗試時，目前我沒有看到任何好處）。

來源

2014-02-15 16:28:56

'this'是google.maps.Polygon對象，我應該說polygon.this.set（'map'，map）。我做了這樣的事情[我應該擺脫這個]（http://pastebin.com/3Spq2E1z） – vamsiampolu

**'這個**是在其上下文中執行該函數的對象。當你調用'poly.setMap（map）'時，'上下文將是多邊形，所以你只能在'setMap（）'內調用'this.set（'map'，map）;'。注意：在創建Polygon實例後，您可以僅執行** **。 'set'方法將從'google.maps.MVCObject'繼承，直到創建Polygon-instance時纔可用。 –

他們如何重寫他們的MVCObject中的屬性，他們只是複製屬性，或者他們讓我的對象成爲原型（這會影響所有新對象...）？ – vamsiampolu

你可以試試這個

<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title>Google Map V3 Polygon Creator</title> 
    <meta name="keywords" content="polygon,creator,google map,v3,draw,paint"> 
    <meta name="description" content="Google Map V3 Polygon Creator"> 


    <link rel="stylesheet" type="text/css" href="http://www.the-di-lab.com/polygon/style.css"> 


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://www.the-di-lab.com/polygon/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="http://www.the-di-lab.com/polygon/polygon.min.js"></script> 

    <script type="text/javascript"> 

    $(function(){ 
      //create map 
      var boundaryPolygon; 
      var singapoerCenter=new google.maps.LatLng(1.37584, 103.829); 
      var myOptions = { 
      zoom: 10, 
      center: singapoerCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
     map = new google.maps.Map(document.getElementById('main-map'), myOptions); 

     var creator = new PolygonCreator(map); 

     //reset 
     $('#reset').click(function(){ 
       creator.destroy(); 
       creator=null; 
       creator=new PolygonCreator(map); 
     });   


     //show paths 
     $('#showData').click(function(){ 
       $('#dataPanel').empty(); 
       if(null==creator.showData()){ 
        $('#dataPanel').append('Please first create a polygon'); 
       }else{ 
        $('#dataPanel').append(creator.showData()); 

       } 
     }); 





    }); 



    </script> 
</head> 
<body> 


    <div>Click and select the point to create polygon </div> 
    <div> please check below screenshot and follow the step on map given in the below 
    <img src="gmap_capture.png"> 
    <h1> ---------------------- Polygon Demo ---------------------------------</h1> 
    <div id="header"> 

    </div> 
    <div id="main-map"> 
    </div> 
    <div id="side"> 
     <input id="reset" value="Reset" type="button" class="navi"/> 
     <input id="showData" value="Show Paths (class function) " type="button" class="navi"/> 
     <div id="dataPanel"> 
     </div> 
    </div> 
</body> 
</html>

來源

2014-04-22 05:28:49 sandipshirsale

無法在谷歌地圖繪製多邊形

回答

相關問題