地图上显示点在点上标注当前点的id

HTML:
<div class="form-group field-company-state">
<div style="width:1000px;height:500px;border:0px solid gray" id="container"></div>
</div>
php:
$model = Concentrator::find()->where(['in', 'company_id', $companyIds])->all();
$concentratorArray = [];
foreach($model as $concentrator) {
$concentratorArray[] = [
'name' => "<p>名称:".$concentrator->name ." <a href='/distributor/device/list?c=".$concentrator->id."' class='btn btn-success btn-xs'>查看</a></p>" . "<p>编号:" . $concentrator->number . "</p>" . "<p>状态:$concentrator->isOnlineText</p>",
'latitude' => $concentrator->latitude,
'longitude' => $concentrator->longitude,
'number' => $concentrator->number
];
}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<?=Yii::$app->params['baiduMapAk'];?>"></script>
<script>
//百度地图
var map = new BMap.Map("container");
//添加鼠标滚动缩放
map.enableScrollWheelZoom();
//添加缩放平移控件
map.addControl(new BMap.NavigationControl());
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
var point = new BMap.Point('119.163431', '36.71894');
map.centerAndZoom(point,13);
var longitude_latitude = <?=json_encode($data);?>;

var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
/*title : "信息窗口" , // 信息窗口标题*/
enableMessage:true//设置允许信息窗发送短息
};

var label;
for(var i=0;i<longitude_latitude.length;i++){
point = new BMap.Point(longitude_latitude[i].longitude, longitude_latitude[i].latitude);
var marker = new BMap.Marker(new BMap.Point(longitude_latitude[i].longitude,longitude_latitude[i].latitude)); // 创建标注
var content = longitude_latitude[i].name;
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content,marker);

label = new BMap.Label(longitude_latitude[i].number, {position : point,offset : new BMap.Size(-17, -25)}); // 创建文本标注对象
label.setStyle({
color : "#fff",
backgroundColor:"red",
maxWidth:"none",
fontSize : "12px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);

}
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
</script>
posted @ 2017-02-13 09:36  py卡卡  阅读(348)  评论(0编辑  收藏  举报