自定义控件-集成百度地图原创
页面开发
插件开发
前端&控件
金蝶云社区-吴锐雄
吴锐雄
12人赞赏了该文章 4,980次浏览 未经作者许可，禁止转载编辑于2024年05月21日 16:13:27
summary-icon摘要由AI智能服务提供

该文本主要介绍了如何在非商业和商业目的下使用百度地图开放平台服务，并详细说明了将百度地图集成到自定义控件上的步骤。非商业使用需注册账号并签署协议，商业使用则需获得商用授权。集成步骤包括注册账号、创建应用、创建动态表单和自定义控件文件、注册控件方案以及编写Java插件与控件交互。此外，还提供了JavaScript代码示例，展示了如何加载百度地图脚本、设置地图中心点和缩放级别、添加地图类型控件、设置城市、启用滚轮缩放以及智能搜索和标注等功能。


创作不易，如果文章对您有帮助，请为我点击一个朴实无华的赞^_^


本文章仅用于技术交流，无商业目的。

以下摘抄自百度地图官网：

开发者如因非商业目的使用百度地图开放平台服务，仅需注册百度地图开发者账号、签署平台在线协议即可开始调用。

开发者如因商业目的（包括但不限于对第三方用户收费、项目投标、后台管理系统、任何其他直接或间接获取收益或利益等）使用百度地图开放平台服务，需事先获得百度地图开放平台"商用授权"。


集成步骤：

把百度地图集成在自定义控件上，需要以下步骤：

1.在百度开发者上注册，新建一个应用，并获取ak。

2.创建动态表单，用来装载百度地图自定义控件。

3.创建自定义控件的目录、JavaScript代码、html文件。

4.注册自定义控件方案。

5.编写并注册Java插件，和自定义控件交互。


集成步骤详情：

1.注册登录百度地图开放平台

官方地址：

https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

认证开发者

image.png


新建应用，获取到一个ak值

image.png


2.创建动态表单

image.png

image.png


在页面中放置两个控件，一个自定义控件，一个文本控件。对自定义控件调整宽高。

image.png


3.创建自定义控件方案

准备三个文件：css/baidumap.css，html/baidumap.html，index.js

image.png

index.js代码的几个关键点:

image.png

image.png

image.png

image.png

image.png


完整代码如下

index.js

(function(KDApi) {

    function MyComponent(model) {
        this._setModel(model)
    }

    MyComponent.prototype = { // 内部函数不推荐修改
        _setModel: function(model) {
            this.model = model // 内部变量挂载
        },
        init: function(props) {
            console.log('-----init', this.model, props)
            setHtml(this.model, props)
        },
        update: function(props) {
            setPlace(props.data.tocity)
        },
        destoryed: function() {
            console.log('-----destoryed', this.model)
        }

    }


    /*
     * 外部函数声明
     */
    var setHtml = function(model, props) {


        loadBaiduMapScript('https://api.map.baidu.com/getscript?v=2.0&ak=Smrt8YDVEFmpT8I2RSnS2pttPdU7FUMW&services=&t=20210225162129', 'BaiduMapGetScript', function() {
            KDApi.loadFile(['./css/baidumap.css'], model, function() {

                KDApi.getTemplateStringByFilePath('./html/baidumap.html', model, {})
                    .then(function(result) {
                        model.dom.innerHTML = result
                        initBaiduMap()
                    })

            })

        })

    }

    var map;
    var initBaiduMap = function() {
        // 通过id获取到div标签
        const allmap = document.getElementById("baidumap")
        if (allmap) {
            // 百度地图API功能
            map = new BMap.Map("baidumap"); // 创建Map实例
            map.centerAndZoom(new BMap.Point(114.066, 22.548), 12); // 初始化地图,设置中心点坐标和地图级别
            //map.centerAndZoom("成都", 12); // 初始化地图,设置中心点坐标和地图级别

            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl({
                mapTypes: [
                    BMAP_NORMAL_MAP,
                    BMAP_HYBRID_MAP
                ]
            }));
            //map.setCurrentCity("深圳"); // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        }
    }

    function setPlace(myValue) {
        if (map != null) {
            map.clearOverlays(); //清除地图上所有覆盖物
            function myFun() {
                var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 12);
                map.addOverlay(new BMap.Marker(pp)); //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
    }

    function loadBaiduMapScript(url, elementId, callback) {
        const target = document.getElementById(elementId)
        if (target) {
            console.log('BaiduMap has loaded')
            callback()
            return
        }
        const script = document.createElement('script')
        script.id = elementId
        script.type = 'text/javascript'
        if (typeof(callback) === 'function') {
            if (script.readyState) {
                script.onreadystatechange = function() {
                    if (script.readyState == 'loaded' || script.readyState == 'complete') {
                        script.onreadystatechange = null
                        callback()
                    }
                }
            } else {
                script.onload = function() {
                    callback()
                }
            }
        }
        script.src = url
        document.body.appendChild(script)
    }

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }


    KDApi.register('cosmic_baidumap', MyComponent)

})(window.KDApi)

css/baidumap.css

