谷歌地图标记定位和标记群集

最新推荐文章于 2024-07-30 15:09:57 发布
陈大步
最新推荐文章于 2024-07-30 15:09:57 发布
阅读量441
点赞数
分类专栏： JS
本文链接：https://blog.csdn.net/dadada_youzi/article/details/103928308
版权
JS 专栏收录该内容
11 篇文章 0 订阅
订阅专栏
<#assign tags=JspTaglibs["/WEB-INF/tld/tags.tld"] />
<!DOCTYPE html>
<html>
<head>
    <base href="${path}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<#include "/static/config.ftl"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script
            src="https://maps.googleapis.com/maps/api/js?key=yourkey&sensor=false">
    </script>

    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0
        }

        #googleMap {
            height: 100%
        }

        #googleMaps {
            display: none;
            max-height: 90%;
            overflow-y: scroll;
            width: 22%;
        }

        #googleMaps:hover div {
            display: block;
        }

        .form-group {
            margin-bottom: 6px;
            margin-top: 6px;
        }

    </style>

    <script>
        var googleMap;
        $(function () {

            googleMap = new google.maps.Map(document.getElementById('googleMap'),
                    {
                        center: new google.maps.LatLng(-1.908742, 120.120850),
                        zoom: 3,
                        gestureHandling: 'greedy',//鼠标缩放即可
                        mapTypeId: google.maps.MapTypeId.ROADMAP  /*地图的初始类型*/
                    });

            var markerList = [];
            //获取数据初始化
            $.getJSON("${ctx}/map/getJson.do", function (data) {

                var markersDate = data;

                var geocoder = new google.maps.Geocoder();

                markersDate.forEach(function (markersMark, index) {

                    var contentList;

                    var contentListplateNumber = markersDate[index].plateNumber;
                    //console.log(markersDate[index].plateNumber + markersDate[index].temperature)
                    var address = JSON.parse(markersDate[index].address);
                    //1表示叉车，2表示货车
                    if (markersMark.type == 1) {

                        contentList = '<div class=marker style="margin-top:20px;border-bottom: 1px solid #eaeaea;">'
                                + '<div style="font-size: 15px">' + $.i18n.prop('PlateNumberColon') + markersDate[index].plateNumber + '</div>' +
                                '<div>' + $.i18n.prop('TemperatureColon') + markersDate[index].temperature + "℃" + '&emsp;' + '&emsp;' + '&emsp;' + '&emsp;' + $.i18n.prop('SpeedColon') + markersDate[index].speed + "km/h" + '</div>' +
                                '<div>' + $.i18n.prop('ElectricQuantity') + markersDate[index].battery + "%" + '&emsp;' + '&emsp;' + '&emsp;' + '&emsp;' + $.i18n.prop('Voltage') + (markersDate[index].voltage).toFixed(1) + "V" + '</div>' +
                                '<div>' + $.i18n.prop('TotalTravelTime') + markersDate[index].totalHour + '</div>' +
                                '<div>' + $.i18n.prop('TotalCharge') + markersDate[index].chargeTimes + $.i18n.prop('TimesColon') + '</div>' +
                                '<div>' + $.i18n.prop('OverChargesColon') + markersDate[index].overChargeTimes + $.i18n.prop('TimesColon') + '</div>' +
                                '<div>' + $.i18n.prop('OverDischargesColon') + markersDate[index].overDischargeTimes + $.i18n.prop('TimesColon') + '</div>' +
                                '<div id="result">' + $.i18n.prop('GPSLocation') + address[0].formatted_address + '</div>' +
                                '<div>' + $.i18n.prop('MoreTime') + markersDate[index].activeTime + '</div>' + '</div>';
                    } else {
                        contentList = '<div class=marker style="margin-top:20px;border-bottom: 1px solid #eaeaea;">' + '<div style="font-size: 15px">' + $.i18n.prop('PlateNumberColon') + markersDate[index].plateNumber + '</div>' +
                                '<div>' + $.i18n.prop('TemperatureColon') + markersDate[index].temperature + "℃" + '</div>' +
                                '<div>' + $.i18n.prop('SpeedColon') + markersDate[index].speed + "km/h" + '&emsp;' + '&emsp;' + '&emsp;' + '&emsp;' + $.i18n.prop('RotationSpeed') + markersDate[index].rpm +  '</div>' +
                                '<div>' + $.i18n.prop('OilPressure') + markersDate[index].oilPressure + "kPa" + '&emsp;' + '&emsp;' + '&emsp;' + '&emsp;' + $.i18n.prop('Mileage') + markersDate[index].mileage + "km" + '</div>' +
                                '<div>' + $.i18n.prop('FuelConsumption') + markersDate[index].fuelConsumption + "L/100KM" + '&emsp;' + '&emsp;' + '&emsp;' + '&emsp;' + $.i18n.prop('SurplusOil') + markersDate[index].surplusOil + "L" + '</div>' +
                                '<div>' + $.i18n.prop('TotalTravelTime') + markersDate[index].totalHour + '</div>' +
                                '<div id="result">' + $.i18n.prop('GPSLocation') + address[0].formatted_address + '</div>' +
                                '<div>' + $.i18n.prop('MoreTime') + markersDate[index].activeTime + '</div>' + '</div>';
                    }

                    /*添加icon*/
                    /*marker.push(new google.maps.Marker({
                        position: new google.maps.LatLng(markersMark.latitude, markersMark.longitude),
                        map: googleMap
                    }));*/

                    //经纬度数组
                    var locations = [{
                        lat: markersMark.latitude,
                        lng: markersMark.longitude
                    }];

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(markersMark.latitude, markersMark.longitude),
                        map: googleMap,
                        label: contentListplateNumber,//车牌
                        infoTable: contentList,//标记群集点击弹框信息
                        myObj: {myKey: i} //排序

                    });

                    markerList.push(marker);
                    //infowindow.open(googleMap, marker);
                    /*点击弹出窗口*/
                    attachSecretMessage(contentList, marker, markersDate[index], contentListplateNumber);
                });

                //传递给标记群集程序的选项
                const clusterOptions = {
                    imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
                    //gridSize: 30,
                    zoomOnClick: false,//单击不放大
                    // maxZoom: 10,
                };
                //标记聚类
                var markerCluster = new MarkerClusterer(googleMap, markerList, clusterOptions);

                //标记群集的点击事件
                google.maps.event.addListener(markerCluster, 'clusterclick', function (c) {

                    //console.log('Number of managed markers in cluster: ' + c.getSize());
                    var m = c.getMarkers();
                    var content = '';
                    for (var i = 0; i < m.length; i++) {
                        var marker = m[i];
                        content += marker.infoTable;
                        content += ("<br>");
                    }
                    var infowindow = new google.maps.InfoWindow();
                    infowindow.setPosition(c.getCenter());
                    infowindow.close();
                    infowindow.setContent(content);
                    infowindow.open(googleMap);

                    google.maps.event.addListener(googleMap, 'zoom_changed', function () {
                        infowindow.close();
                    });
                });


                //改变群集样式
                const styles = markerCluster.getStyles();
                for (let i = 0; i < styles.length; i++) {
                    styles[i].textColor = "width";
                    styles[i].textSize = 18;
                }

            });
        });


        //点击标记弹窗
        function attachSecretMessage(contentList, marker, markersDate, contentListplateNumber) {
            //  infowindow.open(googleMap, contentListplateNumber);
            var infowindow = new google.maps.InfoWindow({
                content: contentList
            });
            marker.addListener('click', function () {
                infowindow.open(marker.get('googleMap'), marker);
            });
        }


        /*google.maps.event.addDomListener(window, 'load', initialize);*/


        /*清空*/
        function clean() {
            $("#googleMap").ready("refresh");
            document.location.reload();  //刷新当前页面
        }


    </script>
