| 第1行： | 第1行： | ||
{{jspopularV3-sidebar}} | {{jspopularV3-sidebar}} | ||
| − | <div class="bluetitle"><div class="services-title-text">地图展示</div></div><div class="serve-explain-text">我们从展示一个以北京的天安门为中心的地图开始。以下为Demo和示例。</div><div class="aloneDemo"><div dir="https://lbs.baidu.com/ | + | <div class="bluetitle"><div class="services-title-text">地图展示</div></div><div class="serve-explain-text">我们从展示一个以北京的天安门为中心的地图开始。以下为Demo和示例。</div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/a1_2.htm"></div><div class="top_right">[https://lbs.baidu.com/jsdemo3.0.htm#js3_1 DEMO详情]</div></div><div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>编写HTML页面的基础代码</div><div class="devguidecenter">在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。<pre class="prettyprint codestyle"><!DOCTYPE html> |
<html> | <html> | ||
<head> | <head> | ||
2022年7月7日 (四) 18:48的版本
地图展示
我们从展示一个以北京的天安门为中心的地图开始。以下为Demo和示例。
1编写HTML页面的基础代码
在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
</head>
<body>
</body>
</html>
2引入百度地图API文件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
3初始化地图逻辑
首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图。
var map = new BMap.Map("container", {
coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
// 指定完成后API将以指定的坐标类型处理您传入的坐标
}); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
4开启鼠标滚轮缩放
地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
至此，我们完成了一个更加完整的地图展示的例子。