我们在map对象上添加了一个click事件的监听函数，当点击地图上某个位置时，监听函数通过控制台把当前点击的位置输出出来（注意需要有控制台的支持，比如firebug，如果没有控制台则可使用alert把point的lng和lat属性输出出来）。此外，你也可以使用API提供的坐标拾取工具来完成（http://dev.baidu.com/wiki/static/map/API/tool/getPoint/），它支持检索并且点击地图上任意位置时会出现该位置的坐标。
标注元素组成
从DOM元素构成角度看，一个完整的标注是由以下几个部分组成的：
标注点击区域
标注图标
标注阴影
下面是示意图：
1. 需要有一个被选择的mesh,通过raycaster获取 2. 创建先和一个平面 3. 将线和标注的面放在获取的mesh上 var mouse =new THREE.Vector2() var raycaster =new THREE.Raycaster() mouse.x = (event.clientX / domElement.width) *2 -1 mouse.y = -(event.clientY / domElement.height) *2 +1 raycaster.setFromCamera(mouse, camera) var intersects = raycaster.intersectObjects(scene.children, false)// selectedObject = intersects[0].object// 被选中的标注对象 // var startP,endP// 这里也是通过raycaster获取到的 var color = parameters.hasOwnProperty("color") ? parameters.color :0x0000ff var lineMat =new THREE.LineBasicMaterial({ "color": 0xff0000 }) var lineGeo =new THREE.Geometry() lineGeo.vertices.push(startPos) lineGeo.vertices.push(endPos) var line =new THREE.Line(lineGeo, lineMat) // 初始化一个sprite,这是一个始终面向相机的平面, var sprite = new textSprite(这并不是一个构造函数,不想写那么多,自行去官网查看) ....... sprite.scale.set(_spriteScale, _spriteScale, _spriteScale)// 设置的是sprite的大小 selectedObject.add(line)// 添加 line.worldToLocal(_endPos)// 设置点 sprite.position.copy(_endPos)// 设置sprite的位置 line.add(sprite)添加并进行关联 注: sprite可以用于进行标注热点等操作,具体实现较为简单,同时因为也算是mesh,所以sprite可以设置texture,使用图片作为背景等,也可以把一个canvas,把需要的文字图片等都加入进来./* 地图上定位点 */function anchorPoint(markerArr){
var point = new Array()//标注点经纬信息
var marker = new Array()//存放标注点对象
var info = new Array()//存放提示信息窗口对象的数组
var searchInfoWindow =new Array()//存放检索信息窗口对象的数组
for (var i = 0i <markerArr.lengthi++) {
var lng = markerArr[i].lng
var lat = markerArr[i].lat
point[i] = new BMap.Point(lng, lat)
marker[i] = new BMap.Marker(point[i])
if(markerArr[i].parkEmptyCount >= 20 &&markerArr[i].parkEmptyUpdateDate != null){
var icons = MAT_HOST + "/public/images/green.png"//图片路径
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
})//显示图标大小
marker[i].setIcon(icon)//设置标签的图标为自定义图标
marker[i].disableMassClear()
map.addOverlay(marker[i])//将标签添加到地图中去
}
if(markerArr[i].parkEmptyCount >0 &&markerArr[i].parkEmptyCount <20 &&markerArr[i].parkEmptyUpdateDate != null){
var icons = MAT_HOST + "/public/images/orange.png"
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
})
marker[i].setIcon(icon)
marker[i].disableMassClear()
map.addOverlay(marker[i])
}
if(markerArr[i].parkEmptyCount == 0 || markerArr[i].parkEmptyUpdateDate == null){
var icons = MAT_HOST + "/public/images/red.png"
var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{
anchor: new BMap.Size(10, 25),
infoWindowAnchor: new BMap.Size(10, 0)
})
marker[i].setIcon(icon)
marker[i].disableMassClear()
map.addOverlay(marker[i])
}
var parkEmptyUpdateDate = markerArr[i].parkEmptyUpdateDate
parkEmptyUpdateDate = $.dateFormat({date:parkEmptyUpdateDate})
if(parkEmptyUpdateDate == ""){
markerArr[i].parkEmptyCount = "未知"
}
info[i] = '<div style="padding:5pxfont-size:12pxline-height:16px">'
info[i] += ' <p style="padding:4px 0">地址：'+markerArr[i].addr+'</p>'
info[i] += ' <p style="padding:4px 0">空车位个数：' + markerArr[i].parkEmptyCount + '</p>'
if(parkEmptyUpdateDate != ""){
info[i] += ' <p style="padding:4px 0">最后更新时间：' + parkEmptyUpdateDate
}
info[i] += '</div>'
searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
title: '<strong>'+markerArr[i].unitName+'</strong>', //标题
width:300, //宽度
panel:"panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes:[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
})
//鼠标移上事件
marker[i].addEventListener("mouseover", (function(k){
return function(){
searchInfoWindow[k].open(marker[k])//在marker上打开检索信息窗口
}
})(i))
map.addEventListener("click", (function(k){
return function(){
searchInfoWindow[k].close(marker[k])//在marker上打开检索信息窗口
}
})(i))
}
}
循环打印就行了
