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>

地图上显示点在点上标注当前点的id的更多相关文章

  1. JavaScript总结-网页上显示时间

    网页上显示时间 代码如下: <TABLE> <TR> <TD><span id="localtime"></span> ...

  2. [Xcode 实际操作]四、常用控件-(17)为MKMapView地图上显示提示框

    目录:[Swift]Xcode实际操作 本文将演示当点击地图上的标注圆点时,弹出信息窗口. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...

  3. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  4. OpenLayers在地图上显示统计图,饼图线状图柱状图,修复统计图跳动的问题

    环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...

  5. html5定位获取当前位置并在百度地图上显示

    用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...

  6. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  7. 百度地图API显示多个标注点并添加百度样式检索窗口

    原作者博客地址:http://blog.csdn.net/a497785609/article/details/24009031 在此基础上进行了修改: 1.添加闭包,将i传入内部 2.添加地图和卫星 ...

  8. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

  9. 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

随机推荐

  1. CF777E Hanoi Factory

    DP单调栈优化 看到这道题可以很自然的想到DP 设$dp[i]$表示最后一个$ring$为$i$的最大高度 首先将$b$为第一关键字,$a$为第二关键字,升序排序元素 那么对于$i$来说,它下面的$r ...

  2. Mybatis 批量更新遇到的小问题

    小问题 记一个开发过程中因为小细节的遗漏而引发的 "莫名其妙",公司中有个2B(to B)供应链项目,持久层用的是 JPA,这里我就不吐槽 JPA 了,这种 SQL 嵌入在代码里的 ...

  3. 【QT】QtConcurrent::run()+QThreadPool实现多线程

    往期链接: <QThread源码浅析> <子类化QThread实现多线程> <子类化QObject+moveToThread实现多线程> <继承QRunnab ...

  4. python爬虫03 Urllib库

    Urllib   这可是 python 内置的库 在 Python 这个内置的 Urllib 库中 有这么 4 个模块 request request模块是我们用的比较多的 就是用它来发起请求 所以我 ...

  5. 分布式流平台Kafka

    提到Kafka很多人的第一印象就是它是一个消息系统,但Kafka发展至今,它的定位已远不止于此,而是一个分布式流处理平台.对于一个流处理平台通常具有三个关键能力: 1. 发布和订阅消息流,在这一点上它 ...

  6. Docker - 解决 gitlab 容器上的项目进行 clone 时,IP 地址显示一串数字而不是正常 IP 地址的问题

    问题背景 通过 gitlab 容器创建了一个项目,想 clone 到本地,结果发现项目的 IP 地址是一串数字 问题排查 明明创建项目的时候,IP 地址还是正常的鸭! 再看看项目的 settings ...

  7. Docker(33)- 如何修改 docker 容器的端口映射

    如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 问题背景 docker run ...

  8. innodb为什么需要doublewrite(转)

    InnoDB的page size默认是16KB,而操作系统的一个block size是4KB,磁盘io block则更小.那么InnoDB的page刷到磁盘上要写4个操作系统block,在极端情况下( ...

  9. fcntl函数用法——设置文件锁

    fcntl函数.锁定文件,设置文件锁.设置获取文件锁:F_GETLK .F_SETLK  .F_SETLKW文件锁结构,设置好用于fcntl函数的第三个参数.struct flock{    shor ...

  10. 机器学习3《数据集与k-近邻算法》

    机器学习数据类型: ●离散型数据:由记录不同类别个体的数目所得到的数据,又称计数数据,所 有这些数据全部都是整数,而且不能再细分,也不能进一步提高他们的精确度. ●连续型数据:交量可以在某个范围内取任 ...