如何在GMAP3中使用KeyDragZoom?

时间:2012-06-13 11:11:42

标签: jquery google-maps google-maps-api-3 keydragzoom

文档显示 - http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/examples.html

     function init(){
      var myOptions = { 
        zoom: 13, 
        center: new google.maps.LatLng(49.2903, -123.1294), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       };
      var map = new google.maps.Map(document.getElementById("map"), myOptions); 
      map.enableKeyDragZoom({
            boxStyle: {
              border: "thick dashed black",
              backgroundColor: "red",
              opacity: 0.5
            },
            paneStyle: {
              backgroundColor: "gray",
              opacity: 0.2
            }
      });
    }

但因为我使用的是gmap3我不确定如何实现? 这是我的代码来初始化地图

     $('#dispatcher').gmap3(
      {action: 'init',
        options:{
          center:[53.9783997, -1.5666347],
          zoom:6,
          mapTypeId: google.maps.MapTypeId.MAP,
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          },
          navigationControl: true,
          scrollwheel: true,
          streetViewControl: true
        }
      }

任何想法? 干杯

2 个答案:

答案 0 :(得分:2)

试试这个:

$('#dispatcher').gmap3({action:'get'}).enableKeyDragZoom({
            boxStyle: {
              border: "thick dashed black",
              backgroundColor: "red",
              opacity: 0.5
            },
            paneStyle: {
              backgroundColor: "gray",
              opacity: 0.2
            }
      });

.gmap3({action:'get'})返回google.maps.Map个对象。因此,您可以执行google.maps.Map对象可以执行的任何操作,包括enableKeyDragZoom操作。

答案 1 :(得分:0)

是的,或者你也可以使用“init”中的回调函数,包括地图:

    callback: function(map){
       map.enableKeyDragZoom({
        boxStyle: {
          border: "thick dashed black",
          backgroundColor: "red",
          opacity: 0.5
        },
        paneStyle: {
          backgroundColor: "gray",
          opacity: 0.2
                }
        });
    }