百度地图只显示道路,不显示建筑等

向右看齐 2022-05-27 04:45 1766阅读 0赞

**“遥望洞庭山水翠,白银盘里一青螺”**  
在使用百度地图开发中,一般都会默认显示各种公园,建筑物之类.  
![这里写图片描述][70]  
那么,如何只显示自己开发需要的呢?  
先在[http://developer.baidu.com/map/custom/][http_developer.baidu.com_map_custom]这个页面上调好自己需要显示和隐藏的元素  
![这里写图片描述][70 1]  
然后点击查看json  
![这里写图片描述][70 2]  
复制上面的样式,在js地图中设置进去

//百度地图API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(106.718158,26.578042), 20);
        map.enableScrollWheelZoom();
        //设置地图样式,隐藏建筑物等
    map.setMapStyle({
      styleJson:[
              {
                        "featureType": "poilabel",
                        "elementType": "all",
                        "stylers": {
                                  "visibility": "off"
                        }
              },
              {
                        "featureType": "manmade",
                        "elementType": "all",
                        "stylers": {
                                  "visibility": "off"
                        }
              },
              {
                        "featureType": "building",
                        "elementType": "all",
                        "stylers": {
                                  "visibility": "off"
                        }
              }
    ] });

效果如下:  
![这里写图片描述][70 3]  
这样,就没有其他建筑物的干扰了.

[70]: /images/20220527/46e4b13a2f684baf8880af1b6f9999ad.png
[http_developer.baidu.com_map_custom]: http://developer.baidu.com/map/custom/
[70 1]: /images/20220527/4f9bff0845b247b6994ddf9c5548f3a3.png
[70 2]: /images/20220527/14ca4594ee75430c8d3187239ac2967e.png
[70 3]: /images/20220527/70b708ace8804c8c9d0e9fe2711b4aed.png