我一直在使用 allenhwkim 创建的很棒的 ngMap 指令,但在设备上显示信息窗口的标记时遇到问题。我尝试了针对不同元素嵌套“data-tap-disabled='true'”和“scroll='false'”的不同方法,但没有成功。
我真的很喜欢他组合在一起的markercluster模块,所以我一直试图依赖它,因为我们需要在大面积上绘制多个标记。存储库中有一个很好的示例,其中使用自定义指令绘制了全局各地的商店,当放大到足以看到单个标记时,当单击事件被触发时,会出现一个包含一些数据的信息窗口。从 Chrome 进行测试时一切正常,但在 Android 设备和 iOs 模拟器上进行测试时,信息窗口不会出现。但是,似乎正在注册点击,因为设备上的屏幕/ map 发生了变化,就好像信息窗口应该出现一样(就像从 Chrome 进行的测试一样)。
myDirective.js
.directive('stuffInfo', function(SomeData) {
var StuffInfo = function(s, e, a) {
this.scope = s;
this.element = e;
this.attrs = a;
this.show = function(stuffId) {
this.element.css('display', 'block');
var showStuff = SomeData.getDataStuff(stuffId);
var someMoreStuff = showStuff.stuff_users;
s.someMoreStuff = someMoreStuff;
this.s.$apply();
}
this.hide = function() {
this.element.css('display', 'none');
}
};
return {
templateUrl: '/templates/stuff-info.html',
link: function(scope, e, a) {
scope.gameInfo= new GameInfo(scope, e, a);
}
}
})
map.html
<div id="map-container">
<map zoom="12" center="[34.784426, -92.333411]" disable-default-u-i="true">
</map>
<div add-stuff-info="" class="custom-control">Add Stuff</div>
</div>
Controller 附加点击监听器
var marker = new google.maps.Marker(stuff);
google.maps.event.addListener(marker, 'click', function() {
$scope.stuff = this;
map.setCenter(this.getPosition());
$scope.stuffInfo.show($scope.stuff._id);
});
样式.css
div#map-container div[add-stuff-info] { position:absolute;显示:无;顶部:5 像素;右:5px;底部:5px;宽度:40% } div#map-container div[add-stuff-info] a.hide-link { float:right } div#map-container div[add-stuff-info] 表 { width: 100% } div#map-container div[add-stuff-info] 表 td { 文本对齐:左;内边距:5px;边框:1px 实线 #ccc }
我似乎无法弄清楚这里的问题。我意识到的一件事是删除 this.element.css('display', 'block'); 时从 Chrome 的指令和测试来看,浏览器的行为似乎与设备一样 - map 会发生变化,因为它将显示信息窗口...
最佳答案
我也遇到了同样的问题! 包含标签 data-tap-disabled="true"
喜欢:
<ion-content data-tap-disabled="true" class="has-header padding">
希望对你有帮助!!
关于ionic-framework - Ionic ngMap 信息窗口无法在设备上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29269747/