Question

使用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');

我发现代码不会像我期望的那样在地图上绘制多边形。

这是一个关于这个问题的小提琴：http://jsfiddle.net/vamsiampolu/F9TEu/

Answer 1

您将看到将其添加到configurePolygonOptions.prototype.setMap的原因：

alert('call of configurePolygonOptions.setMap');

虽然不会在某处调用polygonOptions.setMap，但会显示警告。

原因：当您向polygonOptions提供google.maps.Polygon作为参数时，polygonOptions的所有方法都将覆盖google.maps.Polygon的内置方法。

你的自定义setMap函数只是改变了属性，在创建了Polygon-instance之后没有任何效果，你必须调用setter-method MVCObject：

this.set('map',map);

但最好的解决方案是使用不与内置方法竞争的方法名称（当你必须使用你的尝试时，目前我没有看到任何好处）。

Answer 2

你可以试试这个

<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>

无法在Google地图中绘制多边形

2 个答案: