如何过滤谷歌地图

时间:2013-09-22 09:45:09

标签: javascript api google-maps filter

我正在使用谷歌地图,我想隐藏,如果它可能从我的地图餐厅和酒店。 所以我的问题是如何消除或应用过滤器来隐藏谷歌地图api中的餐馆和酒店点。

谢谢大家。 编辑。

<script>
  function writeAddressName(latLng) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      "location": latLng
    },
    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK)
        document.getElementById("address").innerHTML = results[0].formatted_address;
      else
        document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
    });
  }


  function geolocationSuccess(position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    writeAddressName(userLatLng);

   $(document).ready(function(){
var styles = [
    {
        stylers: [
            { hue: "#00ffe6" },
            { saturation: -20 }
        ]
    },{
        featureType: "road",
        elementType: "geometry",
        stylers: [
            { lightness: 100 },
            { visibility: "simplified" }
        ]
    },{
        featureType: "road",
        elementType: "labels",
        stylers: [
            { visibility: "off" }
        ]
    }
];

var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

// display map
var mapOptions = {
    zoom: 11,
    center: userLatLng ,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP,'map_style']
    }
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

 map.mapTypes.set('map_style', styledMap);
 map.setMapTypeId('map_style', styledMap);
});
    // marker
    new google.maps.Marker({
      map: map_style,
      position: userLatLng
    });

1 个答案:

答案 0 :(得分:0)

您可以映射样式以隐藏路线图上的某些元素 您正在寻找的API提示是google.maps.MapTypeStyle:https://developers.google.com/maps/documentation/javascript/reference?hl=en#MapTypeStyle

如何使用它的示例可以在这里找到: https://developers.google.com/maps/documentation/javascript/styling

在你的情况下,样式看起来像这样:

{
featureType: "poi.business",
elementType: "labels",
stylers: [
  { visibility: "off" }
]
}

:编辑: 可以在此处找到工作示例:http://jsfiddle.net/Elak/ndjC8/7/

    var styles = [
    {
        stylers: [
            { hue: "#00ffe6" },
            { saturation: -20 }
        ]
    },{
        featureType: "road",
        elementType: "geometry",
        stylers: [
            { lightness: 100 },
            { visibility: "simplified" }
        ]
    },{
        featureType: "road",
        elementType: "labels",
        stylers: [
            { visibility: "off" }
        ]
    }
];

// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

// Dessin de la map
var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');