标记点击事件未在地图控制器中为ui-gmap-marker触发

时间:2015-05-30 18:59:33

标签: javascript angularjs google-maps google-maps-api-3

我有一个带有谷歌地图控制器的应用程序。我在手机上运行时,点击事件不会触发。但是,当我在纹波仿真器上测试时,click事件会触发。下面是地图页面和相应的Controller。

<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center page-title">Map MapController2</div>
</ons-toolbar>

<ui-gmap-google-map center="map.center" refresh="true" zoom="map.zoom" draggable="true">

    <ui-gmap-marker idkey="marker.id" ng-repeat="marker in map.markers" coords="marker" icon="marker.icon" click="onMarkerClicked()">
        <ui-gmap-window show="windowOptions" coords="marker" closeClick="closeClick">
            <div style="color: black">
        {{marker.title}}<br/>
        at {{marker}}
            </div>
        </ui-gmap-window>
    </ui-gmap-marker>

</ui-gmap-google-map>

// Map Controller
app.controller('MapController2', function($scope, $rootScope, $http) {
    var data = {};

    data.map = {
        zoom: 12,
        center: {
            latitude: 27.949,
            longitude: -81.958
        },
        markers: [
            {
                id: 1,
                icon: 'img/blue_marker.png',
                latitude: 27.949,
                longitude: -81.999,
                title: 'This is where you are asdf;lkj  asdf;lj  ;asdf;lkasf; ;jasdfpoiarwtonmsad'
            },
            {
                id: 2,
                latitude: 27.949,
                longitude: -81.958,
                title: 'Job Site'
            },
            {
                id: 3,
                icon: 'img/plane.png',
                latitude: 27.949,
                longitude: -81.94,
                title: 'Airport'
            }]
    };

    $scope.windowOptions = false;

    $scope.onMarkerClicked = function () {
        this.windowOptions = !this.windowOptions;
    };

    $scope.closeClick = function () {
        this.windowOptions = false;
    };

    $scope.map = data.map;
});

1 个答案:

答案 0 :(得分:15)

经过大量挖掘后,我找到了解决方案。我正在使用的HTML如下。我正在使用“ui-gmap-markers”(带有“s”)而不是“ui-gmap-marker”。此外,我必须使用'data-tap-disabled =“true”'封装谷歌地图,以使其在手机上运行。

RAND()

然后控制器看起来像这样:

SELECT CAST(RAND() * 298 + 3 AS INT)