1
进入百度地图,点击最上面右边的“地图...
2
进入开放平台页面,如图,找到“坐标拾...
3
点击地图,可以看到右上角的文本框中
/*** 添加标记
* @param [{id:主键,name:名称,lon:经度,lat:纬度,icon:图标,context:d窗内容,viewImg:d窗图片},...] data
*/
function addMar(data){
for(var i = 0 i < data.length i++){
var marker = new BMap.Marker(new BMap.Point(data[i].lon, data[i].lat),{icon:new BMap.Icon(data[i].icon, new BMap.Size(50,50))}) // 创建标注
marker.setTitle(data[i].name)
marker.dataCont = data[i]
map.addOverlay(marker)
marker.addEventListener("click", function(e){
var viewWin = "<h4 style='margin:0 0 5px 0padding:0.2em 0'>"+e.target.dataCont.name+"</h4>" +
"<img style='float:rightmargin:4px' id='imgDemo' src='"+e.target.dataCont.viewImg+"' width='139' height='104' title='"+e.target.dataCont.name+"'/>" +
"<p style='margin:0line-height:1.5font-size:13pxtext-indent:2em'>"+e.target.dataCont.context+"</p>" +
"</div>"
var infoWindow = new BMap.InfoWindow(viewWin)
this.openInfoWindow(infoWindow)
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw()//防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
}
})
}
}
可以这样,先把生成标注的json数据直接存进marker对象.添加marker的点击监听,触发监听事件时会拿到marker对象本身,从里面可以获取之前我们存进去的json数据,然后拿这个json数据直接生成d窗
ThingJS 系统内置了很多事件,比点击鼠标、键盘输入、层级变化等。用户可以监听这些事件,在事件回调中进行相应的业务逻辑处理网页链接
拾取
通过属性和接口获取鼠标拾取(Pick)的物体
当鼠标在一个物体上悬停时,我们经常希望做一些 *** 作,比如变色等。
我们使用 Picker 类来获取鼠标拾取(Pick)的物体,通过 app.picker 得到 Picker 类来实现这个功能,见下例:
//判断拾取的物体是否改变if(app.picker.isChanged()) {
//通过app.picker.objects 得到当前拾取的物体
console.log(app.picker.objects)
//通过app.picker.previousObjects 得到之前拾取的物体
console.log(app.picker.previousObjects)}
通过事件获取鼠标拾取的物体
可以通过 MouseEnter 和 MouseLeave 来实现 。
// 鼠标拾取物体显示边框app.on(THING.EventType.MouseEnter, '.Thing' ,function(ev) {
ev.object.style.outlineColor = '#FF0000'})// 鼠标离开物体边框取消app.on(THING.EventType.MouseLeave,'.Thing', function(ev) {
ev.object.style.outlineColor = null})
查看示例
示例效果如下图所示:
请点击输入图片描述
当 Pick 发生变化时会触发 PickChange 事件,也可以通过事件的回调参数获取当前和之前的拾取物体。
app.on(THING.EventType.PickChange,function (ev) {
ev.objects.style.color = '#ff0000'
ev.previousObjects.style.color = null})
区域 Pick 物体
有时我们通过鼠标框选一个区域,在区域内的物体我们认为是被 `Pick` 的,如下例:
//由于框选比较消耗性能,因此预先设置框的“候选集”,只在候选集中框选var things = app.query('.Thing')app.picker.areaCandidates = things//启动框选 传入 鼠标按下时开始框选的屏幕坐标app.picker.startAreaPicking({
x: x,
y: y})//结束框选app.picker.endAreaPicking()
查看示例
pickedResultFunc
可通过 pickedResultFunc 设置拾取对象回调函数,详见代码块,如下图:
请点击输入图片描述
选择
选择物体
鼠标悬停到物体上,但不代表我选择它了,比如是我们点击后才表明我们选择了它。选择物体,我们通过 Selection模块实现,可通过 app.selection 的接口实现该功能,见下例:
//将物体加入到选择集中app.selection.select(obj)// 判断对象是否在选择集中app.selection.has(obj)//将物体从选择集中删除app.selection.deselect(obj)//清空选择集app.selection.clear()
通过属性和方法,侦测选择集变化
Selection 通过提供 isChanged 方法获取选择集变化,通过 objects 和 previousObjects 获取当前选择集和变化之前的选择集,见下例:
if(app.selection.isChanged()) {
//获取当前哪些物体被选择
console.log(app.selection.objects)
//当isChanged时,之前都有哪些物体被选择
console.log(app.selection.previousObjects)}
通过事件侦测选择集变化
可以通过 Select 和 Deselect 事件精确控制物体针对选择的响应,如下例:
app.on(THING.EventType.Select, '.Thing', function (ev) {
// 选择集中的物体颜色进行改变
ev.object.style.color = "#ff0000"})app.on(THING.EventType.Deselect, '.Thing', function (ev) {
// 物体从选择集中删除时,清除颜色
ev.object.style.color = null})
我们也可以通过 SelectionChange 事件。
app.on(THING.EventType.SelectionChange, function (ev) {
console.log(ev.previousObjects+" "+ev.objects)})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)