Google地图：将功能应用于多种形状 [英] Google Maps: Apply Function to Multiple Shapes

查看：104
本文介绍了Google地图：将功能应用于多种形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要在初始化时在地图上绘制多个形状，然后添加事件侦听器以查看形状是否已被修改或点击过。



如果绘制

  // 1 
 var polygon = new google.maps.Polygon（单个形状，下面的代码正常工作）：
 {
 id：'1'，
 paths：[
 {lat：38.56080094343725，lng：-121.74302101135254}，
 {lat：38.56106940317395，lng：-121.76750421524048}，
 {lat：38.57249479108347，lng：-121.76737546920776}，
 {lat：38.57244446296193，lng：-121.75782680511475}，
 {lat：38.57595057110021，lng：-121.75774097442627}，
 {lat： 38.57583314441062，lng：-121.74778461456299} 
]，
 strokeColor：'＃FF0000'，
 strokeOpacity：0.8，
 strokeWeight：1，
 fillColor：'＃FF0000' ，
 fillOpacity：0.1 
}）; 
 polygon.setMap（map）; 
 
 google.maps.event.addListener（多边形，'click'，function（）{
 console.log（polygon.id）; 
}）; 
 
 google.maps.event.addListener（polygon.getPath（），insert_at，getPath）; 
 google.maps.event.addListener（polygon.getPath（），remove_at，getPath）; 
 google.maps.event.addListener（polygon.getPath（），set_at，getPath）; 
 
函数getPath（）{
 var shapeCoords =''; 
 for（var i = 0; i< polygon.getPath（）。getLength（）; i ++）{
 var xy = polygon.getPath（）。getAt（i）; 
 shapeCoords + ='{lat：'+ xy.lat（）+'，lng：'+ xy.lng（）+'}，\\\
'; 
} 
 console.log（shapeCoords）; 
 console.log（polygon.id）; 
}

当我绘制任何其他形状时，我必须复制所有的点击事件并更改变量名称（例如，变为 polygon2 ）。 

  // 2 
 var polygon2 =新google.maps.Polygon（{
 id：'2 '，
路径：[
 {lat：38.56075060712497，lng：-121.76754713058472}，
 {lat：38.5605157038683，lng：-121.74289226531982}，
 {lat：38.55172305844243，lng： -121.7401671409607}，
 {lat：38.550665854985745，lng：-121.74636840820312}，
 {lat：38.54645366782474，lng：-121.745445728302}，
 {lat：38.54636975720739，lng：-121.74585342407227}，
 {lat：38.546302628643，lng：-121.74879312515259}，
 {lat：38.54655436043634，lng：-121.76778316497803} 
]，
 strokeColor：'＃FF0000'，
 strokeOpacity ：0.8，
 strokeWeight：1，
 fillColor：'＃FF0000'，
 fillOpacity：0.1 
}）; 
 polygon2.setMap（map）; 
 
 google.maps.event.addListener（polygon2，'click'，function（）{
 console.log（polygon2.id）; 
}）; 
 
 google.maps.event.addListener（polygon2.getPath（），insert_at，getPath2）; 
 google.maps.event.addListener（polygon2.getPath（），remove_at，getPath2）; 
 google.maps.event.addListener（polygon2.getPath（），set_at，getPath2）; 
 
函数getPath2（）{
 var shapeCoords =''; 
 for（var i = 0; i< polygon2.getPath（）。getLength（）; i ++）{
 var xy = polygon2.getPath（）。getAt（i）; 
 shapeCoords + ='{lat：'+ xy.lat（）+'，lng：'+ xy.lng（）+'}，\\\
'; 
} 
 console.log（shapeCoords）; 
 console.log（polygon2.id）; 
}

是否有任何方法可以使用相同的getPath函数和/或事件侦听器我不需要为每个形状重复相同的代码？解决方案

