Google地图获取坐标的中心（将标签放置在多边形的中心） [英] Google Maps get the center of coordinates (place label at center of polygon)

问题描述

我使用Google地图，在地图上标记区域： $ b

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

我想实现：放置标签和标记在标记的红色区域的中间（大约）。

不是将它放置在静态的经度和纬度（我有很多区域） p>

有一种编程的方式吗？

解决方案

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

  //构建多边形。 
 var mypolygon2 = new google.maps.Polygon（{
 paths：polyCoords，
 strokeColor：'＃FF0000'，
 strokeOpacity：0.8，
 strokeWeight：3， 
 fillColor：'＃FF0000'，
 fillOpacity：0.35 
}）; 
 
 mypolygon2.setMap（map）; 
 
 //定义标签的位置
 var bounds = new google.maps.LatLngBounds（）; 
 for（var i = 0; i< polyCoords.length; i ++）{
 bounds.extend（polyCoords [i]）; 
} 
 
 var myLatlng = bounds.getCenter（）; 
 $ b 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; 
  

代码段：

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）; //定义多边形的LatLng坐标。 var triangleCoords = [new google.maps.LatLng（50.71433，-1.98392），新的google.maps.LatLng（50.71393，-1.98239），新的google.maps.LatLng（50.71388，-1.98226），新的google.maps.LatLng（新的google.maps.LatLng（50.71332，-1.98296），新的google.maps.LatLng（50.71334，-1.98324），新的google.maps.LatLng（50.71374，-1.9845），新的google.maps。 LatLng（50.71436，-1.98389）]; //构造多边形。 var mypolygon = new google.maps.Polygon（{paths：triangleCoords，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：3，fillColor：'＃FF0000'，fillOpacity：0.35}）; mypolygon.setMap（地图）; //定义标签的位置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新的google.maps.LatLng（50.713186285996215，-1.9845235347747803），新的google.maps.LatLng（50.71293492476347，-1.9847595691680908），新的google.maps.LatLng（50.71311155712187，-1.9853174686431885），新的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）] //构造多边形。 var mypolygon2 = new google.maps.Polygon（{paths：polyCoords，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：3，fillColor：'＃FF0000'，fillOpacity：0.35}）; mypolygon2.setMap（地图）; //定义标签的位置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）; //为click事件添加一个侦听器。您可以展开以更改多边形的颜色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）{//改变颜色//切换它if（this.get（fillColor ）！='＃0000ff'）{this.setOptions（{fillColor：'＃0000ff'}）; } else {this.setOptions（{fillColor：'＃ff0000'}）; } //由于这个多边形只有一个路径，我们可以调用getPath（）//返回LatLng的MVCArray。 var vertices = this.getPath（）; var contentString ='< b>我的多边形< / b>< br>'+'点击位置：< br>'+ event.latLng.lat（）+'，'+ event.latLng.lng（）+ '<峰; br>'; //遍历顶点。 for（var i = 0; i< vertices.getLength（）; i ++）{var xy = vertices.getAt（i）; contentString + ='< br>'+'坐标'+ i +'：< br>'+ xy.lat（）+'，'+ xy.lng（）; } //替换信息窗口的内容和位置。 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>< / 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>

I use Google maps, I mark areas on the maps like that:

 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)
    ];

I want to achieve: place the label and the marker in the middle(approximately) of the marked red area.

instead of place it with static Latitude and Longitude(I have a lot of areas)

There is a way of doing so programmatically?

解决方案

The following code constructs a google.maps.Polygon and places a MapLabel at the center of its bounds.

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

code snippet:

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

这篇关于Google地图获取坐标的中心（将标签放置在多边形的中心）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！