“点覆盖物详情查看”的版本间的差异

2020年10月9日 (五) 14:30的版本

点覆盖物详情查看

该示例介绍如何在地图上添加点标记，并如何给点标记添加点击弹出信息窗口。

https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov

绘制点覆盖物，并为其添加信息窗口

核心接口

类	接口	描述	参考文档
Marker	map.addOverlay(marker)	绘制覆盖物标注点	绘制点、线、面
InfoWindow	map.openInfoWindow(infoWindow, point)	信息窗口展示	信息窗口

  
        var map = new BMapGL.Map('container');
        var point = new BMapGL.Point(116.404, 39.928);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
    
        var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
        map.addOverlay(marker1); // 将标注添加到地图中
        var opts1 = {
            title: '故宫博物馆',
            content: '故宫博物馆的简介',
            width: 220,
            height: 80
        };
        var infoWindow1 = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts1);
        marker1.addEventListener('click', function () {
            map.openInfoWindow(infoWindow1, point1);
        });

复制

深色

复制成功

@@ 第1行： / 第1行： @@
 <div id="examples_api_center"><div class="title-hd">点覆盖物详情查看</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例介绍如何在地图上添加点标记，并如何给点标记添加点击弹出信息窗口。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov</pre>
-</div><div class="video-title1">白天模式与黑夜模式切换</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div>
+</div><div class="video-title1">绘制点覆盖物，并为其添加信息窗口</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div>
 {| width="370" border="1"
 |-
@@ 第8行： / 第8行： @@
 | width="90" | '''参考文档'''
 |-
-| Map
+| Marker
-| new BMapGL.Map('container')
+| map.addOverlay(marker)
-| 创建GL版地图
+| 绘制覆盖物标注点
-| [[jspopularGL/guide/show|展示地图]]
+| [[jspopularGL/guide/addOverlay|绘制点、线、面]]
 |-
-| Map
+| InfoWindow
-| setMapType(BMAP_EARTH_MAP)
+| map.openInfoWindow(infoWindow, point)
-| 设置地图类型
+| 信息窗口展示
-| [[jspopularGL/guide/maptype|变更地图类型]]
+| [[jspopularGL/guide/infoWindow|信息窗口]]
 |}
-</div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">  <div id="container"></div>
+</div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap">
-  <ul class="drawing-panel" style="z-index: 99;">
+    <div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">
-      <li class = "normal btn current" onclick = "changeMapType(this)">3D地图</li>
+        var map = new BMapGL.Map('container');
-      <li class = "earth btn" onclick = "changeMapType(this)">卫星地球</li>
+        var point = new BMapGL.Point(116.404, 39.928);
-  </ul>
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
-  <script>
-  var map = new BMapGL.Map('container');
+        var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
-  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);  // 设置中心点和地图级别
+        map.addOverlay(marker1); // 将标注添加到地图中
-  map.enableScrollWheelZoom(true);                           // 开启鼠标滚轮缩放
+        var opts1 = {
-  map.addControl(new BMapGL.NavigationControl3D());          // 添加3D控件
+            title: '故宫博物馆',
-  function changeMapType(e) {
+            content: '故宫博物馆的简介',
-      if (e.className.indexOf('current') === -1) {
+            width: 220,
-          var allLi = document.getElementsByClassName('btn');
+            height: 80
-          for (var i = 0; i < allLi.length; i++) {
+        };
-              allLi[i].className = allLi[i].className.replace(' current','').trim();
+        var infoWindow1 = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts1);
-          }
+        marker1.addEventListener('click', function () {
-          e.className += ' current';
+            map.openInfoWindow(infoWindow1, point1);
-          if (e.className.indexOf('normal')&nbsp;!= -1) {
+        });
-              map.setMapType(BMAP_NORMAL_MAP);
+</pre>
-          } else {
-              map.setMapType(BMAP_EARTH_MAP);
-          }
-      }
-  }
-  </script>
-                </pre>
 <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div></div>

文档全面上新

2020年10月9日 (五) 14:30的版本