• 转载:百度地图API:绘制工具栏控件


    转载地址:https://blog.csdn.net/shenhonglei1234/article/details/52585444

    需求 :在使用地图API时,绘制工具栏控件想自己选择哪些要,哪些不要

    解决步骤如下:

    参考官网API说明:地址:http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html#constructor
    {Map} map
    Baidu map的实例对象
    {Json Object} opts
    可选的输入参数,非必填项。可输入选项包括:
    {"isOpen" : {Boolean} 是否开启绘制模式
    "enableDrawingTool" : {Boolean} 是否添加绘制工具栏控件,默认不添加
    "drawingToolOptions" : {Json Object} 可选的输入参数,非必填项。可输入选项包括
          "anchor" : {ControlAnchor} 停靠位置、默认左上角
          "offset" : {Size} 偏移值。
          "scale" : {Number} 工具栏的缩放比例,默认为1
          "drawingModes" : {DrawingType} 工具栏上可以选择出现的绘制模式,将需要显示的DrawingType以数组型形式传入,如[BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE] 将只显示画点和画圆的选项
    "enableCalculate" : {Boolean} 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形)
    "markerOptions" : {CircleOptions} 所画的点的可选参数
    "circleOptions" : {CircleOptions} 所画的圆的可选参数
    "polylineOptions" : {CircleOptions} 所画的线的可选参数
    "polygonOptions" : {PolygonOptions} 所画的多边形的可选参数
    "rectangleOptions" : {PolygonOptions} 所画的矩形的可选参数

    如何使用:

     //实例化鼠标绘制工具
                    var drawingManager = new BMapLib.DrawingManager(map, {
                        isOpen: false, //是否开启绘制模式
                        enableDrawingTool: true, //是否显示工具栏
                        enableCalculate: false,
                        drawingToolOptions: {
                            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                            offset: new BMap.Size(5, 5), //偏离值
                         drawingModes : [BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE],
                          drawingTypes : [
                                        BMAP_DRAWING_MARKER,  
                                        BMAP_DRAWING_CIRCLE,//圆的样式
    //////                                  BMAP_DRAWING_POLYLINE,
    //////                                  BMAP_DRAWING_POLYGON,
    ////                                    BMAP_DRAWING_RECTANGLE //矩形的样式
                                ]
                        },
                    });

    添加前,和添加后的页面显示效果如下:


  • 相关阅读:
    spoj 694 求一个字符串中不同子串的个数
    Qt for Android 开发大坑
    HDUOJ A Mathematical Curiosity 1017
    Node.js开发入门—HelloWorld再分析
    GTK入门学习:布局容器之固定布局
    彻底领悟javascript中的exec与match方法
    JQuery中attr属性和jQuery.data()学习笔记
    正则表达式-验证带千分号的,带任意位小数的数字类型
    JQuery EasyUI 动态改变表单项的验证守则
    JavaScript计算两个日期的时间差
  • 原文地址:https://www.cnblogs.com/Jhon-xu/p/8743181.html
Copyright © 2020-2023  润新知