Question

我正在尝试使用Ionic + Cordova构建应用程序。我想在我的应用中显示地图。我正在使用cordova谷歌地图插件，我能够成功渲染地图。现在我想做的是在地图上放置一个搜索框。当用户开始输入时，搜索应该显示靠近用户当前位置的位置建议。

我使用以下代码在地图顶部添加搜索框：

<div style="width:100%;height:400px" id="map_canvas">
     <div id="searchBox">
        <input type="text" id="query" size="30" />            
     </div>
 </div>

在我的控制器中，我使用Google地方自动填充服务来获取靠近用户当前位置的地点列表。当我开始输入时，它会显示下拉列表中的位置列表。

   var input = document.getElementById('query');
   var autocomplete = new google.maps.places.Autocomplete(input);

但是我无法从下拉列表中选择选项。它继续在后台移动地图。

我尝试设置以下属性

map.setClickable( false )

然而，这使地图得以修复。我不希望修复地图，如果他愿意，用户应该可以移动地图。

我还想将下拉菜单中选择的位置传递给地图。我想使用此信息向地图添加标记。我正在努力让这个工作。

有人能够让这个工作吗？如果是，任何指针或示例代码都会有所帮助。

注意：当使用谷歌地图api + google places api时，我能够正常工作。我想使用cordova谷歌地图插件，因为我听说它比直接使用谷歌地图api更高效。

此致

Answer 1

如果你正在使用插件，使用股票谷歌自动完成是一个问题，因为结果被添加到DOM上，并且可能会在视觉上产生不可预测的结果。

我发现使用自动完成服务，并处理所有下拉结果解析等更容易。

使用离子，你可以使用像https://github.com/israelidanny/ion-google-place这样的插件或者查看代码集中包含示例代码的http://devfanaticblog.com/google-places-autocomplete-with-ionic-framework/

我发现有一个插件很棒，但我无法找到它的链接。

Answer 2

你可以这样做（我使用jQuery）：

$("#query").on("blur", function () {
            map.setClickable(true);
        }).on("focus", function () {
            map.setClickable(false);
        }).on("keyup", function () {
            event.stopPropagation();
            event.preventDefault();
            // searching
        });

另一点：地图插件支持地理编码，请查看文档：{{3}}

使用cordova谷歌地图插件和谷歌将api放在一起

2 个答案: