ctms/ctms-admin/views/gps/index.php

<?php

/**
 * @Author: fm453
 * @Date:   2018-11-22 12:36:48
 * @Last Modified by:   fm453
 * @Last Modified time: 2020-08-23 15:12:43
 * @Email: fm453@lukegzs.com
 */

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\helpers\Url;
use yii\widgets\LinkPager;

$this->title = '路径图';
?>
<style>
    body .wrapper{
            height: 100%;
            margin: 0;
            width: 100%;
            padding: 0;
            overflow: hidden;
        }
    .map {
        height: 100%;
        width: 100%;
        float: left;
        z-index:99;
    }
</style>
<link href="//a.amap.com/Loca/static/manual/example/style/demo.css" rel="stylesheet">
<div class="wrapper wrapper-content">
    <div class="ibox-content" style="padding:0;width:100%;height:100%;">
        <div id="container" class="map" tabindex="0" style="z-index: 0;"></div>

        <form class="form-search" method="get"  action="<?=Url::toRoute('gps/index')?>" role="form">
        <input type="hidden" name="_csrf-backend" value="<?= Yii::$app->getRequest()->getCsrfToken();?>" />
        <div class="form-group btn btn-block" style="position:fixed;bottom:60px;z-index: 100;background-color: rgba(0,0,0,.5);">
            <div class="col-sm-11">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary">板车车牌号:</button>
                    </span>
                    <input type="text" class="form-control" id="keyword" name="keyword" value="<?=isset($search['keyword']) ? $search['keyword']:''?>" placeholder="输入板车车牌号" autocomplete="off">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary">出车单号:</button>
                    </span>
                    <input type="text" class="form-control" id="keyword" name="keyword" value="<?=isset($search['keyword']) ? $search['keyword']:''?>" placeholder="输入出车单号进行查询" autocomplete="off">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-info">搜索</button>
                    </span>
                </div>
            </div>
        </div>
        </form>

    </div>
</div>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=<?= Yii::$app->params['amap']['key']?>"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=<?= Yii::$app->params['amap']['key']?>"></script>
<script>
var infoWin;
var tableDom;
/**
 * 封装便捷的撞题
 * @param {AMap.Map} map
 * @param {Array} event
 * @param {Object} content
 */
function openInfoWin(map, event, content) {
    if (!infoWin) {
        infoWin = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            offset: new AMap.Pixel(130, 100)
        });
    }

    var x = event.offsetX;
    var y = event.offsetY;
    var lngLat = map.containerToLngLat(new AMap.Pixel(x, y));

    if (!tableDom) {
        let infoDom = document.createElement('div');
        infoDom.className = 'info';
        tableDom = document.createElement('table');
        infoDom.appendChild(tableDom);
        infoWin.setContent(infoDom);
    }

    var trStr = '';
    for (var name in content) {
        var val = content[name];
        trStr +=
            '<tr>' +
                '<td class="label">' + name + '</td>' +
                '<td>&nbsp;</td>' +
                '<td class="content">' + val + '</td>' +
            '</tr>'
    }

    tableDom.innerHTML = trStr;
    infoWin.open(map, lngLat);
}

function closeInfoWin() {
    if (infoWin) {
        infoWin.close();
    }
}
</script>
<script>
    var districts = [
    { 'name': '琼BT0069', 'center': '109.513775,18.257327','addr':'海南省三亚市吉阳区河东区街道椰林水岸'},
];
</script>
<script>
    var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/twilight',
        zoom: 4,
        center: [107.4976, 32.1697],
        features: ['bg', 'road'],
        viewMode: '3D'
    });

    var amaplayer = new Loca.PointLayer({
        eventSupport: true,
        map: map
    });

    amaplayer.on('mousemove', function (ev) {
        // 事件类型
        var type = ev.type;
        // 当前元素的原始数据
        var rawData = ev.rawData;
        // 原始鼠标事件
        var originalEvent = ev.originalEvent;

        openInfoWin(map, originalEvent, {
            '车牌': rawData.name,
            '位置': rawData.center,
            '详址': rawData.addr
        });
    });

    amaplayer.on('mouseleave', function (ev) {
        closeInfoWin();
    });

    amaplayer.setData(districts, {
        lnglat: 'center'
    });

    amaplayer.setOptions({
        style: {
            radius: 10,
            color: '#4fc2ff',
            borderColor: '#ffffff',
            borderWidth: 1.5,
            opacity: 0.8
        },
        selectStyle: {
            radius: 14,
            color: '#ffe30a'
        }
    });

    amaplayer.render();
</script>