全部服务产品
开发者频道
服务升级
为什么选择百度地图
登录

文档全面上新

更科技的视觉体验，更高效的页面结构，快前往体验吧！

体验新版
 
（未显示1个用户的8个中间版本）
第1行： 第1行：
−
<div id="examples_center">
+
<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">该示例介绍如何使用GL版API创建一张地图，并通过设置地图类型方法，展示3D地图与卫星地球地图之间的切换。</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://bj.bcebos.com/v1/mapopen/api-demos/video/地图类型.mp4</pre>
−
  <div class="title-hd">JSAPI GL版基础地图展示</div>
+
</div><div class="video-title1">3D地图与卫星地球地图切换</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 class="title-mi">功能场景</div>
+
{| width="370" border="1"
−
  <div class="wrap-mi">如何使用GL版的JSAPI来创建一张地图，GL版地图命名空间为BMapGL，支持三维地图，以及地图的旋转倾斜等。</div>
+
|-
−
</div>
+
| width="70" | '''类'''
−
<div class="demos_wrap"><div class="header"><div class="andiord-header active">Android</div><div class="ios-header hide">iOS</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-and"></div><div class="phone-android"><div class="video-wrap infor"><div class="video-control"></div><!-- 安卓视频位置 (不写协议)--><pre>//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android Fragment加载地图.mp4</pre>
+
| width="100" | '''接口'''
−
</div><div class="video-icon-and"><div class="play play-and"></div><div class="stop stop-and"></div></div></div><div class="progressWrap-hide-and"></div><div id="videoControls-and"><div id="progressWrap-and"><div id="playProgress-and"></div></div></div></div><div class="left-qrCode"><!-- 安卓二维码位置 --><div class="qrCode-and">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/Fragment.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- 安卓使用产品下选项，可有多个 --><!-- 产品1|/index.php?title=test --><div class="documentA">Android地图SDK|/index.php?title=androidsdk</div><div>></div><div class="documentA">显示地图|/index.php?title=androidsdk/guide/create-map/showmap</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- 安卓源码地址 --><div class="github-url-and">//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- 表格接口，可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">SupportMapFragment</div></div><div><div>newInstance ()</div></div><div><div>创建fragment实例</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>JAVA</div></div><!-- 安卓示例代码位置 --><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">/**
+
| width="110" | '''描述'''
−
* 初始化地图
+
| width="90" | '''参考文档'''
−
*/
+
|-
−
private void initMapFragment() {
+
| Map
−
    mFragmentManager = getSupportFragmentManager();
+
| new BMapGL.Map('container')
−
    BaiduMapOptions baiduMapOptions = new BaiduMapOptions();
+
| 创建GL版地图
−
    baiduMapOptions.mapType(BaiduMap.MAP_TYPE_SATELLITE);
+
| [[jspopularGL/guide/show|创建地图]]
−
     mMapFragment = SupportMapFragment.newInstance(baiduMapOptions);   
+
|-
−
    mFragmentManager.beginTransaction()
+
| Map
−
    .add(R.id.map
+
| map.setMapType(BMAP_EARTH_MAP)
−
            , mMapFragment
+
| 变更地图类型
−
            , sNormalFragmentTag)
+
| [[jspopularGL/guide/maptype|变更地图类型]]
−
    .commit();
+
|}
−
}
+
</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 codestyle">   var map = new BMapGL.Map('container');
−
                </pre>
+
     map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);  // 设置中心点和地图级别
−
<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 class="ios-wrap wrap" style="display: none;"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-ios"></div><div class="phone-ios"><div class="video-wrap infor"><div class="video-control"></div><!-- ios视频位置 --><pre>//mapopen-website-wiki.bj.bcebos.com/demos/iostest.MP4</pre>
+
    map.enableScrollWheelZoom(true);                           // 开启鼠标滚轮缩放   
−
</div><div class="video-icon-ios"><div class="play play-ios"></div><div class="stop stop-ios"></div></div></div><div class="progressWrap-hide-ios"></div><div id="videoControls-ios"><div id="progressWrap-ios"><div id="playProgress-ios"></div></div></div></div><div class="left-qrCode"><!-- ios二维码位置 --><div class="qrCode-ios">//mapopen-website-wiki.bj.bcebos.com/demos/play.png</div><div>扫码手机观看</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- IOS使用产品下选项，可有多个 --><!-- 产品1|/index.php?title=test --><div class="documentA">产品1|/index.php?title=test</div><!--  --><div>></div><div class="documentA">产品2|/index.php?title=test</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- IOS源码地址 --><div class="github-url-ios">//mapopen-website-wiki.bj.bcebos.com/demos/xs%20max.png</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div><div>备注</div></div><!-- ios表格接口内容，可有多个 --><!-- 表格接口，可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">BMKClusterManager</div></div><div><div>- (void)clearClusterItems;</div></div><div><div>清除标注集群items</div></div><div><div>V4.0.0起</div></div></div><!-- --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKClusterManager</div></div><div><div>- (NSArray&lt;BMKCluster *&gt; *)getClusters:(CGFloat)zoomLevel;</div></div><div><div>根据地图缩放级别获取标注集群</div></div><div><div>V4.0.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">AMapSearchAP</div></div><div><div>(AMapPOIAroundSearchRequest *)request;</div></div><div><div>POI周边查询接口</div></div><div><div>V4.0.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">AMapSearchAP</div></div><div><div>(AMapPOIAroundSearchRequest *)request;</div></div><div><div>POI周边查询接口</div></div><div><div>V4.0.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">abcdefg</div></div><div><div>(AMapPOIAroundSearchRequest *)request;</div></div><div><div>POI周边查询接口</div></div><div><div>V4.0.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">abcdefg</div></div><div><div>(AMapPOIAroundSearchRequest *)request;</div></div><div><div>POI周边查询接口</div></div><div><div>V4.0.0起</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">abcdefg</div></div><div><div>(AMapPOIAroundSearchRequest *)request;</div></div><div><div>POI周边查询接口</div></div><div><div>V4.0.0起</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-title">1.第一步</div><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">1
+
    map.addControl(new BMapGL.NavigationControl3D());         // 添加3D控件
