google-maps - 谷歌地图获取坐标中心(在多边形中心放置标签)

Question

我使用谷歌地图，我在 map 上标记区域是这样的:

 var areaCoords2 = [
        new google.maps.LatLng(32.819649, 35.073102),
        new google.maps.LatLng(32.819604, 35.073026),
        new google.maps.LatLng(32.817169, 35.071321),
        new google.maps.LatLng(32.817097, 35.071353),
        new google.maps.LatLng(32.816042, 35.073391),
        new google.maps.LatLng(32.818513, 35.075119),
        new google.maps.LatLng(32.818612, 35.075054)
    ];

我要实现:放置 标签 和 标记 在标记的红色区域的中间(大约)。

而不是用静态纬度和经度放置(我有很多区域)

有没有办法以编程方式做到这一点？

Answer 1

以下代码构造了一个 google.maps.Polygon 并将一个 MapLabel 放置在其边界的中心。

        // Construct the polygon.
        var mypolygon2 = new google.maps.Polygon({
            paths: polyCoords,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });

        mypolygon2.setMap(map);

        //Define position of label
        var bounds = new google.maps.LatLngBounds();
        for (var i=0; i< polyCoords.length; i++) {
          bounds.extend(polyCoords[i]);
        }

        var myLatlng = bounds.getCenter();

        var mapLabel2 = new MapLabel({
            text: '2',
            position: myLatlng,
            map: map,
            fontSize: 20,
            align: 'left'
        });
        mapLabel2.set('position', myLatlng);
        var obj = {};
        obj.poly = mypolygon2;
        obj.label = mapLabel2;

working fiddle



代码片段:

var map;
var gpolygons = [];
var infoWindow;

function initialize() {
  var mapOptions = {
    zoom: 17,
    center: new google.maps.LatLng(50.71392, -1.983551),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
    new google.maps.LatLng(50.71433, -1.98392),
    new google.maps.LatLng(50.71393, -1.98239),
    new google.maps.LatLng(50.71388, -1.98226),
    new google.maps.LatLng(50.71377, -1.98246),
    new google.maps.LatLng(50.71332, -1.98296),
    new google.maps.LatLng(50.71334, -1.98324),
    new google.maps.LatLng(50.71374, -1.9845),
    new google.maps.LatLng(50.71436, -1.98389)
  ];

  // Construct the polygon.
  var mypolygon = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  mypolygon.setMap(map);

  //Define position of label
  var myLatlng = new google.maps.LatLng(50.71392, -1.983551);

  var mapLabel = new MapLabel({
    text: '1',
    position: myLatlng,
    map: map,
    fontSize: 20,
    align: 'left'
  });
  mapLabel.set('position', myLatlng);

  var obj = {};
  obj.poly = mypolygon;
  obj.label = mapLabel;
  gpolygons.push(obj);

  var polyCoords = [
    new google.maps.LatLng(50.713689004418, -1.9845771789550781),
    new google.maps.LatLng(50.71316590540595, -1.9829249382019043),
    new google.maps.LatLng(50.71296209901576, -1.983107328414917),
    new google.maps.LatLng(50.71296889257639, -1.9837510585784912),
    new google.maps.LatLng(50.713186285996215, -1.9845235347747803),
    new google.maps.LatLng(50.71293492476347, -1.9847595691680908),
    new google.maps.LatLng(50.71311155712187, -1.9853174686431885),
    new google.maps.LatLng(50.71335612390394, -1.9853603839874268),
    new google.maps.LatLng(50.713396884910225, -1.9850599765777588),
    new google.maps.LatLng(50.71348520030224, -1.9848453998565674),
    new google.maps.LatLng(50.71357351552787, -1.9846951961517334)
  ]

  // Construct the polygon.
  var mypolygon2 = new google.maps.Polygon({
    paths: polyCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  mypolygon2.setMap(map);

  //Define position of label
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyCoords.length; i++) {
    bounds.extend(polyCoords[i]);
  }

  var myLatlng = bounds.getCenter();

  var mapLabel2 = new MapLabel({
    text: '2',
    position: myLatlng,
    map: map,
    fontSize: 20,
    align: 'left'
  });
  mapLabel2.set('position', myLatlng);
  var obj = {};
  obj.poly = mypolygon2;
  obj.label = mapLabel2;
  gpolygons.push(obj);


  // Add a listener for the click event.  You can expand this to change the color of the polygon
  google.maps.event.addListener(mypolygon, 'click', showArrays);
  google.maps.event.addListener(mypolygon2, 'click', showArrays);


  infoWindow = new google.maps.InfoWindow();
}

/** @this {google.maps.Polygon} */
function showArrays(event) {

  //Change the color here
  // toggle it
  if (this.get("fillColor") != '#0000ff') {
    this.setOptions({
      fillColor: '#0000ff'
    });
  } else {
    this.setOptions({
      fillColor: '#ff0000'
    });
  }

  // Since this polygon has only one path, we can call getPath()
  // to return the MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>My polygon</b><br>' +
    'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
    '<br>';

  // Iterate over the vertices.
  for (var i = 0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-map-label/gh-pages/src/maplabel.js"></script>
<title>Polygon Arrays</title>
<div id="map-canvas">
</div>