百度地图实现普通地图、卫星图、三维图、混合图（卫星图+路网）

素颜马尾好姑娘i 2023-06-06 15:27 5阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc0MDUzMA_size_16_color_FFFFFF_t_70]

*  普通街道视图：`BMAP_NORMAL_MAP`
 *  三维视图：`BMAP_PERSPECTIVE_MAP`
 *  卫星视图：`BMAP_SATELLITE_MAP`
 *  卫星和路网的混合视图：`BMAP_HYBRID_MAP`

<!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    	<style type="text/css">
    		body, html { width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    		#allmap{ width:100%;height:500px;}
    		#r-result{ width:100%;margin-top:5px;}
    		p{ margin:5px; font-size:14px;}
    	</style>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5qnG3inG4VhPZOcjNwj4ycZN"></script>
    	<title>百度三维地图</title>
    </head>
    <body>
    	<div id="allmap"></div>	
    </body>
    </html>
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	var point = new BMap.Point(116.404, 39.915);
    	map.centerAndZoom( point,18);
     
    	// 将标注添加到地图中
    	//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    	//marker.enableDragging();
    	map.setMapType(BMAP_PERSPECTIVE_MAP);     //修改地图类型为3D地图
    	//map.setMapType(BMAP_NORMAL_MAP); //普通地图
    	//map.setMapType(BMAP_HYBRID_MAP); //混合地图
    	//map.setMapType(BMAP_SATELLITE_MAP); //卫星地图
        map.setCurrentCity("北京市");  //设置当前城市
    </script>

**添加控件 直接变成2D，混合，三维。**

map.addControl(new BMap.MapTypeControl());          //添加地图类型控件

**开心一刻**

去医院，坐长凳上排队等候，突然很想放屁，但是人多不太好意思。 于是拿出手机打开汤姆猫，声音调最大点了放屁。 就在我暗自庆幸没人发现的时候。 后面一哥们回头看着我说：“兄弟你用的是什么牌子的智能手机，手机里放屁，我都能闻到臭味。” 我：······

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc0MDUzMA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc0MDUzMA_size_16_color_FFFFFF_t_70]: /images/20230601/12aa18a6f96b4bc7bf2f04d3dad82608.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc0MDUzMA_size_16_color_FFFFFF_t_70 1]: /images/20230601/32658499f8b04db2b44b4e88c72fa364.png