新手中心/设置地图缩放以覆盖所有可见标记？ [复制]

Posted 2023-02-23

【中文标题】新手中心/设置地图缩放以覆盖所有可见标记？ [复制]

【英文标题】：Newbie Center/Set Zoom of Map to cover all visible Markers? [duplicate]

【发布时间】：2016-11-01 19:16:04

【问题描述】：

我不是 Java 程序员，但我正在使用我发现的一些代码来创建一个带有多个标记的地图，以便我可以在我的应用程序中显示它。我希望定位地图，使其位于所有标记的中心，缩小以查看所有标记。我找到了一些应该执行此操作的代码，但我不知道将其放在我拥有的代码中的哪个位置。我也有点不确定我拥有的代码是否良好且高效。非常感激任何的帮助。我认为我需要的代码是

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) 
  bounds.extend(markers[i].getPosition());


map.fitBounds(bounds);

我的代码是.....

var locations = [
['C1',-36.8604268000000,174.8360801000000,13140,'521 3131','E','Keith','','',6.72],
['C2',-36.9127356000000,174.9177729000000,16638,'535 5710','E','Debra','[e-mail]','027 1234546',15.59],
['C3',-36.9045042000000,174.8237394000000,28477,'725 5566','E','Yolande','[e-mail]','027 1234546',8.31],
['C4',-36.8945087000000,174.8511699000000,25075,'70 5055','E','Vanessa','[e-mail]','027 1234546',9.44],
['C5',-36.9045042000000,174.8237394000000,25854,'25 5566','E','Yolande','[e-mail]','027 1234546',8.31],
['C6',-36.8845042000000,174.8499481000000,21292,'7 3056','E','Paul','[e-mail]','027 1234546',8.79],
['C7',-36.8927054000000,174.8331774000000,30664,'06695791777','Not Rated','Jackie','[e-mail]','027 1234546',8.01],
['C8',-36.9046501000000,174.8236843000000,25146,'789 525 3123','E','Debra','','02027 1234546',8.31],
['C9',-36.9338100000000,174.8967737000000,23342,'9274 4620','E','Janneane','[e-mail]','',15.29],
['C10',-36.9222589000000,174.8529857000000,21336,'333 0793','E','Cynthia','[e-mail]','027 123 935',11.53],
['Test Client',-36.8484597000000,174.7633315000000,13983,'0652988421','E','Mickey Mouse','[e-mail]','',0.10],
['Test Client 9 ACC',-36.8484597000000,174.7633315000000,27264,'8956398842','E','Matt','[e-mail]','021 288 9999311',0.10],
['Test Client 6',-36.9316457000000,174.5736167000000,23605,'33 814 9577','E','John','[e-mail]','027893068',19.17],
['Test Client 7',-36.8658161000000,174.5801917000000,22566,'44 232 0082','E','Yolanda','[e-mail]','02374585',16.33],

];

function initialize() 

var myOptions = 
center: new google.maps.LatLng(-36.8484480000000,174.7621910000000),
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("default"),
    myOptions);

setMarkers(map,locations)



function setMarkers(map,locations)

   var marker, i

for (i = 0; i < locations.length; i++)


var name = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var code =  locations[i][3]
var phone =  locations[i][4]
var rating =  locations[i][5]
var contact =  locations[i][6]
var contactemail =  locations[i][7]
var contactmobile =  locations[i][8]
var Kms =  locations[i][9]

latlngset = new google.maps.LatLng(lat, long);

var marker = new google.maps.Marker(
       map: map, title: name , position: latlngset
     );
     map.setCenter(marker.getPosition())

      var content = "Client: " + name + '</p>' + '</h3>' + "Client No: " + code + '</p>' +  '</h3>' + "Telephone: " + phone + '</p>' +  '</h3>' + "Rating: " + rating + '</p>' +  '</h3>' + "Contact Name: " +  contact + '</p>' +  '</h3>' + "Contact Email: " + contactemail + '</p>' +  '</h3>' + "Contact Mobile: " + contactmobile + '</p>' +  '</h3>' + "Kms From Start Point: " + Kms

var infowindow = new google.maps.InfoWindow()

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow)
     return function() 
        infowindow.setContent(content);
        infowindow.open(map,marker);
     ;
 )(marker,content,infowindow));

