百度地图控件——路网地图和影像地图切换

原创于 2018-07-31 08:31:59 发布 · 6.2k 阅读

0 ·

CC 4.0 BY-SA版权

百度地图同时被 2 个专栏收录

7 篇文章

订阅专栏

百度地图

7 篇文章

订阅专栏

本文展示了如何使用百度地图API创建一个地图实例，并实现路网地图与影像地图之间的切换功能。通过添加MapTypeControl控件并指定地图类型，用户可以在普通地图和卫星混合地图间自由切换，同时地图中心点设为北京，支持鼠标滚轮缩放操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图控件——路网地图和影像地图切换

<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

<title>地图展示</title>

</head>

<body>

<div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

// 百度地图API功能

var map = new BMap.Map("allmap");    // 创建Map实例

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别

//添加地图类型控件

map.addControl(new BMap.MapTypeControl({

mapTypes:[

            BMAP_NORMAL_MAP,

            BMAP_HYBRID_MAP

        ]}));

map.setCurrentCity("北京");          // 设置地图显示的城市此项是必须设置的

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

</script>