php开发-fastadmin高德地图点位展示效果

发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="{$config.language}">
<head>
    {include file="common/meta" /}
</head>

<body>
<div id="container"></div>
</body>
{include file="common/script" /}
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
define(['gdmap'], function f() {
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            var map = new AMap.Map('container', {
                resizeEnable: true,
                center: [119, 33],
                zoom: 13
            });

            function createInfoWindow(title, content) {
                var info = document.createElement("div");
                info.className = "custom-info input-card content-window-card";

                //可以通过下面的方式修改自定义窗体的宽高
                info.style.width = "250px";
                // 定义顶部标题
                var top = document.createElement("div");
                var titleD = document.createElement("div");
                var closeX = document.createElement("img");
                top.className = "info-top";
                titleD.innerHTML = title;
                closeX.src = "https://webapi.amap.com/images/close2.gif";
                closeX.onclick = closeInfoWindow;

                top.appendChild(titleD);
                top.appendChild(closeX);
                info.appendChild(top);

                // 定义中部内容
                var middle = document.createElement("div");
                middle.className = "info-middle";
                middle.style.backgroundColor = 'white';
                middle.innerHTML = content;
                info.appendChild(middle);

                // 定义底部内容
                var bottom = document.createElement("div");
                bottom.className = "info-bottom";
                bottom.style.position = 'relative';
                bottom.style.top = '0px';
                bottom.style.margin = '0 auto';
                var sharp = document.createElement("img");
                sharp.src = "https://webapi.amap.com/images/sharp.png";
                bottom.appendChild(sharp);
                info.appendChild(bottom);
                return info;
            }

            //关闭信息窗体
            function closeInfoWindow() {
                map.clearInfoWindow();
            }

            map.clearMap();  // 清除地图覆盖物


            var markers = JSON.parse(Config.list);

            //添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
            markers.forEach(function (marker) {

                var point = new AMap.Marker({
                    map: map,
                    icon: marker.icon,
                    position: [marker.lon, marker.lat],
                    offset: new AMap.Pixel(-13, -30)
                });
                point.on('click', function () {
                    infoWindow.open(map, point.getPosition());
                });

                // 设置鼠标划过点标记显示的文字提示
                point.setTitle('marker.site_name');

                // 设置label标签
                // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                point.setLabel({
                    direction: 'right',
                    offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                    content: "<div style='font-weight: bold'>" + marker.site_name + "</div>", //设置文本标注内容
                });
                //实例化信息窗体
                var title = marker.site_name,
                    content = [];
                content.push("所属于区县:" + marker.address);
                content.push("所属于园区:" + marker.industrial_park);

                if (marker.data) {
                    content.push("-------------------------------------------------");
                    content.push("检测时间:" + marker.data.cp_datatime_text);
                    for (let i in  marker.data.pollution) {
                        if (marker.data.pollution[i].name) {
                            content.push(  marker.data.pollution[i].name+"&nbsp：&nbsp" + marker.data.pollution[i].min + '~' + marker.data.pollution[i].max);
                        }
                    }
                }
                var infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: createInfoWindow(title, content.join("<br/>")),
                    offset: new AMap.Pixel(16, -45)
                });

            });
            var center = map.getCenter();
            map.setFitView();
        },
    };
    return Controller;
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
namespace app\admin\controller\hj212;


use app\common\controller\Backend;
use app\admin\model\hj212\Data;
use app\admin\model\hj212\Device;

class Pointmap extends Backend
{
    public function _initialize()
    {
        $this->layout = "";
        parent::_initialize();
        $this->model = new \app\admin\model\hj212\PollutionSite;
    }


    public function index()
    {
        $data = $this->model->all();
        $list = collection($data)->toArray();
        $list = array_map(function ($val) {
            $device = Device::where('site_id', $val['id'])->find();
            $data = [];
            if ($device->device_code) {
                $data = Data::where('mn', $device->device_code)
                    ->order('created_at','desc')
                    ->find();
            }
            if ($data) {
                $pollution = \app\admin\model\hj212\Pollution::with('PollutionCode')
                    ->where('data_id', $data->id)->select();
                $pollution = array_map(function ($val) {
                    $val['name'] = $val['PollutionCode']['name'];
                    unset($val['PollutionCode']);
                    return $val;
                }, $pollution);
                $data['pollution'] = $pollution;
            }
            $val['data'] = $data;
            return $val;
        }, $list);
        $this->assignconfig('list', json_encode($list));
        return $this->view->fetch();
    }
}