“jspopular3.0

2024年12月30日 (一) 16:49的最后版本

地图展示

我们从展示一个以北京的天安门为中心的地图开始。以下为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: BMAP_COORD_BD09 // coordsType指定输入输出的坐标类型，BMAP_COORD_GCJ02为gcj02坐标，BMAP_COORD_BD09为bd0ll坐标，默认为BMAP_COORD_BD09。
                 // 指定完成后API将以指定的坐标类型处理您传入的坐标
});          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

4开启鼠标滚轮缩放

地图的鼠标滚轮缩放默认是关闭的，需要配置开启。

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

至此，我们完成了一个更加完整的地图展示的例子。

@@ 第19行： / 第19行： @@
 </pre>
 </div><div class="devguideorder"><span>3</span>初始化地图逻辑</div><div class="devguidecenter">首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图。<pre class="prettyprint codestyle">var map = new BMap.Map("container", {
-    coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
+    coordsType: BMAP_COORD_BD09 // coordsType指定输入输出的坐标类型，BMAP_COORD_GCJ02为gcj02坐标，BMAP_COORD_BD09为bd0ll坐标，默认为BMAP_COORD_BD09。
                   // 指定完成后API将以指定的坐标类型处理您传入的坐标
 });          // 创建地图实例
@@ 第27行： / 第27行： @@
 </div><div class="devguideorder"><span>4</span>开启鼠标滚轮缩放</div><div class="devguidecenter">地图的鼠标滚轮缩放默认是关闭的，需要配置开启。<pre class="prettyprint codestyle">map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
 </pre>
-</div></div><div class="serve-explain-text">至此，我们完成了一个更加完整的地图展示的例子。</div>
+</div></div><div class="serve-explain-text">至此，我们完成了一个更加完整的地图展示的例子。</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"></div></div></div>
-<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"></div></div></div>

文档全面上新

2024年12月30日 (一) 16:49的最后版本