2015-08-28 105 views
0

我已經創建谷歌地圖附近的美食廣場。在此標記顯示在瀏覽器中,並可點擊並提供信息窗口數據。但同樣的事情來到移動,標記顯示,當我點擊標記(點擊標記)信息窗口數據不顯示。我嘗試了很多論壇和更改很多代碼和調試但我找不到解決方案。標記點擊事件不適用於移動設備

foodFactory.js

var foodModule = angular.module('foodModule', []); 
foodModule.factory("foodFactory", ['$rootScope', '$window','foodServices', 'localStorageService', '$state', '$ionicLoading','$stateParams', 
    function($rootScope, $window, foodServices, localStorageService, $state, $ionicLoading, $stateParams, $cordovaGeolocation) { 

     var foodCourtmap = {}; 
     var marker = {}; 


     var directionsDisplay = new google.maps.DirectionsRenderer({'draggable': true }); 
     var directionsService = new google.maps.DirectionsService(); 

     foodCourtmap.centerOnMe = function() { 
      initialize();    
     }; 


     //intialze the google map it's show current location. 
    function initialize() { 

      var infowindow = new google.maps.InfoWindow(); 

       navigator.geolocation.getCurrentPosition(function(pos) { 

       foodCourtmap.latitude = pos.coords.latitude; 
       foodCourtmap.longitude = pos.coords.longitude; 

       var site = new google.maps.LatLng(foodCourtmap.latitude, foodCourtmap.longitude); 

       var currentmapOptions = { 
        center: site, 
        zoom: 10, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       //current location address based on Latitude and Longitude 
       var lat = parseFloat(foodCourtmap.latitude); 
       var lng = parseFloat(foodCourtmap.longitude); 
       var latlng = new google.maps.LatLng(lat, lng); 
       var geocoder = new google.maps.Geocoder(); 
       geocoder.geocode({ 
        'latLng': latlng 
       }, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
         if (results[1]) { 

          var contentString = "Location: " + results[1].formatted_address; 


          var marker = new google.maps.Marker({ 
           position: latlng, 
           map: map, 
           title: 'Current Location' 

          }); 
          google.maps.event.addListener(marker, 'click', function(event) { 

           infowindow.setContent(contentString); 
           infowindow.open(map, marker); 
          }); 
         } 
        } 
       }); 


       var map = new google.maps.Map(document.getElementById("food_map_canvas"), currentmapOptions); 

       // Places 
       var request = { 

        location:site, 
        radius: '5000', 
        name: ['restaurent'] 

       }; 

      var service = new google.maps.places.PlacesService(map); 
      service.search(request, callback); 

      function callback(results, status) 
      { 

       if (status == google.maps.places.PlacesServiceStatus.OK) { 

        for (var i = 0; i < results.length; i++) { 

         var place = results[i]; 
         createMarker(results[i]); 
        } 

       } 

       else 
       { 
         alert('No results found'); 
       } 

      } 

     var image = new google.maps.MarkerImage('img/Restaurant.png'); 


     function createMarker(place) { 

       var placeLoc = place.geometry.location; 

       var marker = new google.maps.Marker({ 
        map: map, 
        title: place.name+","+place.vicinity, 
        position: place.geometry.location, 
        icon:image 

       }); 

       var contentString = place.name+","+place.vicinity; 

       google.maps.event.addListener(marker, 'click', function() { 
           infowindow.setContent(contentString);       
           infowindow.open(map, marker); 
        });                
       } 

       foodCourtmap.map = map; 

      }); 

     }; 

     $rootScope.createFoodCourt = function() {       
         foodCourtmap.centerOnMe(); 
        } 

     return { 

      init: function() { 
       foodCourtmap.centerOnMe(); 
       return foodCourtmap; 
      } 
     }; 
    } 
]); 

food.html

<ion-view> 
<ion-content scroll="false"> 

<div id="food_map_canvas" data-tap-disabled="true" style="float:right;width:100%; height:100%"></div> 

</ion-content> 
</ion-view> 

所以,請人在這些方面提供幫助。

+0

https://docs.angularjs.org/api/ngTouch –

+0

我們如何使用ngTouch? –

+0

I haz plunker http://plnkr.co/edit/JjydPL –

回答

1

我有同樣的問題。當我們觸摸手機屏幕時,問題是「點擊」事件沒有觸發。所以我改變了'mousedown'事件。現在我可以添加標記

+0

但是,這不適用於移動設備中的所有標記事件。有時會觸發事件,有時則不觸發事件。與'點擊'事件相比,速度也很慢。 –

5

mousedown事件是一個改進,但是,在iOS上,事件仍然間歇性地爲我開火。經過更多調查後,我發現除了使用mousedown事件之外,還創建了一個可以在創建標記時通過設置optimized: false的100%時間的解決方案。

E.g.

var newMarker = new google.maps.Marker({ 
        position: latLong, 
        map: map, 
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png', 
        optimized: false 
       }); 

https://code.google.com/p/gmaps-api-issues/issues/detail?id=3834

+0

已優化:false(y) thxs u保存了我的時間,優化了:false工作正常現在,標記點擊事件適用於任何規模或任何縮放級別的Android設備:) – sms247

相關問題