用于您的最后一个问题。
创建一个 createPolygon 函数，该函数接受要配置的多边形的路径，ID和任何其他选项。使用它创建具有其自己内部版本的 getPath 的固定多边形（因此您有一个对多边形创建函数是局部函数的实例，该函数可以访问闭合 polygon ，使用相同的函数从DrawingManager创建多边形）。 

  function createPolygon（id，poly）{
 var polygon; 
 if（！（poly instanceof google.maps.Polygon））{
 var polygon = new google.maps.Polygon（{
 id：id，
 paths：poly，
 strokeColor：'＃FF0000'，
 strokeOpacity：0.8，
 strokeWeight：1，
 fillColor：'＃FF0000'，
 fillOpacity：0.1 
}） ; 
} else {
 polygon = poly; 
} 
 polygon.setMap（map）; 
 
 google.maps.event.addListener（多边形，'click'，function（）{
 console.log（this.id +''+ this.getPath（）。getArray（） .toString（））; 
}）; 
 
 google.maps.event.addListener（polygon.getPath（），insert_at，getPathCP）; 
 google.maps.event.addListener（polygon.getPath（），remove_at，getPathCP）; 
 google.maps.event.addListener（polygon.getPath（），set_at，getPathCP）; 
 
函数getPathCP（）{
 var shapeCoords =''; 
 for（var i = 0; i< polygon.getPath（）。getLength（）; i ++）{
 var xy = polygon.getPath（）。getAt（i）; 
 shapeCoords + ='{lat：'+ xy.lat（）+'，lng：'+ xy.lng（）+'}，\\\
'; 
} 
 console.log（shapeCoords）; 
 console.log（polygon.id）; 
} 
返回多边形; 
}

概念证明小提琴



代码段：



