第1行: | 第1行: | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
− | <div class="h1-title">信息窗口</div><div id="update- | + | <div class="h1-title">信息窗口</div><div id="update-time1">更新时间:2020年08月07日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text"> |
− | <div class="bluetitle"><div class=" | + | |
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。 | 所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。 | ||
第7行: | 第6行: | ||
本节重点介绍一下如何向地图添加信息窗口,以及与地图相关的一些交互。 | 本节重点介绍一下如何向地图添加信息窗口,以及与地图相关的一些交互。 | ||
− | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl1_4.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl1_4 DEMO详情]</div></div><div class="bluetitle"><div class=" | + | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl1_4.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl1_4 DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>提供的信息窗口</span></div></div></div><div class="serve-explain-text"> |
InfoWindow:信息窗口。也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。<span style="color:#FF0000;">注意:</span>同一时刻只能有一个信息窗口在地图上打开。 | InfoWindow:信息窗口。也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。<span style="color:#FF0000;">注意:</span>同一时刻只能有一个信息窗口在地图上打开。 | ||
详情可见[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b6 <u>类参考</u>]。 | 详情可见[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b6 <u>类参考</u>]。 | ||
− | </div><div class="bluetitle"><div class=" | + | </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>添加信息窗口</span></div></div></div><div class="serve-explain-text"> |
信息窗口是地图上方浮动显示的HTML内容,可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。 | 信息窗口是地图上方浮动显示的HTML内容,可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。 | ||
</div><div class="devguide"><div class="leftborderbg" style="height:180px;"></div><div class="devguideorder"><span>1</span>参考展示地图创建基本地图</div><div class="devguidecenter"><pre class="prettyprint codestyle"><!DOCTYPE html> | </div><div class="devguide"><div class="leftborderbg" style="height:180px;"></div><div class="devguideorder"><span>1</span>参考展示地图创建基本地图</div><div class="devguidecenter"><pre class="prettyprint codestyle"><!DOCTYPE html> |
2022年8月19日 (五) 13:27的最后版本
信息窗口
更新时间:2020年08月07日
简介
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
覆盖物主要分为:标注(点标注、折线、多边形、圆、文本标注)、信息窗口、图层。
本节重点介绍一下如何向地图添加信息窗口,以及与地图相关的一些交互。
提供的信息窗口
InfoWindow:信息窗口。也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。
详情可见类参考。
添加信息窗口
信息窗口是地图上方浮动显示的HTML内容,可直接在地图上的任意位置打开,也可以在标注对象上打开(此时信息窗口的坐标与标注的坐标一致)。
1参考展示地图创建基本地图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> <title>地图展示</title> </head> <body></body> </html> <script type="text/javascript"> // GL版命名空间为BMapGL // 按住鼠标右键,修改倾斜角和角度 var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
2向地图中添加信息窗口
var opts = { width: 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title: "Hello" // 信息窗口标题 } var infoWindow = new BMapGL.InfoWindow("World", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口