【参考方案1】：

var markers = []; //some array
var locations = [
  ['C1', -36.8604268000000, 174.8360801000000, 13140, '521 3131', 'E', 'Keith', '', '', 6.72],
  ['C2', -36.9127356000000, 174.9177729000000, 16638, '535 5710', 'E', 'Debra', '[e-mail]', '027 1234546', 15.59],
  ['C3', -36.9045042000000, 174.8237394000000, 28477, '725 5566', 'E', 'Yolande', '[e-mail]', '027 1234546', 8.31],
  ['C4', -36.8945087000000, 174.8511699000000, 25075, '70 5055', 'E', 'Vanessa', '[e-mail]', '027 1234546', 9.44],
  ['C5', -36.9045042000000, 174.8237394000000, 25854, '25 5566', 'E', 'Yolande', '[e-mail]', '027 1234546', 8.31],
  ['C6', -36.8845042000000, 174.8499481000000, 21292, '7 3056', 'E', 'Paul', '[e-mail]', '027 1234546', 8.79],
  ['C7', -36.8927054000000, 174.8331774000000, 30664, '06695791777', 'Not Rated', 'Jackie', '[e-mail]', '027 1234546', 8.01],
  ['C8', -36.9046501000000, 174.8236843000000, 25146, '789 525 3123', 'E', 'Debra', '', '02027 1234546', 8.31],
  ['C9', -36.9338100000000, 174.8967737000000, 23342, '9274 4620', 'E', 'Janneane', '[e-mail]', '', 15.29],
  ['C10', -36.9222589000000, 174.8529857000000, 21336, '333 0793', 'E', 'Cynthia', '[e-mail]', '027 123 935', 11.53],
  ['Test Client', -36.8484597000000, 174.7633315000000, 13983, '0652988421', 'E', 'Mickey Mouse', '[e-mail]', '', 0.10],
  ['Test Client 9 ACC', -36.8484597000000, 174.7633315000000, 27264, '8956398842', 'E', 'Matt', '[e-mail]', '021 288 9999311', 0.10],
  ['Test Client 6', -36.9316457000000, 174.5736167000000, 23605, '33 814 9577', 'E', 'John', '[e-mail]', '027893068', 19.17],
  ['Test Client 7', -36.8658161000000, 174.5801917000000, 22566, '44 232 0082', 'E', 'Yolanda', '[e-mail]', '02374585', 16.33],

];

function initialize() 

  var myOptions = 
    center: new google.maps.LatLng(-36.8484480000000, 174.7621910000000),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  ;
  var map = new google.maps.Map(document.getElementById("default"),
    myOptions);

  setMarkers(map, locations)


function setMarkers(map, locations) 
  var bounds = new google.maps.LatLngBounds();
  var marker, i

  for (i = 0; i < locations.length; i++) 

    var name = locations[i][0]
    var lat = locations[i][1]
    var long = locations[i][2]
    var code = locations[i][3]
    var phone = locations[i][4]
    var rating = locations[i][5]
    var contact = locations[i][6]
    var contactemail = locations[i][7]
    var contactmobile = locations[i][8]
    var Kms = locations[i][9]

    latlngset = new google.maps.LatLng(lat, long);

    var marker = new google.maps.Marker(
      map: map,
      title: name,
      position: latlngset
    );
    map.setCenter(marker.getPosition())

    var content = "Client: " + name + '</p>' + '</h3>' + "Client No: " + code + '</p>' + '</h3>' + "Telephone: " + phone + '</p>' + '</h3>' + "Rating: " + rating + '</p>' + '</h3>' + "Contact Name: " + contact + '</p>' + '</h3>' + "Contact Email: " + contactemail + '</p>' + '</h3>' + "Contact Mobile: " + contactmobile + '</p>' + '</h3>' + "Kms From Start Point: " + Kms

    var infowindow = new google.maps.InfoWindow()

    google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) 
      return function() 
        infowindow.setContent(content);
        infowindow.open(map, marker);
      ;
    )(marker, content, infowindow));
    bounds.extend(marker.getPosition());
  
  map.fitBounds(bounds);

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#default 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px

<script src="https://maps.googleapis.com/maps/api/js?"></script>
<div id="default"></div>