地图展示 | JSAPI 3.0 | 百度地图开放平台文档中心

您当前查看的是 JSAPI 3.0 历史版本文档。该版本仅用于维护现有项目，不建议用于新项目开发。新项目请使用 JSAPI 4.0，如需升级现有项目，请参考升级指南。
You are viewing the legacy JSAPI 3.0 documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.

地图展示

我们从展示一个以北京的天安门为中心的地图开始。以下为Demo和示例。

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

4. 开启鼠标滚轮缩放

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


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

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

坐标转换说明

添加控件

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

地图展示