浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
 
(未显示1个用户的1个中间版本)
第1行: 第1行:
 
{{jspopularGL-sidebar}}
 
{{jspopularGL-sidebar}}
<div class="bluetitle"><div class="services-title-text">地图展示</div></div><div class="serve-explain-text">我们通过一个例子来说明如何创建一个节简单的地图页面。下面是DEMO示例。</div><div class="aloneDemo"><div dir="https://lbsyun.baidu.com/jsdemo/demo/webgl0_1.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl0_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>   
+
<div class="bluetitle"><div class="services-title-text">地图展示</div></div><div class="serve-explain-text">我们通过一个例子来说明如何创建一个简单的地图页面。下面是DEMO示例。</div><div class="aloneDemo"><div dir="https://lbsyun.baidu.com/jsdemo/demo/webgl0_1.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl0_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>   
第22行: 第22行:
 
</pre>
 
</pre>
 
</div><div class="devguideorder"><span>4</span>开启鼠标滚轮缩放</div><div class="devguidecenter">地图的鼠标滚轮缩放默认是关闭的,需要配置开启。<pre class="prettyprint codestyle">map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放
 
</div><div class="devguideorder"><span>4</span>开启鼠标滚轮缩放</div><div class="devguidecenter">地图的鼠标滚轮缩放默认是关闭的,需要配置开启。<pre class="prettyprint codestyle">map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放
 +
</pre>
 +
</div>
 +
<div class="devguideorder"><span>5</span>设置地图的旋转角度和倾斜角度</div><div class="devguidecenter">地图可以自定义旋转角度和倾斜角角度<pre class="prettyprint codestyle">map.setHeading(64.5);  //设置地图旋转角度
 +
map.setTilt(73);      //设置地图的倾斜角度
 
</pre>
 
</pre>
 
</div></div><div class="serve-explain-text">至此我们完成了一个完整的地图展示的例子,可以试着在地图区域按住鼠标右键进行拖动,地图的视角和旋转角度会随之改变。</div>
 
</div></div><div class="serve-explain-text">至此我们完成了一个完整的地图展示的例子,可以试着在地图区域按住鼠标右键进行拖动,地图的视角和旋转角度会随之改变。</div>

2019年11月4日 (一) 06:41的最后版本

地图展示
我们通过一个例子来说明如何创建一个简单的地图页面。下面是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="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
3初始化地图逻辑
首先创建地图实例,之后用一个Point坐标点和缩放级别来初始化地图
var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
4开启鼠标滚轮缩放
地图的鼠标滚轮缩放默认是关闭的,需要配置开启。
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
5设置地图的旋转角度和倾斜角度
地图可以自定义旋转角度和倾斜角角度
map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度
至此我们完成了一个完整的地图展示的例子,可以试着在地图区域按住鼠标右键进行拖动,地图的视角和旋转角度会随之改变。
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消