zoukankan      html  css  js  c++  java
  • 百度地图(22)-GL 添加地图控件

    1. 百度地图GLAPI提供了的Control,比二维的控件少的多,主要是

    NavigationControl3D,ScaleControl,ZoomControl , CityListControl,LocationControl, CopyrightControl 。

    2. 其主要用法和二维控件相似,初始化后直接添加。

     1 /**
     2  * 添加定位控件
     3  * @type {BMapGL.LocationControl}
     4  */
     5 function addLocationControl() {
     6 
     7   var locationControl = new BMapGL.LocationControl({
     8     anchor:BMAP_ANCHOR_TOP_RIGHT,
     9     offset: new BMapGL.Size(20,20)
    10   });
    11   map.addControl(locationControl);
    12 
    13   locationControl.addEventListener("locationSuccess",function (e) {
    14     var address = "";
    15     address += e.addressComponent.province;
    16     address += e.addressComponent.city;
    17     address += e.addressComponent.district;
    18     address += e.addressComponent.street;
    19     address += e.addressComponent.streetNumber;
    20     console.log("当前定位地址:"+address);
    21   });
    22 
    23   locationControl.addEventListener("locationError",function (e) {
    24     console.log("定位错误:"+ e.message);
    25   });
    26 }
    27 
    28 /**
    29  * 添加自定义版权控件
    30  */
    31 function addCopyRightControl() {
    32   var cr = new BMapGL.CopyrightControl({
    33     anchor: BMAP_ANCHOR_TOP_RIGHT,
    34     offset: new BMapGL.Size(20, 20)
    35   });   //设置版权控件位置
    36   map.addControl(cr); //添加版权控件
    37   var bs = map.getBounds();   //返回地图可视区域
    38   cr.addCopyright({
    39     id: 1,
    40     content: "<img src='../img/baidu.jpg' width='50px' height='50px'/><a href='#' style='font-size:16px;color:#000'>@安徽舜禹水务股份有限公司</a>",
    41     bounds: bs
    42   });
    43 }
    44 
    45 /**
    46  * 城市列表
    47  * @type {BMapGL.CityListControl}
    48  */
    49 function addCityListControl() {
    50   var cityControl = new BMapGL.CityListControl({
    51     anchor: BMAP_ANCHOR_TOP_LEFT,
    52     offset: new BMapGL.Size(10,5)
    53   });
    54   map.addControl(cityControl);
    55 }
    56 
    57 
    58 /**
    59  *  添加地图控件
    60  **/
    61 function addMapControls() {
    62 
    63   //添加地图导航控件
    64   map.addControl(new BMapGL.NavigationControl3D());
    65 
    66   //添加地图比例尺控件
    67   /**
    68    * 比例尺工具与版本标识工具所用同一个class,anchorBL, 所以,当采用CSS方式 display:none 去掉左下角
    69    * 的百度标识和版权标识时,缩放比例工具也会被隐藏。
    70    **/
    71   map.addControl(new BMapGL.ScaleControl());
    72 
    73   map.addControl(new BMapGL.ZoomControl());
    74 
    75   addCityListControl();
    76 
    77   addLocationControl();
    78 
    79 }

    4. ScaleControl 的样式与左下角百度的logo使用的同一个css,为了隐藏logo把ScaleControl也隐藏了。

    5.. 页面显示

     6. 代码参考

    https://github.com/WhatGIS/bdMap

  • 相关阅读:
    机器学习(深度学习)
    机器学习(六)
    机器学习一-三
    Leetcode 90. 子集 II dfs
    Leetcode 83. 删除排序链表中的重复元素 链表操作
    《算法竞赛进阶指南》 第二章 Acwing 139. 回文子串的最大长度
    LeetCode 80. 删除有序数组中的重复项 II 双指针
    LeetCode 86 分割链表
    《算法竞赛进阶指南》 第二章 Acwing 138. 兔子与兔子 哈希
    《算法竞赛进阶指南》 第二章 Acwing 137. 雪花雪花雪花 哈希
  • 原文地址:https://www.cnblogs.com/googlegis/p/14705024.html
Copyright © 2011-2022 走看看