</head>

<body>
<#--<div style="position:relative;height:100%;width:100%">-->

<div style="left: 50%;/*position:absolute;height:3%;width:100%*/">
    <div class="row" style="margin-left: 90px;">
        <div class="form-group col-sm-2 form-horizontal">
            <div class="col-sm-12">
                <input type="text" id="_plateNumber" name="plateNumber" class="i18n-input form-control"
                       style="height: 32px;border-radius:7px;border-color:#999999" autocomplete="off"
                       selectname="PleaseEnterPlateNumber" selectattr="placeholder">
            </div>
        </div>

        <div class="form-group col-sm-2 form-horizontal">
            <button class="btn btn-primary btn-outline" id="queryButton" onclick="query();"><span name="Inquire"
                                                                                                  class="i18n fa fa-search"></span>
            </button>
            &nbsp;
            <button class="btn btn-outline btn-default" id="queryButton" onclick="clean();"><span name="Clean"
                                                                                                  class="i18n fa fa-rotate-left"></span>
            </button>
            &nbsp;
        </div>
    </div>
</div>

<div id="googleMap" style="width:100%; height:93%;"></div>
<#--<div id="googleMaps" style="width:100%; height:95%;"></div>-->

<#--</div>-->

</body>
</html>
陈大步
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷歌地图标记定位和标记群集

<#assign tags=JspTaglibs["/WEB-INF/tld/tags.tld"] /><!DOCTYPE html><html><head> <base href="${path}/"> <meta charset="utf-8"> <meta name="vi...
复制链接

扫一扫
专栏目录