无法点击谷歌地图上的按钮覆盖

Question

我正在创建一个使用google-maps cordova插件的应用程序.我正在div中创建一个地图map_canvas

var mapDiv = document.getElementById("map_canvas");
      // Initialize the map plugin
      var map = plugin.google.maps.Map.getMap(mapDiv);
      $scope.mapobj = map;
      // You have to wait the MAP_READY event.
      map.on(plugin.google.maps.event.MAP_READY, onMapInit);
      var LOCATION;

      function onMapInit(map) {
        map.clear();
        LOCATION = new plugin.google.maps.LatLng( $scope.lat,$scope.longi);
        map.setMapTypeId(plugin.google.maps.MapTypeId.ROADMAP);
        map.animateCamera({
          'target': LOCATION,
          'zoom': 18
        });
        map.addMarker({
          'position': LOCATION,
          'title': $scope.markertitle,
          'animation': plugin.google.maps.Animation.DROP
        }, function (marker) {
          marker.showInfoWindow();
        });
      }

我在地图div中放了一个按钮.但是,该按钮不可点击.但是,当我使地图无法点击时,

map.setClickable(false);

按钮开始工作.但是,我也希望地图可以点击.因此,用户可以移动地图以更好地查看路线.为什么地图不允许按钮可点击？我想获得有关幕后的更多信息.我想到的其他工作是减少地图div的高度并将按钮放在它下面.

Answer 1

Actualy这很简单.您所要做的就是将要使用的html元素放在地图容器中.

    <div id="map_canvas">
        <div id="searchBox">
          <input type="text" id="query" size="30" />
          <button id="searchBtn">Search</button>
        </div>
    </div>

资料来源:https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map#how-does-the-plugin-work