body,
html,
#baidumap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
}

html/baidu_kdapi.html

<!DOCTYPE html>
<html>

<body>
    <div id="baidumap"></div>
</body>

</html>


4.注册自定义控件方案

将之前的控件方案打包成为一个zip包


image.png

image.png

image.png


5.编写并注册Java插件

以下插件代码，获取到自定义控件CustomControl，然后调用setData方法，传入参数。

调用setData方法，会调用自定看控件的index.js里面的update: function() 方法，这时把props中的参数取出即可。

image.png


完整插件代码如下：

import kd.bos.entity.datamodel.events.PropertyChangedArgs;
import kd.bos.ext.form.control.CustomControl;
import kd.bos.form.plugin.AbstractFormPlugin;
import java.util.HashMap;
import java.util.Map;

public class DemoBaiduMapPlugIn extends AbstractFormPlugin {

    @Override
    public void propertyChanged(PropertyChangedArgs e) {
        if ("kdec_input_city".equals(e.getProperty().getName())) {
            CustomControl customControl = getControl("kdec_customcontrolap");
    
            Map<String, Object> paramsMap = new HashMap<String, Object>();
            paramsMap.put("tocity", getModel().getValue("kdec_input_city"));
            customControl.setData(paramsMap);
        }
    }
    
    @Override
    public void afterBindData(EventObject e) {
        super.afterBindData(e);
        CustomControl customControl = getControl("kdec_customcontrolap");
        Map<String, Object> paramsMap = new HashMap<String, Object>();
        paramsMap.put("tocity", "深圳");
        customControl.setData(paramsMap);
    }
}


注册插件：

image.png



效果展示

image.png

image.png

image.png


移动端集成百度地图

以上 自定义控件方案、插件代码都可以用于移动端。


移动端插件代码

import kd.bos.entity.datamodel.events.PropertyChangedArgs;
import kd.bos.ext.form.control.CustomControl;
import kd.bos.form.events.CustomEventArgs;
import kd.bos.form.plugin.AbstractMobFormPlugin;

import java.util.EventObject;
import java.util.HashMap;
import java.util.Map;

public class DemoBaiduMapMobPlugin extends AbstractMobFormPlugin {

    @Override
    public void propertyChanged(PropertyChangedArgs e) {
        if ("kdec_input_city".equals(e.getProperty().getName())) {
            CustomControl customControl = getControl("kdec_customcontrolap");

            Map<String, Object> paramsMap = new HashMap<String, Object>();
            paramsMap.put("tocity", getModel().getValue("kdec_input_city"));
            customControl.setData(paramsMap);
        }
    }


    @Override
    public void customEvent(CustomEventArgs e) {
        String eventName = e.getEventName();
        if ("input".equals(eventName)) {
            System.out.println("前端输入了值:"+e.getEventArgs());
        }

    }

    @Override
    public void afterBindData(EventObject e) {
        super.afterBindData(e);
        CustomControl customControl = getControl("kdec_customcontrolap");
        Map<String, Object> paramsMap = new HashMap<String, Object>();
        paramsMap.put("tocity", "深圳");
        customControl.setData(paramsMap);
    }
    
}


移动端设计

1.拖入自定义控件和文本控件，设置自定义控件高度宽度。

image.png



2.注册移动端插件

image.png


3.使用之前添加好的控件方案

image.png

image.png


移动端效果

image.png


输入广州

image.png



注意

进来有不少开发者下载了附件中的自定义控件方案，直接拿去用，没有按照上述文档去申请一个自己的ak，替换掉原控件方案中index.js中的ak，导致我最近频繁收到百度地图平台的通知：“定位服务已经超过并发量上限”。

因此，我已经删除了在百度地图平台申请的ak，原控件方案中index.js中的ak已经不能用，请参考本文中的“集成步骤详情 的 1.注册登录百度地图开放平台，3.创建自定义控件方案”，申请一个自己ak，并进行替换。


常见问题

1.百度地图API支持HTTPS

参考文档：https://www.cnblogs.com/melancholys/p/14917675.html




cosmic_baidumap.zip(2.41KB)

图标赞 12
12人点赞
还没有人点赞，快来当第一个点赞的人吧！
图标打赏
0人打赏
还没有人打赏，快来当第一个打赏的人吧！

推荐阅读

电子围栏-地图-自定义控件分享

关键字 移动打卡 电子围栏 地图控件 自定义控件 业务场景 1. 客户需要使用在地图上定义不规则的打卡区域， 2. 而且是多个不规则不连续的打卡范围 3. 提供 …

    文章

    62

自定义控件中国地图

关键词：OpenAPI、附件面板 一、需求 自定义控件绘制中国地图 二、实现方案 在echarts最新的5.4.3版本中，已不能直接引用china.js来绘制中 …

    文章

    619

地图控件

本文章，介绍如何使用地图控件。 一、设计 在设计器中拖入地图控件，按钮，文本框。 [图片] 注册插件 注册一个移动端插件，准备为接下来的步骤添加业务逻辑。 [图 …

    文章

    2,050