Question

我需要绘制一个多边形或圆形，它是在线商店的交付区域，并在交付区域的每个多边形的侧面显示价格文本。

下面是绘制每个多边形和圆形的代码。

function initMap() {
  var bounds = new google.maps.LatLngBounds();
  var latlng = new google.maps.LatLng(-22.5747697,-43.857650); 
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  });

  // Define the LatLng coordinates for the polygon's path.
  var latlons = [{lat:-22.702726,lng:-43.517858},{lat:-22.704207,lng:-43.499491},{lat:-22.708606,lng:-43.481681},{lat:-22.71579,lng:-43.464968},{lat:-22.725539,lng:-43.449859},{lat:-22.73756,lng:-43.436813},{lat:-22.751487,lng:-43.426226},{lat:-22.766897,lng:-43.41842},{lat:-22.783323,lng:-43.413633},{lat:-22.800266,lng:-43.412012},{lat:-22.81721,lng:-43.413607},{lat:-22.833642,lng:-43.418371},{lat:-22.849062,lng:-43.42616},{lat:-22.863,lng:-43.436738},{lat:-22.875033,lng:-43.449784},{lat:-22.884794,lng:-43.464902},{lat:-22.891987,lng:-43.481632},{lat:-22.896392,lng:-43.499465},{lat:-22.897876,lng:-43.517858},{lat:-22.896392,lng:-43.536251},{lat:-22.891987,lng:-43.554084},{lat:-22.884794,lng:-43.570814},{lat:-22.875033,lng:-43.585931},{lat:-22.863,lng:-43.598978},{lat:-22.849062,lng:-43.609556},{lat:-22.833642,lng:-43.617345},{lat:-22.81721,lng:-43.622108},{lat:-22.800266,lng:-43.623703},{lat:-22.783323,lng:-43.622082},{lat:-22.766897,lng:-43.617296},{lat:-22.751487,lng:-43.60949},{lat:-22.73756,lng:-43.598903},{lat:-22.725539,lng:-43.585857},{lat:-22.71579,lng:-43.570748},{lat:-22.708606,lng:-43.554035},{lat:-22.704207,lng:-43.536225},{lat:-22.702726,lng:-43.517858}];

    var poly = new google.maps.Polygon({
      paths: latlons,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    poly.setMap(map);


  var center = poly.getBounds().getCenter();

  map.fitBounds(poly.getBounds());

  google.maps.event.addListener(map, "idle", function()
  {
      google.maps.event.trigger(map, 'resize');
  });
}

我已经检查了找到多边形中心的选项，但这对我来说并不适用于上面。

Answer 1

这个解决方案对我来说非常有效，也符合你正在寻找的相同场景。

// This example creates a simple polygon representing the Bermuda Triangle.
var gpolygons = [];

function initStaticMap() {
  var bounds = new google.maps.LatLngBounds();
  var latlng = new google.maps.LatLng(-22.5747697,-43.857650);
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  });

  // Define the LatLng coordinates for the polygon's path.
  <?php if($store_delivery_zone){ foreach($store_delivery_zone as $point){ ?>
  var coord<?php echo $point['delivery_zone_id']; ?> = <?php echo $point['polygon_points']; ?>;

  // Construct the polygon.
  var poly<?php echo $point['delivery_zone_id']; ?> = new google.maps.Polygon({
    paths: coord<?php echo $point['delivery_zone_id']; ?>,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  poly<?php echo $point['delivery_zone_id']; ?>.setMap(map);

  //Define position of label
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < coord<?php echo $point['delivery_zone_id']; ?>.length; i++) {
      bounds.extend(coord<?php echo $point['delivery_zone_id']; ?>[i]);
  }

  var myLatlng<?php echo $point['delivery_zone_id']; ?> = bounds.getCenter();

  var mapLabel<?php echo $point['delivery_zone_id']; ?> = new MapLabel({
      text: '<?php echo $point['delivery_cost']; ?>',
      position: myLatlng<?php echo $point['delivery_zone_id']; ?>,
      map: map,
      fontSize: 20,
      align: 'left'
  });
  mapLabel<?php echo $point['delivery_zone_id']; ?>.set('position', myLatlng<?php echo $point['delivery_zone_id']; ?>);
  var obj = {};
  obj.poly = poly<?php echo $point['delivery_zone_id']; ?>;
  obj.label = mapLabel<?php echo $point['delivery_zone_id']; ?>;
  gpolygons.push(obj);

  <?php } } ?>

  google.maps.event.addListener(map, "idle", function()
  {
      google.maps.event.trigger(map, 'resize');
  });
}

如果您需要任何进一步的帮助，请发表评论。

在Google map api 3中，找到多边形的中心，并在多边形或圆的中心显示字符串

1 个答案: