zoukankan      html  css  js  c++  java
  • 地图上显示点在点上标注当前点的id

    HTML:
    <div class="form-group field-company-state">
    <div style="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>
  • 相关阅读:
    【BZOJ】1076: [SCOI2008]奖励关(状压dp+数学期望)
    【COGS & USACO】896. 圈奶牛(凸包)
    【wikioi】1553 互斥的数(hash+set)
    【wikioi】1229 数字游戏(dfs+水题)
    【COGS】714. USACO 1.3.2混合牛奶(贪心+水题)
    【wikioi】1403 新三国争霸(dp+kruskal)
    【wikioi】1108 方块游戏(模拟)
    [LeetCode] 270. Closest Binary Search Tree Value 最近的二叉搜索树的值
    [LeetCode] 261. Graph Valid Tree 图是否是树
    [LeetCode] 486. Predict the Winner 预测赢家
  • 原文地址:https://www.cnblogs.com/l-zl/p/6392526.html
Copyright © 2011-2022 走看看