自定义控件-集成百度地图原创
吴锐雄
11人赞赏了该文章
4281次浏览
编辑于2024年05月21日 16:13:27
创作不易，如果文章对您有帮助，请为我点击一个朴实无华的赞^_^
本文章仅用于技术交流，无商业目的。
以下摘抄自百度地图官网：
开发者如因非商业目的使用百度地图开放平台服务，仅需注册百度地图开发者账号、签署平台在线协议即可开始调用。
开发者如因商业目的（包括但不限于对第三方用户收费、项目投标、后台管理系统、任何其他直接或间接获取收益或利益等）使用百度地图开放平台服务，需事先获得百度地图开放平台"商用授权"。
集成步骤：
把百度地图集成在自定义控件上，需要以下步骤：
1.在百度开发者上注册，新建一个应用，并获取ak。
2.创建动态表单，用来装载百度地图自定义控件。
3.创建自定义控件的目录、JavaScript代码、html文件。
4.注册自定义控件方案。
5.编写并注册Java插件，和自定义控件交互。
集成步骤详情：
1.注册登录百度地图开放平台
官方地址：
https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
认证开发者
新建应用，获取到一个ak值
2.创建动态表单
在页面中放置两个控件，一个自定义控件，一个文本控件。对自定义控件调整宽高。
3.创建自定义控件方案
准备三个文件：css/baidumap.css，html/baidumap.html，index.js
index.js代码的几个关键点:
完整代码如下
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包
5.编写并注册Java插件
以下插件代码，获取到自定义控件CustomControl，然后调用setData方法，传入参数。
调用setData方法，会调用自定看控件的index.js里面的update: function() 方法，这时把props中的参数取出即可。
完整插件代码如下：
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);
}
}注册插件：
效果展示
移动端集成百度地图
以上 自定义控件方案、插件代码都可以用于移动端。
移动端插件代码
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.拖入自定义控件和文本控件，设置自定义控件高度宽度。
2.注册移动端插件
3.使用之前添加好的控件方案
移动端效果
输入广州
注意
进来有不少开发者下载了附件中的自定义控件方案，直接拿去用，没有按照上述文档去申请一个自己的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)
推荐阅读