JavaScript API添加多个Maker和InfoWindow

野性酷女 2023-08-17 17:40 123阅读 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>标记点击事件</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>
        <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    </head>
    <body>
    <div class="mapContainer">
        <div id="container"></div>
    </div>
    <script>
        //初始化标记数据
        var dataSource=[{
        "id":0,"fullname":"邵阳县","lat":26.99078,"lng":111.27382},{
        "id":1,"fullname":"隆回县","lat":27.11402,"lng":111.03249},{
        "id":2,"fullname":"洞口县","lat":27.06038,"lng":110.57583},{
        "id":3,"fullname":"新宁县","lat":26.43346,"lng":110.85674},{
        "id":4,"fullname":"城步苗族自治县","lat":26.39156,"lng":110.32285},{
        "id":5,"fullname":"桑植县","lat":29.39971,"lng":110.16428},{
        "id":6,"fullname":"沅陵县","lat":28.45277,"lng":110.39388},{
        "id":7,"fullname":"溆浦县","lat":27.90834,"lng":110.59486},{
        "id":8,"fullname":"麻阳苗族自治县","lat":27.86555,"lng":109.80256},{
        "id":9,"fullname":"通道侗族自治县","lat":26.15794,"lng":109.78449},{
        "id":10,"fullname":"泸溪县","lat":28.21639,"lng":110.21965},{
        "id":11,"fullname":"凤凰县","lat":27.94843,"lng":109.59832},{
        "id":12,"fullname":"保靖县","lat":28.70001,"lng":109.66054},{
        "id":13,"fullname":"古丈县","lat":28.61711,"lng":109.95085},{
        "id":14,"fullname":"永顺县","lat":29.00515,"lng":109.84807},{
        "id":15,"fullname":"龙山县","lat":29.4579,"lng":109.44387},{
        "id":16,"fullname":"花垣县","lat":28.57211,"lng":109.48224},{
        "id":17,"fullname":"新化县","lat":27.72663,"lng":111.32743},{
        "id":18,"fullname":"涟源市","lat":27.69271,"lng":111.66446}]
        //初始化地图
        var init = function() {
            var center = new qq.maps.LatLng(27.56974, 110.0016);
            var map = new qq.maps.Map(document.getElementById('container'),{
                center: center,//设置地图中心点坐标
                zoom:8, //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
    
            //循环创建标记
            for (let i = 0; i < dataSource.length; i++) {
                //创建标记
                let markPosition=new qq.maps.LatLng(dataSource[i].lat,dataSource[i].lng);
                var marker = new qq.maps.Marker({
                    position: markPosition,
                    map: map
                });
                //标记点击居中
                qq.maps.event.addListener(marker, 'click', function(event) {
                    // console.log(event.latLng.getLat());//获取当前坐标点的纬度
                    // console.log(event.latLng.getLng());//获取当前坐标点的经度
                    var ne = new qq.maps.LatLng((parseFloat(event.latLng.getLat())+0.04).toFixed(6),(parseFloat(event.latLng.getLng())+0.04).toFixed(6));//东北角坐标
                    var sw = new qq.maps.LatLng((parseFloat(event.latLng.getLat())-0.04).toFixed(6),(parseFloat(event.latLng.getLng())-0.04).toFixed(6));//西南角坐标
                    var latLngBounds = new qq.maps.LatLngBounds(sw, ne)
                    map.fitBounds(latLngBounds); //根据指定的范围调整地图视野
                })
                //添加到提示窗
                var info = new qq.maps.InfoWindow({
                    map: map,
                    position:markPosition,
                    content:"<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
                });
                info.open();
            }
    
        }
        window.onload=function(){
            init()
        }
    </script>
    </body>
    </html>

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

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