为了账号安全,请及时绑定邮箱和手机立即绑定

Google Map API v3-设置范围和中心

Google Map API v3-设置范围和中心

缥缈止盈 2019-10-23 12:45:56
我最近切换到了Google Maps API V3。我正在研究一个从数组绘制标记的简单示例,但是我不知道如何相对于标记自动居中和缩放。我搜寻了包括谷歌自己的文档在内的最高和最低值,但没有找到明确的答案。我知道我可以简单地取坐标的平均值,但是如何设置缩放比例呢?function initialize() {  var myOptions = {    zoom: 10,    center: new google.maps.LatLng(-33.9, 151.2),    mapTypeId: google.maps.MapTypeId.ROADMAP  }  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);  setMarkers(map, beaches);}var beaches = [  ['Bondi Beach', -33.890542, 151.274856, 4],  ['Coogee Beach', -33.423036, 151.259052, 5],  ['Cronulla Beach', -34.028249, 121.157507, 3],  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],  ['Maroubra Beach', -33.450198, 151.259302, 1]];function setMarkers(map, locations) {  var image = new google.maps.MarkerImage('images/beachflag.png',      new google.maps.Size(20, 32),      new google.maps.Point(0,0),      new google.maps.Point(0, 32));    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',      new google.maps.Size(37, 32),      new google.maps.Point(0,0),      new google.maps.Point(0, 32));      var lat = map.getCenter().lat();       var lng = map.getCenter().lng();        var shape = {      coord: [1, 1, 1, 20, 18, 20, 18 , 1],      type: 'poly'  };  for (var i = 0; i < locations.length; i++) {    var beach = locations[i];    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);    var marker = new google.maps.Marker({        position: myLatLng,        map: map,        shadow: shadow,        icon: image,        shape: shape,        title: beach[0],        zIndex: beach[3]    });  }}
查看完整描述

3 回答

?
慕码人8056858

TA贡献1803条经验 获得超6个赞

是的,只需声明新的bounds对象。


 var bounds = new google.maps.LatLngBounds();

然后对于每个标记,扩展您的bounds对象:


bounds.extend(myLatLng);

map.fitBounds(bounds);

API:google.maps.LatLngBounds


查看完整回答
反对 回复 2019-10-23
?
收到一只叮咚

TA贡献1821条经验 获得超4个赞

一切都排序了-请查看最后几行代码-(bounds.extend(myLatLng); map.fitBounds(bounds);)


function initialize() {

  var myOptions = {

    zoom: 10,

    center: new google.maps.LatLng(0, 0),

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  var map = new google.maps.Map(

    document.getElementById("map_canvas"),

    myOptions);

  setMarkers(map, beaches);

}


var beaches = [

  ['Bondi Beach', -33.890542, 151.274856, 4],

  ['Coogee Beach', -33.923036, 161.259052, 5],

  ['Cronulla Beach', -36.028249, 153.157507, 3],

  ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],

  ['Maroubra Beach', -33.950198, 151.159302, 1]

];


function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('images/beachflag.png',

    new google.maps.Size(20, 32),

    new google.maps.Point(0,0),

    new google.maps.Point(0, 32));

  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

    new google.maps.Size(37, 32),

    new google.maps.Point(0,0),

    new google.maps.Point(0, 32));

  var shape = {

    coord: [1, 1, 1, 20, 18, 20, 18 , 1],

    type: 'poly'

  };

  var bounds = new google.maps.LatLngBounds();

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

    var beach = locations[i];

    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);

    var marker = new google.maps.Marker({

      position: myLatLng,

      map: map,

      shadow: shadow,

      icon: image,

      shape: shape,

      title: beach[0],

      zIndex: beach[3]

    });

    bounds.extend(myLatLng);

  }

  map.fitBounds(bounds);

}

查看完整回答
反对 回复 2019-10-23
  • 3 回答
  • 0 关注
  • 607 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信