Cannot draw polygon in Google Maps

StackOverflow https://stackoverflow.com/questions/21797906

Pergunta

I have the following code when drawing a Polygon using Google Maps 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');

I find that the code does not draw a polygon on the map as I would expect it to.

This is a fiddle regarding the problem: http://jsfiddle.net/vamsiampolu/F9TEu/

Foi útil?

Solução

You will see the reason when you add this to configurePolygonOptions.prototype.setMap :

alert('call of configurePolygonOptions.setMap');

Although polygonOptions.setMap will not be called somewhere, the alert will appear.

The reason: when you supply polygonOptions as argument to google.maps.Polygon, all methods of polygonOptions will overwrite the built-in methods of the google.maps.Polygon.

Your custom setMap-function simply changes the property, what will have no effect after the Polygon-instance has been created, you must invoke the setter-method MVCObject instead:

this.set('map',map);

But the best solution would be to use method-names that don't compete with the built-in methods(when you must use your attempt at all, currently I don't see there any benefit).

Outras dicas

You can try this

<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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top