当前位置: 首页 >>常用API接入 >>地图接口调用 >>HDHCMS整理腾讯地图API多个文本标记标记加链接显示源码

HDHCMS整理腾讯地图API多个文本标记标记加链接显示源码

时间:2020/1/5 7:30:00 【admin】

HDHCMS整理腾讯地图API多个文本标记标记加链接显示源码…

image.png


<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>文本标记</title>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

        }


        body, button, input, select, textarea {

            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;

        }


        #info {

            width: 603px;

            padding-top: 3px;

            overflow: hidden;

        }


        .btn {

            width: 93px;

        }


        #container {

            min-width: 600px;

            min-height: 767px;

        }

    </style>

    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=your_key"></script>

    <script>

        var init = function () {

            var center = new qq.maps.LatLng(39.916527, 116.397128);

            var map = new qq.maps.Map(document.getElementById('container'), {

                center: center,

                zoom: 14

            });

            var label = new qq.maps.Label({

                position: center,

                map: map,

                content: '文本标注<a href="http://www.hdhcms.com">HDHCMS</a>'

            });

            var latlngs = [

              new qq.maps.LatLng(39.91474, 116.37333),

              new qq.maps.LatLng(39.91447, 116.39336),

              new qq.maps.LatLng(39.90884, 116.41306)

            ];

            var hdhcmsaddr = [

            '<img src="img/infowindow-img.jpg"><b>文本标11注</b><a href="http://www.hdhcms.com" target="_blank">hdhcms</a>',

            '<img src="img/infowindow-img.jpg"><b>文本标22注</b><a href="http://www.hdhcms.com" target="_blank">hdhcms</a>',

            '<img src="img/infowindow-img.jpg"><b>文本标33注</b><a href="http://www.hdhcms.com" target="_blank">hdhcms</a>'

            ];

            for (var i = 0; i < latlngs.length; i++) {

                var label = new qq.maps.Label({

                    position: latlngs[i],

                    map: map,

                    content: hdhcmsaddr[i]

                });


                var marker = new qq.maps.Marker({

                    position: latlngs[i],

                    map: map

                });


            }

        }

    </script>

</head>

<body onload="init()">

    <div id="container"></div>

</body>

</html>


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