−
/** 更新标注展示. */
+
−
- (void)updateClusters {
+
−
_clusterZoom = (NSInteger)_mapView.zoomLevel;
+
−
@synchronized(_clusterManager.clusterCaches) {
+
−
    NSMutableArray *clusters = [_clusterManager.clusterCaches objectAtIndex:(_clusterZoom - 3)];
+
−
    if (clusters.count > 0) {
+
  
−
        // 移除一组标注
+
     function changeMapType(e) {
−
        [_mapView removeAnnotations:_mapView.annotations];
+
         if (e.className.indexOf('current') === -1) {
−
        //将一组标注添加到当前地图View中
+
             var allLi = document.getElementsByClassName('btn');
−
        [_mapView addAnnotations:clusters];
+
             for (var i = 0; i < allLi.length; i++) {
−
    } else {
+
                 allLi[i].className = allLi[i].className.replace(' current','').trim();
−
     __weak typeof(self) weakSelf = self;
+
            }
−
         dispatch_async(dispatch_get_global_queue(0, 0), ^{
+
            e.className += ' current';
−
             // 获取聚合后的标注
+
            if (e.className.indexOf('normal')&nbsp;!= -1) {
−
            __block NSArray *array = [weakSelf.clusterManager getClusters:weakSelf.clusterZoom];
+
                map.setMapType(BMAP_NORMAL_MAP);
−
             dispatch_async(dispatch_get_main_queue(), ^{
+
            } else {
−
                 for (BMKCluster *item in array) {
+
                 map.setMapType(BMAP_EARTH_MAP);
−
                    ClusterAnnotation *annotation = [[ClusterAnnotation alloc] init];
+
             }
−
                    // 设置标注的经纬度坐标
+
         }
−
                    annotation.coordinate = item.coordinate;
+
−
                    annotation.size = item.size;
+
−
                    // 设置标注的标题
+
−
                    annotation.title = [NSString stringWithFormat:@"我是%lu个", (unsigned long)item.size];
+
−
                    [clusters addObject:annotation];
+
−
                }
+
−
                 // 移除一组标注
+
−
                [weakSelf.mapView removeAnnotations:weakSelf.mapView.annotations];
+
−
                // 将一组标注添加到当前地图View中
+
−
                [weakSelf.mapView addAnnotations:clusters];
+
−
             });
+
−
         });
+
 
     }
 
     }
−
}
+
         </pre>
−
}
+
</div></div></div></div>
−
 
+
−
                </pre>
+
−
<div class="pre-btn"><div class="pre-btn-copy-ios">复制</div><div class="pre-btn-cb-ios">深色</div></div><div class="success">复制成功</div></div></div><div class="pre-wrap"><div class="pre-wrap-title">2.第二步</div><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">2
+
−
/** 更新标注展示. */
+
−
- (void)updateClusters {
+
−
_clusterZoom = (NSInteger)_mapView.zoomLevel;
+
−
@synchronized(_clusterManager.clusterCaches) {
+
−
    NSMutableArray *clusters = [_clusterManager.clusterCaches objectAtIndex:(_clusterZoom - 3)];
+
−
    if (clusters.count > 0) {
+
−
 
+
−
         // 移除一组标注
+
−
        [_mapView removeAnnotations:_mapView.annotations];
+
−
        //将一组标注添加到当前地图View中
+
−
        [_mapView addAnnotations:clusters];
+
−
    } else {
+
−
    __weak typeof(self) weakSelf = self;
+
−
        dispatch_async(dispatch_get_global_queue(0, 0), ^{
+
−
            // 获取聚合后的标注
+
−
            __block NSArray *array = [weakSelf.clusterManager getClusters:weakSelf.clusterZoom];
+
−
            dispatch_async(dispatch_get_main_queue(), ^{
+
−
                for (BMKCluster *item in array) {
+
−
                    ClusterAnnotation *annotation = [[ClusterAnnotation alloc] init];
+
−
                    // 设置标注的经纬度坐标
+
−
                    annotation.coordinate = item.coordinate;
+
−
                    annotation.size = item.size;
+
−
                    // 设置标注的标题
+
−
                    annotation.title = [NSString stringWithFormat:@"我是%lu个", (unsigned long)item.size];
+
−
                    [clusters addObject:annotation];
+
−
                }
+
−
                // 移除一组标注
+
−
                [weakSelf.mapView removeAnnotations:weakSelf.mapView.annotations];
+
−
                // 将一组标注添加到当前地图View中
+
−
                [weakSelf.mapView addAnnotations:clusters];
+
−
            });
+
−
        });
+
−
    }
+
−
}
+
−
}
+
−
 