var geocoder; var map;函数initMap（）{map = new google。 maps.Map（document.getElementById（'map'），{center：{lat：-34.397，lng：150.644}，zoom：8}）; var bounds = new google.maps.LatLngBounds（）; var shapeID = 1;函数createPolygon（id，poly）{var polygon;如果（！（poly（instanceof google.maps.Polygon））{var polygon = new google.maps.Polygon（{id：id，paths：poly，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：1，fillColor： '＃FF0000'，fillOpacity：0.1}）; } else {polygon = poly; } for（var i = 0; i< polygon.getPath（）。getLength（）; i ++）{bounds.extend（polygon.getPath（）。getAt（i））; } polygon.setMap（map）; google.maps.event.addListener（polygon，'click'，function（）{console.log（this.id +''+ this.getPath（）。getArray（）。toString（））;}）; google.maps.event.addListener（polygon.getPath（），insert_at，getPathCP）; google.maps.event.addListener（polygon.getPath（），remove_at，getPathCP）; google.maps.event.addListener（polygon.getPath（），set_at，getPathCP）;函数getPathCP（）{var shapeCoords =''; for（var i = 0; i< polygon.getPath（）。getLength（）; i ++）{var xy = polygon.getPath（）。getAt（i）; shapeCoords + ='{lat：'+ xy.lat（）+'，lng：'+ xy.lng（）+'}，\\\
'; } console.log（shapeCoords）;的console.log（polygon.id）; }返回多边形; } // 1 var polygon1 = createPolygon（shapeID ++，[{lat：38.56080094343725，lng：-121.74302101135254}，{lat：38.56106940317395，lng：-121.76750421524048}，{lat：38.57249479108347，lng：-121.76737546920776}，{lat：38.57244446296193， lng：-121.75782680511475}，{lat：38.57595057110021，lng：-121.75774097442627}，{lat：38.57583314441062，lng：-121.74778461456299}]）; // 2 var polygon2 = createPolygon（shapeID ++，[{lat：38.56075060712497，lng：-121.76754713058472}，{lat：38.5605157038683，lng：-121.74289226531982}，{lat：38.55172305844243，lng：-121.7401671409607}，{lat：38.550665854985745，lng ：-121.74636840820312}，{lat：38.54645366782474，lng：-121.745445728302}，{lat：38.54636975720739，lng：-121.74585342407227}，{lat：38.546302628643，lng：-121.74879312515259}，{lat：38.54655436043634，lng：-121.76778316497803}]） ; map.fitBounds（边界）; var drawingManager = new google.maps.drawing.DrawingManager（{drawingMode：google.maps.drawing.OverlayType.MARKER，drawingControl：true，drawingControlOptions：{position：google.maps.ControlPosition.TOP_CENTER，drawingModes：['marker'，'圆形'，'多边形'，'折线'，'矩形']}，markerOptions：{图标：'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'} ，circleOptions：{fillColor：'＃ffff00'，fillOpacity：1，strokeWeight：5，clickable：false，editable：true，zIndex：1}}）; drawingManager.setMap（地图）; google.maps.event.addListener（drawingManager，'polygoncomplete'，function（polygon）{drawingManager.setDrawingMode（null）; polygon.setOptions（{id：shapeID，editable：true，draggable：true}）; createPolygon（shapeID ++，polygon ）; shapeID ++;}）;} google.maps.event.addDomListener（window，load，initMap）; 

  / *总是显式设置地图高度以定义包含地图的div *元素的大小。 * /＃map {height：100％;} / *可选：使样本页面填满窗口。 * / html，body {height：100％;保证金：0; padding：0;}

< script src =https ：//maps.googleapis.com/maps/api/js？libraries = drawing>< / script>< div id =map>< / div> pre>


I need to draw multiple shapes on a map upon initialization and then add event listeners to see if the shapes have been modified or clicked on.

If I draw a single shape, the below code works properly:

// 1
var polygon = new google.maps.Polygon({
    id: '1',
    paths: [
        {lat: 38.56080094343725, lng: -121.74302101135254},
        {lat: 38.56106940317395, lng: -121.76750421524048},
        {lat: 38.57249479108347, lng: -121.76737546920776},
        {lat: 38.57244446296193, lng: -121.75782680511475},
        {lat: 38.57595057110021, lng: -121.75774097442627},
        {lat: 38.57583314441062, lng: -121.74778461456299}
    ],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#FF0000',
    fillOpacity: 0.1
});
polygon.setMap(map);

google.maps.event.addListener(polygon, 'click', function() {
    console.log(polygon.id);
});

google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
google.maps.event.addListener(polygon.getPath(), "set_at", getPath);

function getPath() {
    var shapeCoords = '';
    for (var i =0; i < polygon.getPath().getLength(); i++) {
        var xy = polygon.getPath().getAt(i);
        shapeCoords += '{lat: ' + xy.lat() + ', lng: ' + xy.lng() + '},\n';
    }
    console.log(shapeCoords);
    console.log(polygon.id);
}

When I draw any additional shapes, I have to duplicate all of the click events and change the variable name (e.g. to polygon2). 

// 2
var polygon2 = new google.maps.Polygon({
    id: '2',
    paths: [
        {lat: 38.56075060712497, lng: -121.76754713058472},
        {lat: 38.5605157038683, lng: -121.74289226531982},
        {lat: 38.55172305844243, lng: -121.7401671409607},
        {lat: 38.550665854985745, lng: -121.74636840820312},
        {lat: 38.54645366782474, lng: -121.745445728302},
        {lat: 38.54636975720739, lng: -121.74585342407227},
        {lat: 38.546302628643, lng: -121.74879312515259},
        {lat: 38.54655436043634, lng: -121.76778316497803}
    ],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#FF0000',
    fillOpacity: 0.1
});
polygon2.setMap(map);

google.maps.event.addListener(polygon2, 'click', function() {
    console.log(polygon2.id);
});

google.maps.event.addListener(polygon2.getPath(), "insert_at", getPath2);
google.maps.event.addListener(polygon2.getPath(), "remove_at", getPath2);
google.maps.event.addListener(polygon2.getPath(), "set_at", getPath2);

function getPath2() {
    var shapeCoords = '';
    for (var i =0; i < polygon2.getPath().getLength(); i++) {
        var xy = polygon2.getPath().getAt(i);
        shapeCoords += '{lat: ' + xy.lat() + ', lng: ' + xy.lng() + '},\n';
    }
    console.log(shapeCoords);
    console.log(polygon2.id);
}

Is there any way to use the same getPath function and/or event listeners so I don't need to duplicate the same code for each shape?

解决方案

One option is to solve the problem the same way that was used in your last question. Create a createPolygon function that takes the path, id, and any other options of the polygon you want configurable. Use that to create the fixed polygons with its own internal version of getPath (so you have one instance of the function local to the polygon creation function, which has access to the closure on polygon, use the same function to create the polygons from the DrawingManager).

function createPolygon(id, poly) {
  var polygon;
  if (!(poly instanceof google.maps.Polygon)) {
    var polygon = new google.maps.Polygon({
      id: id,
      paths: poly,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: '#FF0000',
      fillOpacity: 0.1
    });
  } else {
    polygon = poly;
  }
  polygon.setMap(map);

  google.maps.event.addListener(polygon, 'click', function() {
    console.log(this.id + ' ' + this.getPath().getArray().toString());
  });

  google.maps.event.addListener(polygon.getPath(), "insert_at", getPathCP);
  google.maps.event.addListener(polygon.getPath(), "remove_at", getPathCP);
  google.maps.event.addListener(polygon.getPath(), "set_at", getPathCP);

  function getPathCP() {
    var shapeCoords = '';
    for (var i = 0; i < polygon.getPath().getLength(); i++) {
      var xy = polygon.getPath().getAt(i);
      shapeCoords += '{lat: ' + xy.lat() + ', lng: ' + xy.lng() + '},\n';
    }
    console.log(shapeCoords);
    console.log(polygon.id);
  }
  return polygon;
}

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var bounds = new google.maps.LatLngBounds();
  var shapeID = 1;

  function createPolygon(id, poly) {
      var polygon;
      if (!(poly instanceof google.maps.Polygon)) {
        var polygon = new google.maps.Polygon({
          id: id,
          paths: poly,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#FF0000',
          fillOpacity: 0.1
        });
      } else {
        polygon = poly;
      }
      for (var i = 0; i < polygon.getPath().getLength(); i++) {
        bounds.extend(polygon.getPath().getAt(i));
      }
      polygon.setMap(map);

      google.maps.event.addListener(polygon, 'click', function() {
        console.log(this.id + ' ' + this.getPath().getArray().toString());
      });

      google.maps.event.addListener(polygon.getPath(), "insert_at", getPathCP);
      google.maps.event.addListener(polygon.getPath(), "remove_at", getPathCP);
      google.maps.event.addListener(polygon.getPath(), "set_at", getPathCP);

      function getPathCP() {
        var shapeCoords = '';
        for (var i = 0; i < polygon.getPath().getLength(); i++) {
          var xy = polygon.getPath().getAt(i);
          shapeCoords += '{lat: ' + xy.lat() + ', lng: ' + xy.lng() + '},\n';
        }
        console.log(shapeCoords);
        console.log(polygon.id);
      }
      return polygon;
    }
    // 1
  var polygon1 = createPolygon(shapeID++, [{
    lat: 38.56080094343725,
    lng: -121.74302101135254
  }, {
    lat: 38.56106940317395,
    lng: -121.76750421524048
  }, {
    lat: 38.57249479108347,
    lng: -121.76737546920776
  }, {
    lat: 38.57244446296193,
    lng: -121.75782680511475
  }, {
    lat: 38.57595057110021,
    lng: -121.75774097442627
  }, {
    lat: 38.57583314441062,
    lng: -121.74778461456299
  }]);
  // 2
  var polygon2 = createPolygon(shapeID++, [{
    lat: 38.56075060712497,
    lng: -121.76754713058472
  }, {
    lat: 38.5605157038683,
    lng: -121.74289226531982
  }, {
    lat: 38.55172305844243,
    lng: -121.7401671409607
  }, {
    lat: 38.550665854985745,
    lng: -121.74636840820312
  }, {
    lat: 38.54645366782474,
    lng: -121.745445728302
  }, {
    lat: 38.54636975720739,
    lng: -121.74585342407227
  }, {
    lat: 38.546302628643,
    lng: -121.74879312515259
  }, {
    lat: 38.54655436043634,
    lng: -121.76778316497803
  }]);
  map.fitBounds(bounds);
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    drawingManager.setDrawingMode(null);
    polygon.setOptions({
      id: shapeID,
      editable: true,
      draggable: true
    });
    createPolygon(shapeID++, polygon);
    shapeID++;
  });
}


google.maps.event.addDomListener(window, "load", initMap);

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map"></div>

这篇关于Google地图：将功能应用于多种形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