在谷歌地图API v3中自动居中多个标记的地图

这是我用来显示一个有3个针/标记的地图:

<script>
  function initialize() {
    var locations = [
      ['DESCRIPTION', 41.926979, 12.517385, 3],
      ['DESCRIPTION', 41.914873, 12.506486, 2],
      ['DESCRIPTION', 41.918574, 12.507201, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(41.923, 12.513),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

<div id="map" style="width: 900px; height: 700px;"></div>

我正在寻找的是一种避免必须“手动”找到地图中心的方法:new google.maps.LatLng(41.923, 12.513)。是否有一种方法可以自动将地图置于三个坐标的中心?

当前回答

我有一个情况，我不能改变旧的代码，所以添加了这个javascript函数来计算中心点和缩放级别:

//input var tempdata = ["18.9400|72.8200-19.1717|72.9560-28.6139|77.2090"]; function getCenterPosition(tempdata){ var tempLat = tempdata[0].split("-"); var latitudearray = []; var longitudearray = []; var i; for(i=0; i<tempLat.length;i++){ var coordinates = tempLat[i].split("|"); latitudearray.push(coordinates[0]); longitudearray.push(coordinates[1]); } latitudearray.sort(function (a, b) { return a-b; }); longitudearray.sort(function (a, b) { return a-b; }); var latdifferenece = latitudearray[latitudearray.length-1] - latitudearray[0]; var temp = (latdifferenece / 2).toFixed(4) ; var latitudeMid = parseFloat(latitudearray[0]) + parseFloat(temp); var longidifferenece = longitudearray[longitudearray.length-1] - longitudearray[0]; temp = (longidifferenece / 2).toFixed(4) ; var longitudeMid = parseFloat(longitudearray[0]) + parseFloat(temp); var maxdifference = (latdifferenece > longidifferenece)? latdifferenece : longidifferenece; var zoomvalue; if(maxdifference >= 0 && maxdifference <= 0.0037) //zoom 17 zoomvalue='17'; else if(maxdifference > 0.0037 && maxdifference <= 0.0070) //zoom 16 zoomvalue='16'; else if(maxdifference > 0.0070 && maxdifference <= 0.0130) //zoom 15 zoomvalue='15'; else if(maxdifference > 0.0130 && maxdifference <= 0.0290) //zoom 14 zoomvalue='14'; else if(maxdifference > 0.0290 && maxdifference <= 0.0550) //zoom 13 zoomvalue='13'; else if(maxdifference > 0.0550 && maxdifference <= 0.1200) //zoom 12 zoomvalue='12'; else if(maxdifference > 0.1200 && maxdifference <= 0.4640) //zoom 10 zoomvalue='10'; else if(maxdifference > 0.4640 && maxdifference <= 1.8580) //zoom 8 zoomvalue='8'; else if(maxdifference > 1.8580 && maxdifference <= 3.5310) //zoom 7 zoomvalue='7'; else if(maxdifference > 3.5310 && maxdifference <= 7.3367) //zoom 6 zoomvalue='6'; else if(maxdifference > 7.3367 && maxdifference <= 14.222) //zoom 5 zoomvalue='5'; else if(maxdifference > 14.222 && maxdifference <= 28.000) //zoom 4 zoomvalue='4'; else if(maxdifference > 28.000 && maxdifference <= 58.000) //zoom 3 zoomvalue='3'; else zoomvalue='1'; return latitudeMid+'|'+longitudeMid+'|'+zoomvalue; }

2015-05-30 08:09:26

其他回答

我认为你必须计算纬度和经度最小值: 下面是一个示例函数，用来集中你的观点:

//Example values of min & max latlng values
var lat_min = 1.3049337;
var lat_max = 1.3053515;
var lng_min = 103.2103116;
var lng_max = 103.8400188;

map.setCenter(new google.maps.LatLng(
  ((lat_max + lat_min) / 2.0),
  ((lng_max + lng_min) / 2.0)
));
map.fitBounds(new google.maps.LatLngBounds(
  //bottom left
  new google.maps.LatLng(lat_min, lng_min),
  //top right
  new google.maps.LatLng(lat_max, lng_max)
));

2013-03-30 15:08:26

这对我来说在Angular 9中是有效的:

  import {GoogleMap, GoogleMapsModule} from "@angular/google-maps";
  @ViewChild('Map') Map: GoogleMap; /* Element Map */

  locations = [
   { lat: 7.423568, lng: 80.462287 },
   { lat: 7.532321, lng: 81.021187 },
   { lat: 6.117010, lng: 80.126269 }
  ];

  constructor() {
   var bounds = new google.maps.LatLngBounds();
    setTimeout(() => {
     for (let u in this.locations) {
      var marker = new google.maps.Marker({
       position: new google.maps.LatLng(this.locations[u].lat, 
       this.locations[u].lng),
      });
      bounds.extend(marker.getPosition());
     }

     this.Map.fitBounds(bounds)
    }, 200)
  }

它会自动根据指定的位置将地图居中。

结果:

2020-08-18 22:10:26

另一个实现，基于前面的答案，但更精简:

export class MapComponent {
    @ViewChild(GoogleMap) map: GoogleMap;

    markerList = [
        {
            lat: 41.926979,
            lng: 12.517385
        },
        {
            lat: 41.914873,
            lng: 12.506486
        },
        {
            lat: 41.918574, 
            lng: 12.507201
        }
    ]

    centralize() {
        const bounds = new google.maps.LatLngBounds();
        this.markerList.forEach((marker) => {
            bounds.extend(new google.maps.LatLng(marker.lat, marker.lng))
        })
        this.map.fitBounds(bounds)
    }
}

你不需要创建一个“google.maps”。标记”，你可以从LatLng创建一个实例，并直接将其作为参数传递给边界扩展函数。

2021-08-03 10:23:16

我使用上面的方法来设置地图边界，然后，而不是重置缩放级别，我只需计算平均LAT和平均LON，并将中心点设置为该位置。我把所有的lat值加到latTotal中，把所有的lon值加到lontotal中，然后除以标记的数量。然后我将地图中心点设置为这些平均值。

latCenter = latTotal / markercount; lonCenter = lontotal / markercount;

2014-12-31 15:44:47

我已经尝试了这个主题的所有答案，但下面这个在我的项目中工作得很好。

Angular 7和AGM Core 1.0.0-beta.7

<agm-map [latitude]="lat" [longitude]="long" [zoom]="zoom" [fitBounds]="true">
  <agm-marker latitude="{{localizacao.latitude}}" longitude="{{localizacao.longitude}}" [agmFitBounds]="true"
    *ngFor="let localizacao of localizacoesTec">
  </agm-marker>
</agm-map>

属性[agmFitBounds]="true"在agm-marker和[fitBounds]="true"在agm-map做这项工作

2020-11-05 19:02:35

在谷歌地图API v3中自动居中多个标记的地图

推荐文章

最新文章

标签