Google карта Автозумирование с несколькими маркерами в ионическом

Question

directive.js:

.directive('map', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     onCreate: '&' 
    }, 
    link: function ($scope, $element, $attr) { 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(43.07493, -89.381388), 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map($element[0], mapOptions); 

     $scope.onCreate({map: map}); 

     // Stop the side bar from dragging when mousedown/tapdown on the map 
     google.maps.event.addDomListener($element[0], 'mousedown', function (e) { 
      e.preventDefault(); 
      return false; 
     }); 
     } 

     if (document.readyState === "complete") { 
     initialize(); 
     } else { 
     google.maps.event.addDomListener(window, 'load', initialize); 
     } 
    } 
    } 
}); 

HTML:

<map on-create="mapCreated(map)" data-tap-disabled="true"></map> 

controller.js:

//Map controller 
$scope.mapCreated = function (map) { 
    $scope.map = map; 
    $scope.map.setCenter(new google.maps.LatLng(latitude1, longitude1)); 
    createMarker(latitude1, longitude1, icon1); 
    createMarker(latitude2, longitude2, icon2);    

    //Create marker 
    var createMarker = function (lat, long, icon) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat, long), 
      map: map, 
      icon: icon, 
     }); 
    } 
}; 

Скажем «latitude1, longitude1, latitude2, longitude2, icon1 и icon2 ".

С моим кодом ничего не получилось, но он не уменьшил масштаб карты, чтобы показать все маркеры. Я провел некоторое исследование раньше, но я не нашел подходящего ответа. Спасибо за помощь.

Answer 1

Вам необходимо отключить data-tap http://ionicframework.com/docs/api/page/tap/ для разрешения события googlemaps handle tap.

<ion-view> 
... 
<ion-content scroll="false"> 
    <map on-create="mapCreated(map)" data-tap-disabled="true"></map> 
</ion-content> 
... 
</ion-view>