百度地图-区块及marker

最新推荐文章于 2024-02-27 11:23:00 发布
是可爱的大福呀~
最新推荐文章于 2024-02-27 11:23:00 发布
阅读量415
点赞数
分类专栏：百度文章标签： javascript
本文链接：https://blog.csdn.net/henghahouhei/article/details/123734754
版权
百度专栏收录该内容
4 篇文章 0 订阅
订阅专栏
let map, markerCommu;
var myIcon = './img/map/biao.png';
var myIcon1 = './img/map/biao1.png';
var infoBox;
let jiuQuMarker,tangHeMarker,jiuQuLabel,tangHeLabel,qhwMarker,qgMarker,qhwLabel,qgLabel,qhwWorkMarker=[],qgWorkMarker=[];
function initMap(mapId) {
    map = new BMapGL.Map(mapId,{
        minZoom: 11,
        maxZoom: 23
    });
    map.centerAndZoom(new BMapGL.Point(118.527981, 35.143152), 12);//临沂
    map.enableScrollWheelZoom(true);
    map.setTilt(0);
    var bd = new BMapGL.Boundary();
    bd.get('临沂市河东区', function (rs) {
        var count = rs.boundaries.length; //行政区域的点有多少个
        var pointArray = [];
        for (var i = 0; i < count; i++) {
            var path = [];
            str = rs.boundaries[i].replace(' ', '');
            points = str.split(';');
            for (var j = 0; j < points.length; j++) {
                var lng = points[j].split(',')[0];
                var lat = points[j].split(',')[1];
                path.push(new BMapGL.Point(lng, lat));
            }
            var prism = new BMapGL.Prism(path, 0.1, {
                topFillColor: '#4397cdff',
                topFillOpacity: 0.5,
                sideFillColor: '#4397cdff',
                sideFillOpacity: 0.9

            });
            map.addOverlay(prism);
        }
    });
    var styleJson = [
        {
            "featureType": "land",
            "elementType": "geometry",
            "stylers": {
                "color": "#206d8dff",
                "visibility": "on"
            }
        }, {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#4397cdff",
                "visibility": "on"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#3485b4ff",
                "visibility": "on"
            }
        }, {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": {
                "color": "#70c8eeff",
                "visibility": "on"
            }
        }, {
            "featureType": "village",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "town",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "district",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "country",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "city",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "continent",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "poilabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#c4fff9ff",
                "visibility": "on"
            }
        }, {
            "featureType": "transportationlabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#c4fff9ff",
                "visibility": "on"
            }
        }, {
            "featureType": "transportationlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "airportlabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#c4fff9ff",
                "visibility": "on"
            }
        }, {
            "featureType": "airportlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": {
                "weight": 3
            }
        }, {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
                "color": "#5cb6eaff",
                "visibility": "on"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "geometry",
            "stylers": {
                "color": "#5cb6eaff",
                "visibility": "on"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "labels.text.stroke",
            "stylers": {
                "weight": 1,
                "color": "#4a4a4aff",
                "visibility": "on"
            }
        }, {
            "featureType": "continent",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "country",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "city",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "city",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#9ceaefff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "airportlabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#9ceaefff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "transportationlabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#9ceaefff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "railway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "subway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "highwaysign",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "nationalwaysign",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "nationalwaysign",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "provincialwaysign",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "provincialwaysign",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "tertiarywaysign",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "tertiarywaysign",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "subwaylabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "subwaylabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "road",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on",
                "weight": 90
            }
        }, {
            "featureType": "road",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "shopping",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "manmade",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "manmade",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "highwaysign",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "water",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4a00",
                "visibility": "on"
            }
        }, {
            "featureType": "road",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "road",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "road",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "road",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "road",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "road",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 24
            }
        }, {
            "featureType": "highway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "weight": 3
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry",
            "stylers": {
                "weight": 3
            }
        }, {
            "featureType": "provincialway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "tertiaryway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "fourlevelway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "local",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "tertiaryway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "fourlevelway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "local",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#62bef3ff",
                "visibility": "on"
            }
        }, {
            "featureType": "local",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "local",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "fourlevelway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "tertiaryway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff",
                "visibility": "on"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "tertiaryway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "fourlevelway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff",
                "visibility": "on",
                "weight": 1
            }
        }, {
            "featureType": "fourlevelway",
            "elementType": "geometry",
            "stylers": {
                "weight": 1
            }
        }, {
            "featureType": "tertiaryway",
            "elementType": "geometry",
            "stylers": {
                "weight": 1
            }
        }, {
            "featureType": "local",
            "elementType": "geometry",
            "stylers": {
                "weight": 1
            }
        }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
                "weight": 3
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "geometry",
            "stylers": {
                "weight": 3
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
                "weight": 3
            }
        }, {
            "featureType": "highway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "highway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "highway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "highway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "nationalway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "nationalway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "nationalway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "nationalway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "provincialway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "8,10",
                "level": "8"
            }
        }, {
            "featureType": "provincialway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "8,10",
                "level": "9"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "8,10",
                "level": "8"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "8,10",
                "level": "9"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "8,10",
                "level": "8"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "8,10",
                "level": "9"
            }
        }, {
            "featureType": "cityhighway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "cityhighway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "cityhighway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "cityhighway",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "6"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "7"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "8"
            }
        }, {
            "featureType": "cityhighway",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "6,9",
                "level": "9"
            }
        }, {
            "featureType": "arterial",
            "stylers": {
                "curZoomRegionId": "0",
                "curZoomRegion": "9,9",
                "level": "9"
            }
        }, {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "9,9",
                "level": "9"
            }
        }, {
            "featureType": "arterial",
            "elementType": "labels",
            "stylers": {
                "visibility": "off",
                "curZoomRegionId": "0",
                "curZoomRegion": "9,9",
                "level": "9"
            }
        }, {
            "featureType": "background",
            "elementType": "geometry",
            "stylers": {
                "color": "#4ea3dcff"
            }
        }, {
            "featureType": "districtlabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "boundary",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "continent",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "district",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "district",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff"
            }
        }, {
            "featureType": "town",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "town",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff"
            }
        }, {
            "featureType": "village",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "village",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff"
            }
        }, {
            "featureType": "island",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "island",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#4a4a4aff"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.sidefill",
            "stylers": {
                "color": "#3ba3dbff"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.topfill",
            "stylers": {
                "color": "#3ea3daff"
            }
        }, {
            "featureType": "roadarrow",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "footbridge",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "crosswalk",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "underpass",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "parkingspace",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "laneline",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }];
    map.setMapStyleV2({styleJson: styleJson});
    streetPoint()
}

