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

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>

在我的控制器中，我使用谷歌位置自动完成服务来获取靠近用户当前位置的位置列表。当我开始打字时，它确实会在下拉列表中显示位置列表。

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

但是，我无法从下拉列表中选择选项。它在背景中不断移动地图。

我尝试设置以下属性

map.setClickable( false )

然而，这会使地图固定。我不希望地图是固定的，如果用户愿意的话，他应该可以移动地图

我还想把下拉列表中选择的位置传递到地图上。我想使用这些信息在地图上添加一个标记。我正在努力让它发挥作用。

有人能做到这一点吗？如果是，那么任何指针或示例代码都会有所帮助。

注意：当使用谷歌地图api+谷歌位置api时，我可以让它工作。我想使用cordova谷歌地图插件，因为我听说它比直接使用谷歌地图api更具性能。

问候

Answer 1

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

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

使用ionic，您可以使用以下插件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
});

另一点：地图插件支持地理编码，请查看文档：https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Geocoder