admin管理员组文章数量:1332107
I am trying to find a better way to center my google map.
I've already written code to add in Markers to Outline and area squarely of which is being store in an array: Coords[i], in-which when returning to the map after save, it centers the map window based on the "first marker" lat/lng coordinates Coords[0].
I am trying to figure out a better way to center the map where there is adequate space around my outline area.
I've try doing it on Dragend, which works somewhat:
google.maps.event.addListener(this.map, 'dragend', function(mapEvent) {
var lat = mapEvent.getCenter() .lat(),
lng = mapEvent.getCenter() .lng(),
console.log(lat + " " + lng + " " + this);
});
But it keeps throwing an error saying: "Unable to get property 'getCenter' of undefined or null reference"
Can someone tell me what I am doing wrong OR tell be a better way to achieve what I'm trying to do?
As, another option
It would be nice if possible if I can keep the first marker [0] the centering marker as it is already, But don't allow it to outline... just the markers 1 + and on .... But I don't know how to modify my code to do that.
Just looking for a solution that works.
My plete Code is here:
I am trying to find a better way to center my google map.
I've already written code to add in Markers to Outline and area squarely of which is being store in an array: Coords[i], in-which when returning to the map after save, it centers the map window based on the "first marker" lat/lng coordinates Coords[0].
I am trying to figure out a better way to center the map where there is adequate space around my outline area.
I've try doing it on Dragend, which works somewhat:
google.maps.event.addListener(this.map, 'dragend', function(mapEvent) {
var lat = mapEvent.getCenter() .lat(),
lng = mapEvent.getCenter() .lng(),
console.log(lat + " " + lng + " " + this);
});
But it keeps throwing an error saying: "Unable to get property 'getCenter' of undefined or null reference"
Can someone tell me what I am doing wrong OR tell be a better way to achieve what I'm trying to do?
As, another option
It would be nice if possible if I can keep the first marker [0] the centering marker as it is already, But don't allow it to outline... just the markers 1 + and on .... But I don't know how to modify my code to do that.
Just looking for a solution that works.
My plete Code is here: http://pastiebin./embed/593d6d809e2f0
Share Improve this question edited Dec 30, 2020 at 8:07 samjco- asked Jun 11, 2017 at 16:12 samjco-samjco- 4096 silver badges14 bronze badges 3- Update my question with pics and link to full code – samjco- Commented Jun 11, 2017 at 16:44
- 1 Are you trying to center on one Polygon? Multiple Polygons? Why do you want to center on dragend? Your question is unclear about what you are trying to achieve. – MrUpsidown Commented Jun 12, 2017 at 10:28
- possible duplicate of Google Maps get the center of coordinates (place label at center of polygon) – geocodezip Commented Jun 12, 2017 at 11:04
2 Answers
Reset to default 8You can use a LatLngBounds
object. Loop through your Polygons if you have more than one and extend your bounds object with each path coordinates.
LatLngBounds
You can then make your map fit the bounds object so it will zoom and center accordingly by using map.fitBounds()
.
fitBounds
If you use multi-paths Polygon, make sure you use getPaths
method instead of getPath
as in the code below.
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var polygon = new google.maps.Polygon({
editable: true,
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#00FF00',
fillOpacity: .6,
paths: [
new google.maps.LatLng(39, 4),
new google.maps.LatLng(34, 24),
new google.maps.LatLng(43, 24),
new google.maps.LatLng(39, 4)],
map: map
});
// Create the bounds object
var bounds = new google.maps.LatLngBounds();
// Get paths from polygon and set event listeners for each path separately
polygon.getPath().forEach(function (path, index) {
bounds.extend(path);
});
// Fit Polygon path bounds
map.fitBounds(bounds);
}
initialize();
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis./maps/api/js"></script>
Ok I just figured out a way! I simply grabbed the lat/lng coordinates of the center of the polygon drawn and centered my whole map with that.
var bounds = new google.maps.LatLngBounds();
var i;
//Get Center of Saved Coordinates of the drawn polygons
for (var i = 0; i < values["coords"].length; i++) {
bounds.extend(values["coords"][i]);
}
var movemaplat = bounds.getCenter().lat();
var movemaplng= bounds.getCenter().lng();
console.log("MY MAP CENTER " + movemaplat + ", " + movemaplng);
Thanks to @Daniel Vassallo's answer here: How to get the center of a polygon in google maps v3?
本文标签: javascriptCenter a boundary of polygons in Google MapsStack Overflow
版权声明:本文标题:javascript - Center a boundary of polygons in Google Maps - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742232690a2437511.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论