JavaScript API GL beta添加多个Marker和InfoWindow

<!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>
<!-- 页面载入后，调用init函数 -->
<body>
<!-- 定义地图显示容器 -->
<div class="mapContainer">
    <div id="container"></div>
</div>
<!--引入Javascript API GL，参数说明参见下文-->
<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","position": new TMap.LatLng(27.11402,111.03249),{
                //洞口县
                // "lat": 27.06038,// "lng": 110.57583
                "id": "3","position": new TMap.LatLng(27.06038,110.57583),{
                //新宁县
                // "lat": 26.43346,// "lng": 110.85674
                "id": "4","position": new TMap.LatLng(26.43346,110.85674),{
                // "城步苗族自治县",// "lat": 26.39156,// "lng": 110.32285
                "id": "5","position": new TMap.LatLng(26.39156,110.32285),{
                // "桑植县"
                // "lat": 29.39971,// "lng": 110.16428
                "id": "6","position": new TMap.LatLng(29.39971,110.16428),{
                // "沅陵县",// "lat": 28.45277,// "lng": 110.39388
                "id": "7","position": new TMap.LatLng(28.45277,110.39388),{
                // "溆浦县"
                // "lat": 27.90834,// "lng": 110.59486
                "id": "8","position": new TMap.LatLng(27.90834,110.59486),{
                // "麻阳苗族自治县"
                //"lat": 27.86555,// "lng": 109.80256
                "id": "9","position": new TMap.LatLng(27.86555,109.80256),{
                // "通道侗族自治县"
                // "lat": 26.15794,// "lng": 109.78449
                "id": "10","position": new TMap.LatLng(26.15794,109.78449),{
                // "fullname": "泸溪县"
                //     "lat": 28.21639,//     "lng": 110.21965
                "id": "11","position": new TMap.LatLng(28.21639,110.21965),{
                // "fullname": "凤凰县"
                //     "lat": 27.94843,//     "lng": 109.59832
                "id": "12","position": new TMap.LatLng(27.94843,109.59832),{
                // "fullname": "保靖县"
                //     "lat": 28.70001,//     "lng": 109.66054
                "id": "13","position": new TMap.LatLng(28.70001,109.66054),{
                // "fullname": "古丈县"
                //     "lat": 28.61711,//     "lng": 109.95085
                "id": "14","position": new TMap.LatLng(28.61711,109.95085),{
                // "fullname": "永顺县"
                //     "lat": 29.00515,//     "lng": 109.84807
                "id": "15","position": new TMap.LatLng(29.00515,109.84807),{
                // "fullname": "龙山县"
                //     "lat": 29.4579,//     "lng": 109.44387
                "id": "16","position": new TMap.LatLng(29.4579,109.44387),{
                // "fullname": "花垣县"
                //     "lat": 28.57211,//     "lng": 109.48224
                "id": "17","position": new TMap.LatLng(28.57211,109.48224),{
                // "fullname": "新化县"
                //     "lat": 27.72663,//     "lng": 111.32743
                "id": "18","position": new TMap.LatLng(27.72663,111.32743),{
                // "fullname": "涟源市"
                //     "lat": 27.69271,//     "lng": 111.66446
                "id": "19","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,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,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,//设置信息窗相对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,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,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,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,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,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,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,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,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,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,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,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,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,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,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,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,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视图区自动居中
JavaScript API GL beta添加多个Marker和InfoWindow

相关推荐