+
−
                </pre>
+
−
<div class="pre-btn"><div class="pre-btn-copy-ios">复制</div><div class="pre-btn-cb-ios">深色</div></div><div class="success">复制成功</div></div></div><div class="pre-wrap"><div class="pre-wrap-title">3.名字</div><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">3
+
−
/** 更新标注展示. */
+
−
- (void)updateClusters {
+
−
_clusterZoom = (NSInteger)_mapView.zoomLevel;
+
−
@synchronized(_clusterManager.clusterCaches) {
+
−
    NSMutableArray *clusters = [_clusterManager.clusterCaches objectAtIndex:(_clusterZoom - 3)];
+
−
    if (clusters.count > 0) {
+
−
 
+
−
        // 移除一组标注
+
−
        [_mapView removeAnnotations:_mapView.annotations];
+
−
        //将一组标注添加到当前地图View中
+
−
        [_mapView addAnnotations:clusters];
+
−
    } else {
+
−
    __weak typeof(self) weakSelf = self;
+
−
        dispatch_async(dispatch_get_global_queue(0, 0), ^{
+
−
            // 获取聚合后的标注
+
−
            __block NSArray *array = [weakSelf.clusterManager getClusters:weakSelf.clusterZoom];
+
−
            dispatch_async(dispatch_get_main_queue(), ^{
+
−
                for (BMKCluster *item in array) {
+
−
                    ClusterAnnotation *annotation = [[ClusterAnnotation alloc] init];
+
−
                    // 设置标注的经纬度坐标
+
−
                    annotation.coordinate = item.coordinate;
+
−
                    annotation.size = item.size;
+
−
                    // 设置标注的标题
+
−
                    annotation.title = [NSString stringWithFormat:@"我是%lu个", (unsigned long)item.size];
+
−
                    [clusters addObject:annotation];
+
−
                }
+
−
                // 移除一组标注
+
−
                [weakSelf.mapView removeAnnotations:weakSelf.mapView.annotations];
+
−
                // 将一组标注添加到当前地图View中
+
−
                [weakSelf.mapView addAnnotations:clusters];
+
−
            });
+
−
        });
+
−
    }
+
−
}
+
−
}
+
−
 
+
−
                </pre>
+
−
<div class="pre-btn"><div class="pre-btn-copy-ios">复制</div><div class="pre-btn-cb-ios">深色</div></div><div class="success">复制成功</div></div></div><div class="more-nav"><div class="left-icon"></div><div>更多功能</div></div><div class="more-wrap"><!-- IOS更多功能下选项 --><!-- 点标记动画|/index.php?title=test --><div><div class="point"></div><div class="documentA">点标记动画|/index.php?title=test</div></div><div><div class="point"></div><div class="documentA">点融合|/index.php?title=test</div></div><div><div class="point"></div><div class="documentA">添加文字和信息窗|/index.php?title=test</div></div></div></div></div>
+

2020年10月9日 (五) 16:44的最后版本

基础地图展示
功能场景
该示例介绍如何使用GL版API创建一张地图，并通过设置地图类型方法，展示3D地图与卫星地球地图之间的切换。
DEMO
https://bj.bcebos.com/v1/mapopen/api-demos/video/地图类型.mp4
3D地图与卫星地球地图切换
核心接口

类 接口 描述 参考文档
Map new BMapGL.Map('container') 创建GL版地图 创建地图
Map map.setMapType(BMAP_EARTH_MAP) 变更地图类型 变更地图类型
核心代码
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18);  // 设置中心点和地图级别
    map.enableScrollWheelZoom(true);                           // 开启鼠标滚轮缩放     
    map.addControl(new BMapGL.NavigationControl3D());          // 添加3D控件

    function changeMapType(e) {
        if (e.className.indexOf('current') === -1) {
            var allLi = document.getElementsByClassName('btn');
            for (var i = 0; i < allLi.length; i++) {
                allLi[i].className = allLi[i].className.replace(' current','').trim();
            }
            e.className += ' current';
            if (e.className.indexOf('normal') != -1) {
                map.setMapType(BMAP_NORMAL_MAP);
            } else {
                map.setMapType(BMAP_EARTH_MAP);
            }
        }
    }
取自“http://lbsyun.baidu.com/index.php?title=基础地图展示&oldid=15724”

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消