//街道点标记
function streetPoint() {
    var streetPoints = [
        {
            id: 'jiuQu',
            name: '九曲街道',
            position: [118.527981, 35.143152]
        }, {
            id: 'tangHe',
            name: '汤河镇',
            position: [118.56336, 35.102612]
        }
    ]
    jiuQuMarker = new BMapGL.Marker(new BMapGL.Point(streetPoints[0].position[0], streetPoints[0].position[1]),
        {name: streetPoints[0].id, icon: new BMapGL.Icon(myIcon, new BMapGL.Size(52, 52))});
    map.addOverlay(jiuQuMarker);
    tangHeMarker = new BMapGL.Marker(new BMapGL.Point(streetPoints[1].position[0], streetPoints[1].position[1]),
        {name: streetPoints[1].id, icon: new BMapGL.Icon(myIcon, new BMapGL.Size(52, 52))});
    map.addOverlay(tangHeMarker);
    jiuQuLabel = new BMapGL.Label(streetPoints[0].name, {
        position: new BMapGL.Point(streetPoints[0].position[0], streetPoints[0].position[1]), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-20, -70) // 设置文本偏移量
    });
    jiuQuLabel.setStyle({
        color: '#ffffff',
        borderRadius: '5px',
        borderColor:'#5cb2d5',
        background:'#5cb2d5',
        padding: '5px',
        fontSize: '16px',
        width:'auto'
    });
    map.addOverlay(jiuQuLabel);
    tangHeLabel = new BMapGL.Label(streetPoints[1].name, {
        position: new BMapGL.Point(streetPoints[1].position[0], streetPoints[1].position[1]), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-20, -70) // 设置文本偏移量
    });
    tangHeLabel.setStyle({
        color: '#ffffff',
        borderRadius: '5px',
        borderColor:'#5cb2d5',
        background:'#5cb2d5',
        padding: '5px',
        fontSize: '16px',
        width:'auto'
    });
    map.addOverlay(tangHeLabel);
    jiuQuMarker.addEventListener('click', function () {
        map.removeOverlay(jiuQuMarker)
        map.removeOverlay(jiuQuLabel)
        //点击下钻数据变化
        test();
        qhwCommu()
        $("#generalTitle").html("(前河湾社区)");
        // 修改社区概况展示内容
        $("#commuLabel1").html("楼栋数量(栋)");
        $("#commuLabel2").html("人口数量(人)");
        $("#commuLabel3").html("房屋数量(间)");
        $("#commuLabel4").html("车辆数量(辆)");
    });
    tangHeMarker.addEventListener('click', function () {
        map.removeOverlay(tangHeMarker)
        map.removeOverlay(tangHeLabel)
        qgCommu()
        $("#generalTitle").html("(洽沟社区)");
        // 修改社区概况展示内容
        $("#commuLabel1").html('楼栋数量(栋)');
        $("#commuLabel2").html('人口数量(人)');
        $("#commuLabel3").html('房屋数量(间)');
        $("#commuLabel4").html('车辆数量(辆)');
        $("#numberOfBuildings").html("15")
        $("#populationSize").html("1002")
        $("#numberOfHouses").html("500")
        $("#numberOfVehicles").html("761")
    });
}
/*社区标记*/
//前河湾社区
function qhwCommu() {
    var jiuQuPoint = new BMapGL.Point(118.413668,35.142366)
    map.setCenter(jiuQuPoint);
    setTimeout(function () {
        map.setZoom(17);
    },500)
    var commuPiont = [
        {
            id: 'qhwsq',
            name: '前河湾社区',
            position: [118.413668,35.142366]
        }
    ]
    var markerPoint = new BMapGL.Point(commuPiont[0].position[0], commuPiont[0].position[1])
    qhwMarker = new BMapGL.Marker(markerPoint,
        {name: commuPiont[0].id, icon: new BMapGL.Icon(myIcon1, new BMapGL.Size(52, 52))});
    qhwLabel = new BMapGL.Label(commuPiont[0].name, {
        position: markerPoint, // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-20, -70) // 设置文本偏移量
    });
    qhwLabel.setStyle({
        color: '#ffffff',
        borderRadius: '5px',
        borderColor:'#5cb2d5',
        background:'#5cb2d5',
        padding: '5px',
        fontSize: '16px',
        width:'auto'
    });
    map.addOverlay(qhwLabel);
    map.addOverlay(qhwMarker);
    qhwMarker.addEventListener('click', function () {
        map.removeOverlay(qhwMarker)
        map.removeOverlay(qhwLabel)
        qhwWorkPoint()
    });
}
//洽沟社区
function qgCommu() {
    var tangHePoint = new BMapGL.Point(118.569939,35.101627)
    map.setCenter(tangHePoint);
    setTimeout(function () {
        map.setZoom(17);
    },500)
    var commuPiont = [
        {
            id: 'qgsq',
            name: '洽沟社区',
            position: [118.569939,35.101627]
        }
    ]
    var markerPoint = new BMapGL.Point(commuPiont[0].position[0], commuPiont[0].position[1])
    qgMarker = new BMapGL.Marker(markerPoint,
        {name: commuPiont[0].id, icon: new BMapGL.Icon(myIcon1, new BMapGL.Size(52, 52))});
    map.addOverlay(qgMarker);
    qgLabel = new BMapGL.Label(commuPiont[0].name, {
        position: markerPoint, // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-20, -70) // 设置文本偏移量
    });
    qgLabel.setStyle({
        color: '#ffffff',
        borderRadius: '5px',
        borderColor:'#5cb2d5',
        background:'#5cb2d5',
        padding: '5px',
        fontSize: '16px',
        width:'auto'
    });
    map.addOverlay(qgLabel);
    qgMarker.addEventListener('click', function () {
        map.removeOverlay(qgMarker)
        map.removeOverlay(qgLabel)
        qgWorkPoint()
    });
}
//地图重置
function revertMap() {
    $("#generalTitle").html("");
    // 修改社区概况展示内容
    $("#commuLabel1").html('行政村(个)');
    $("#commuLabel2").html('自然村(个)');
    $("#commuLabel3").html('人口数量(万人)');
    $("#commuLabel4").html('面积(平方公里)');
    $("#numberOfBuildings").text(288)
    $("#populationSize").text(539)
    $("#numberOfHouses").text(90)
    $("#numberOfVehicles").text(834)
    map.setZoom(12);
    setTimeout(function () {
        var jiuQuPoint = new BMapGL.Point(118.527981, 35.143152)
        map.setCenter(jiuQuPoint);
    },500)
    map.removeOverlay(qhwMarker)
    map.removeOverlay(qhwLabel)
    map.removeOverlay(qgMarker)
    map.removeOverlay(qgLabel)
    map.removeOverlay(markerCommu);
    for(var q=0;q<qhwWorkMarker.length;q++){
        map.removeOverlay(qhwWorkMarker[q]);
    }
    for(var g=0;g<qgWorkMarker.length;g++){
        map.removeOverlay(qgWorkMarker[g]);
    }
    $('.web-bottom1').css('display','none')
    map.addOverlay(jiuQuMarker);
    map.addOverlay(jiuQuLabel);
    map.addOverlay(tangHeMarker);
    map.addOverlay(tangHeLabel);
    $('.infoBox').css('display','none')
}
//前河湾社区工单
function qhwWorkPoint() {
    var jiuQuPoint = new BMapGL.Point(118.413668,35.142366)
    map.setCenter(jiuQuPoint);
    setTimeout(function () {
        map.setZoom(20);
    },500)
    var workerArr = [
        {
            id: 'qhwWork1',
            name: '前河湾社区工单',
            position: [118.413472,35.142384],
            icon:'./img/map/nan.png',
            size:new BMapGL.Size(47, 60),
        },{
            id: 'qhwWork2',
            name: '前河湾社区工单',
            position: [118.413585,35.142488],
            icon:'./img/map/nan.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qhwWork3',
            name: '前河湾社区工单',
            position: [118.413912,35.142388],
            icon:'./img/map/nv.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qhwWork4',
            name: '前河湾社区工单',
            position: [118.413894,35.142163],
            icon:'./img/map/nv.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qhwWork5',
            name: '前河湾社区工单',
            position: [118.413329,35.1422],
            icon:'./img/map/nv.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qhwWork6',
            name: '前河湾社区工单',
            position: [118.41362,35.142052],
            icon:'./img/map/nan.png',
            size:new BMapGL.Size(47, 60)
        },
    ]
    //员工假数据
    var staffArr = [
        {
            id:'qhwWork1',
            name:'丁徐庆',
            position:'网格员',
            contact:'13854965378'
        },{
            id:'qhwWork2',
            name:'孟庆俊',
            position:'社区工作人员',
            contact:'13515399273'
        },{
            id:'qhwWork3',
            name:'张燕',
            position:'网格长',
            contact:'15969953371'
        },{
            id:'qhwWork4',
            name:'张静',
            position:'社区工作人员',
            contact:'18369595763'
        },{
            id:'qhwWork5',
            name:'王晓静',
            position:'网格员',
            contact:'15153960306'
        },{
            id:'qhwWork6',
            name:'刘征明',
            position:'社区工作人员',
            contact:'15376081124'
        }

    ]
    for(var i=0;i<workerArr.length;i++){
        var markerPoint = new BMapGL.Point(workerArr[i].position[0], workerArr[i].position[1])
        qhwWorkMarker[i] = new BMapGL.Marker(markerPoint,
            {name: workerArr[i].id, icon: new BMapGL.Icon(workerArr[i].icon, workerArr[i].size)});
        map.addOverlay(qhwWorkMarker[i]);
        qhwWorkMarker[i].on('click',function (e) {
            $('.infoBox').css('display','none')
            console.log('信息',e.target.latLng,staffArr[0])
            var poi = new BMapGL.Point(e.target.latLng.lng, e.target.latLng.lat);
            for(var j=0;j<staffArr.length;j++){
                if(e.target._config.name == staffArr[j].id){
                    openInfo(staffArr[j],poi)
                }
            }
        })
    }

}
//洽沟社区工单
function qgWorkPoint() {
    var tangHePoint = new BMapGL.Point(118.569939,35.101627)
    map.setCenter(tangHePoint);
    setTimeout(function () {
        map.setZoom(19);
    },500)
    var workerArr = [
        {
            id: 'qgWork1',
            name: '洽沟社区工单',
            position: [118.569737,35.101529],
            icon:'./img/map/nan.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qgWork2',
            name: '洽沟社区工单',
            position: [118.570137,35.101643],
            icon:'./img/map/nan.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qgWork3',
            name: '洽沟社区工单',
            position: [118.569953,35.101348],
            icon:'./img/map/nv.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qgWork4',
            name: '洽沟社区工单',
            position: [118.569944,35.10175],
            icon:'./img/map/nv.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qgWork5',
            name: '洽沟社区工单',
            position: [118.569715,35.101451],
            icon:'img/map/nan.png',
            size:new BMapGL.Size(47, 60)
        },{
            id: 'qgWork6',
            name: '洽沟社区工单',
            position: [118.570187,35.10168],
            icon:'img/map/nv.png',
            size:new BMapGL.Size(47, 60)
        },
    ]
    for(var i=0;i<workerArr.length;i++){
        var markerPoint = new BMapGL.Point(workerArr[i].position[0], workerArr[i].position[1])
        qgWorkMarker[i] = new BMapGL.Marker(markerPoint,
            {name: workerArr[i].id, icon: new BMapGL.Icon(workerArr[i].icon, workerArr[i].size)});
        map.addOverlay(qgWorkMarker[i]);
    }
}
//工单弹窗
function openInfo(staffInfo,poi) {
    var html = ["<div class=\"staffInfo\">\n" +
    "<div class=\"staffItem\">\n" +
    "<label for=\"\">姓名:</label>\n" +
    "<div class=\"staffName\">"+ staffInfo.name +"</div>\n" +
    "</div>\n" +
    "<div class=\"staffItem\">\n" +
    "<label for=\"\">职务:</label>\n" +
    "<div class=\"staffName\">"+ staffInfo.position +"</div>\n" +
    "</div>\n" +
    "<div class=\"staffItem\">\n" +
    "<label for=\"\">电话:</label>\n" +
    "<div class=\"staffName\">"+ staffInfo.contact +"</div>\n" +
    "</div>\n" +
    "</div>"
    ];
    infoBox = new BMapGLLib.InfoBox(map, html.join(""), {
        boxStyle: {
            width: "15vw",
            height: "17vh"
        },
        enableAutoPan: true,
        align: INFOBOX_AT_TOP,
        closeIconMargin: "3px 3px 0 0",
        closeIconUrl: './img/close.png',
        offset: new BMapGL.Size(0, 10)
    });
    var marker = new BMapGL.Marker(poi);
    infoBox.open(marker);
}
是可爱的大福呀~
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图-区块及marker

let map, markerCommu;var myIcon = './img/map/biao.png';var myIcon1 = './img/map/biao1.png';var infoBox;let jiuQuMarker,tangHeMarker,jiuQuLabel,tangHeLabel,qhwMarker,qgMarker,qhwLabel,qgLabel,qhwWorkMarker=[],qgWorkMarker=[];function initMap(mapI...
复制链接

扫一扫
专栏目录