Question

我正在创建一个使用google-maps cordova plugin的应用程序。我正在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

Answer 2

@Keerthivasan，你有两（2）个选择。

报告插件作者的错误。
不使用插件。我已经让google地图在没有插件的情况下工作了。

我只使用Google拥有的标准JS库，并直接从手机加载所有资产。如果您对＃2感兴趣，那么这是您的链接

最好的运气

Answer 3

为什么会发生这种情况是因为地图不在您的应用中，而是在其下方。你可能已经知道了; cordova应用程序在本机应用程序内的Web视图中运行。您在此插件中使用的地图不在本机应用程序中的Web视图中。据我所知，网页视图的一部分设置为透明，以显示下方的地图。

我想这是出于性能原因而做的;因为地图将在原生应用程序中运行 - 例如java - 比使用JavaScript的Web视图要快得多 - 所以我相信。我个人不建议使用JavaScript版本，只是解决这个问题。

解决这个问题的方法不止一种。我所做的是在标题中有一个more按钮。单击它时，如果用户点击背景或更多列表中的任何按钮，我会运行setClickable(false)，然后执行操作，最后setClickable(true)。

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

3 个答案: