В гугл карте api 3 найдите центр многоугольника и отобразите строку в центре многоугольника или круга

Question

В гугл карте api 3 найдите центр многоугольника и отобразите строку в центре многоугольника или круга

Мне нужно нарисовать многоугольник или кружок, который является областью доставки в интернет-магазине, и показать текст цены в стороне каждого многоугольника зон доставки.

Ниже приведен код для рисования каждого многоугольника и круга.

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');
});
}

Я проверил варианты, чтобы найти центр многоугольника, но это не работает для меня, и включены выше.

1

google-maps google-maps-api-3 jquery php polygon

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Это решение работает для меня отлично и соответствует тому же сценарию, который вы смотрите.

// 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');
});
}

Прокомментируйте, если вам нужна дополнительная помощь по этому вопросу.

1