谷歌地图自动缩放与离子

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，纬度2，经度2，图标1和图标2“已被初始化。

没有出错，我的代码，但它并没有缩小地图来显示所有的标记。我之前做过一些研究，但没有找到合适的答案。感谢帮助。

来源

2015-12-03 siti aishah ismail

谢谢，但它仍然没有工作。 –

当您在设备或两者中运行离子服务时，您有本地问题吗？ – ezain

都是设备和浏览器。谢谢。 –

您需要禁用data-tap http://ionicframework.com/docs/api/page/tap/以允许Google地图处理点按事件。

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

来源

2015-12-03 10:09:20 ezain

谢谢，我已经尝试在我的代码中放置（data-tap-disabled =“true”），但它仍然无效。没有任何变化，我的谷歌地图仍然没有缩小或放大显示所有的标记。 –

这很奇怪，你看过这个离子的例子吗？ https://github.com/driftyco/ionic-starter-maps。您也必须禁用滚动。 – ezain

是的，已经看到它。几乎我的代码是这样的，但是这个例子没有显示多个标记。 –

谷歌地图自动缩放与离子

回答

相关问题