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

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

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


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

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


bounds.extend(myLatLng);

map.fitBounds(bounds);

API:google.maps.LatLngBounds


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

一切都排序了-请查看最后几行代码-(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
?
动漫人物

我对Google Maps api v3的建议是(不要认为它可以更有效地完成):


gmap : {

    fitBounds: function(bounds, mapId)

    {

        //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"

        if (bounds==null) return false;

        maps[mapId].fitBounds(bounds);

    }

}

结果,您将使地图窗口中的所有点都适合边界。


示例可以完美运行,您可以在这里免费进行检查:www.zemelapis.lt


查看完整回答
反对 回复 2019-10-23

添加回答

回复

举报

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