地图展示 | 百度地图API SDK


<!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为bd09坐标，默认为BMAP_COORD_BD09。
    // 指定完成后API将以指定的坐标类型处理您传入的坐标
});          
// 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

4. 开启鼠标滚轮缩放

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


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

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

坐标转换说明

添加控件

本篇文章对您是否有帮助？

地图展示