JavaScript API GL beta添加多个Marker和InfoWindow

向右看齐 2023-08-17 17:40 47阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <title>Hello world!</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .mapContainer{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                overflow: hidden;
            }
            #container {
                /*地图(容器)显示大小*/
                position: relative;
                width: 100%;
                height: 100%;
            }
    
    
        </style>
    
    </head>
    
    <body>
    
    <div class="mapContainer">
        <div id="container"></div>
    </div>
    
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=P3YBZ-MKDHX-XJU4P-7OEMU-X6Z25-EEBPH"></script>
    <script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            //怀化市
            // "lat": 27.56974,
            // "lng": 110.0016
            var center = new TMap.LatLng(27.56974, 110.0016)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 8.5,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
            //初始化marker
            var marker = new TMap.MultiMarker({
                id: "marker-layer", //图层id
                map: map,
                styles: { //点标注的相关样式
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": { x: 16, y: 32 },
                        "src": "./imgtest/markIcon.png"
                    })
                },
                geometries: [{ //点标注数据数组
                    //邵阳县
                    // "lat": 26.99078,
                    // "lng": 111.27382
                    "id": "1",
                    "styleId": "marker",
                    "position": new TMap.LatLng(26.99078, 111.27382),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    //隆回县
                    // "lat": 27.11402,
                    // "lng": 111.03249
                    "id": "2",
                    "styleId": "marker",
                    "position": new TMap.LatLng(27.11402, 111.03249),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    //洞口县
                    // "lat": 27.06038,
                    // "lng": 110.57583
                    "id": "3",
                    "styleId": "marker",
                    "position": new TMap.LatLng(27.06038, 110.57583),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    //新宁县
                    // "lat": 26.43346,
                    // "lng": 110.85674
                    "id": "4",
                    "styleId": "marker",
                    "position": new TMap.LatLng(26.43346, 110.85674),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "城步苗族自治县",
                    // "lat": 26.39156,
                    // "lng": 110.32285
                    "id": "5",
                    "styleId": "marker",
                    "position": new TMap.LatLng(26.39156, 110.32285),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "桑植县"
                    // "lat": 29.39971,
                    // "lng": 110.16428
                    "id": "6",
                    "styleId": "marker",
                    "position": new TMap.LatLng(29.39971, 110.16428),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "沅陵县",
                    // "lat": 28.45277,
                    // "lng": 110.39388
                    "id": "7",
                    "styleId": "marker",
                    "position": new TMap.LatLng(28.45277, 110.39388),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "溆浦县"
                    // "lat": 27.90834,
                    // "lng": 110.59486
                    "id": "8",
                    "styleId": "marker",
                    "position": new TMap.LatLng(27.90834, 110.59486),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "麻阳苗族自治县"
                    //"lat": 27.86555,
                    // "lng": 109.80256
                    "id": "9",
                    "styleId": "marker",
                    "position": new TMap.LatLng(27.86555, 109.80256),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "通道侗族自治县"
                    // "lat": 26.15794,
                    // "lng": 109.78449
                    "id": "10",
                    "styleId": "marker",
                    "position": new TMap.LatLng(26.15794, 109.78449),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "泸溪县"
                    //     "lat": 28.21639,
                    //     "lng": 110.21965
                    "id": "11",
                    "styleId": "marker",
                    "position": new TMap.LatLng(28.21639, 110.21965),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "凤凰县"
                    //     "lat": 27.94843,
                    //     "lng": 109.59832
                    "id": "12",
                    "styleId": "marker",
                    "position": new TMap.LatLng(27.94843, 109.59832),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "保靖县"
                    //     "lat": 28.70001,
                    //     "lng": 109.66054
                    "id": "13",
                    "styleId": "marker",
                    "position": new TMap.LatLng(28.70001, 109.66054),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "古丈县"
                    //     "lat": 28.61711,
                    //     "lng": 109.95085
                    "id": "14",
                    "styleId": "marker",
                    "position": new TMap.LatLng(28.61711, 109.95085),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "永顺县"
                    //     "lat": 29.00515,
                    //     "lng": 109.84807
                    "id": "15",
                    "styleId": "marker",
                    "position": new TMap.LatLng(29.00515, 109.84807),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "龙山县"
                    //     "lat": 29.4579,
                    //     "lng": 109.44387
                    "id": "16",
                    "styleId": "marker",
                    "position": new TMap.LatLng(29.4579, 109.44387),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "花垣县"
                    //     "lat": 28.57211,
                    //     "lng": 109.48224
                    "id": "17",
                    "styleId": "marker",
                    "position": new TMap.LatLng(28.57211, 109.48224),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "新化县"
                    //     "lat": 27.72663,
                    //     "lng": 111.32743
                    "id": "18",
                    "styleId": "marker",
                    "position": new TMap.LatLng(27.72663, 111.32743),
                    "properties": {
                        "title": "marker"
                    }
                },{
                    // "fullname": "涟源市"
                    //     "lat": 27.69271,
                    //     "lng": 111.66446
                    "id": "19",
                    "styleId": "marker",
                    "position": new TMap.LatLng(27.69271, 111.66446),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });
            //标记点击事件
            marker.on("click", function (evt) {
                var markCenter = evt.geometry.position; //获取标记中心点坐标
                //设置infoWindow
                //infoWindow.open(); //打开信息窗
                //infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
                //infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
                console.log(evt.geometry.position.toString());
                // console.log(markCenter.getLat().toFixed(5))
                // console.log((parseFloat(markCenter.getLat().toFixed(5))+0.02).toFixed(5));
                // console.log(markCenter.getLng().toFixed(6))
                // console.log((parseFloat(markCenter.getLng().toFixed(6))+0.02).toFixed(6));
                var ne = new TMap.LatLng((parseFloat(markCenter.getLat().toFixed(6))+0.04).toFixed(6),(parseFloat(markCenter.getLng().toFixed(6))+0.04).toFixed(6));//东北角坐标
                var sw = new TMap.LatLng((parseFloat(markCenter.getLat().toFixed(6))-0.04).toFixed(6),(parseFloat(markCenter.getLng().toFixed(6))-0.04).toFixed(6));//西南角坐标
                // console.log(ne);
                // console.log(sw);
                var latLngBounds = new TMap.LatLngBounds(sw, ne)
                map.fitBounds(latLngBounds); //根据指定的范围调整地图视野
            })
            //初始化infoWindow
            //设置infoWindow
            var infoWindow1 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(26.99078, 111.27382),
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/1.png' width='50'><p>特产名称</p></a>",
                offset: { x: 0, y: -8 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
            });
            var infoWindow2 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(27.11402, 111.03249),
                offset: { x: 0, y: -8 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow3 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(27.06038, 110.57583),
                offset: { x: 0, y: -8 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow4 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(26.43346, 110.85674),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow5 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(26.39156, 110.32285),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow6 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(29.39971, 110.16428),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow7 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(28.45277, 110.39388),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow8 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(27.90834, 110.59486),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow9 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(27.86555, 109.80256),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow10 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(26.15794, 109.78449),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow11 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(28.21639, 110.21965),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow12 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(27.94843, 109.59832),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow13 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(28.70001, 109.66054),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow14 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(28.61711, 109.95085),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow15 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(29.00515, 109.84807),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow16 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(29.4579, 109.44387),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow17 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(28.57211, 109.48224),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow18 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(27.72663, 111.32743),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
            var infoWindow19 = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(27.69271, 111.66446),
                offset: { x: 0, y: -8 },
                content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
            });
    
        }
    
        window.onload=function(){
    
            initMap()
        }
    </script>
    </body>
    </html>

ps:点击Marker视图区自动居中

转载于:https://www.cnblogs.com/Jayeblog/p/11534411.html