Question

我正在开发一个离子应用程序，我需要在其中显示谷歌地图以显示位置。我需要在地图中禁用卫星和街道视图选项，但没有得到任何合适的方法。此外，地图正在创建问题，有时它会显示在屏幕上，有时它没有。

这是我在控制器中尝试的代码

  $scope.addLoc = function(){ 
   $cordovaGeolocation.getCurrentPosition(options).then(function(position){
       $scope.lat  = position.coords.latitude;
       $scope.long = position.coords.longitude;
       var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+$scope.lat+","+$scope.long+"&sensor=true";
       $http.get(url)
         .then(function(res) {

           $rootScope.address = res.data.results[0].formatted_address; 
           console.log($rootScope.address);
          }, function(error) {
             console.log( error);
         });
     console.log(position);
     var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

     var mapOptions = {
       center: latLng,
       zoom: 4,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };

     $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
     $scope.marker = new google.maps.Marker({
       position: new google.maps.LatLng($scope.lat, $scope.long),
       map: $scope.map,
       title: 'Drag me!'
   }, function(err) {
       console.err(err);
   });
   }, function(error){
     console.log("Could not get location");
   });


 }

Answer 1

你可以试试这个

var mapOptions = {
    center: latLng,
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    disableDefaultUI: true
};

Answer 2

启用地图并将选项传递给它时，您可以指定mapTypeControlOptions。它们有一个Array，用于指定允许用户查看的maptype类型。这里可以看到http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeControlOptions.

如果您不希望用户拥有关于地图类型的任何选项，您还可以通过将地图mapTypeControl设置为false来指定。

var myOptions = {
    zoom: 2,
    center: **Your LatLng object**,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
    }, // here´s the array of controls
    disableDefaultUI: true, // a way to quickly hide all controls
    mapTypeControl: true,
    scaleControl: true,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE 
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // displays in <article id="map_canvas"></article>
//map.mapTypeControl = false; // OPTIONAL: hides the map control

您可以通过css

隐藏它们

但这不是一种正确的方式。这可能在将来不起作用..

.gm-style-mtc {
  display: none;
}

如何禁用谷歌地图中的卫星和街道视图选项

2 个答案: