用标记和缩放搜索,用gmap3在标记附近拟合地图

时间:2013-04-30 07:40:51

标签: google-maps jquery-gmap3

我在谷歌地图中使用gmap3插件显示结果 有文本框字段,当有人在纽约镇输入例如“纽约”许多标记时,我想要地图缩放并适合纽约并在这个地方显示所有标记? 怎么办呢? 为了展示你想看的东西:padmapper.com

这是我的代码:

$(function(){
           $("#main-map").gmap3({
      map:{
        options:{
          center:["newyork"]
        }
      },
      marker:{
        values:[
          {latLng:[48.8620722, 2.352047]},
          {address:"86000 Poitiers, France"},
          {address:"66000 Perpignan, France"}
        ],
      }
    });
    $('#ok').click(function(){
      var addr = $('#Address').val();
      if ( !addr || !addr.length ) return;
      $("#main-map").gmap3({
        getlatlng:{
          address:  addr,
          callback: function(results){
            if ( !results ) return;
            $(this).gmap3({
              marker:{                              
                latLng:results[0].geometry.location,
                map:{
                    options:{
                    center: addr ,
                    zoom: 12
                    },
                  center: addr
                }
              }
            });
          }
        }
      });
    });

    $('#Address').keypress(function(e){
      if (e.keyCode == 13){
        $('#ok').click();
      }
    });
  });

和html代码

    <div id="main-map">
        </div>
    <input type="text" placeholder="City, Address, or Zip" name="goToAddress" style="margin-left:5px; width:215px;" id="Address">
<button id="ok" type="button">Go</button>

1 个答案:

答案 0 :(得分:3)

试试这个

$('#ok').click(function(){
  var addr = $('#Address').val();
  if ( !addr || !addr.length ) return;
  $("#main-map").gmap3({
    getlatlng:{
      address:  addr,
      callback: function(results){
        if ( !results ) return;
        $(this).gmap3({
          marker:{                              
            latLng:results[0].geometry.location,

          }
          {action: 'setCenter', args:[ result[0].geometry.location ]}
        });
      }
    }
  });
});