腾讯地图添加多marker标注样式 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>腾讯地图添加多marker样式</title>
</head>
<!-- <script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=XTNBZ-3R7C4-IQJUI-DK7EZ-5ECLV-YDBFF"></script>
     -->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=xxxxxxxxxxxxxxxxxxxxxx"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    #container {
        width: 800px;
        height: 800px;
    }
</style>
<body>
<div id="container"></div>
<script>
    function init() {
        var center = new qq.maps.LatLng(39.916527, 116.397128);
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: center,
            zoom: 13
        });
        var infoWin = new qq.maps.InfoWindow({
            map: map
        });
        var latlngs = [
            new qq.maps.LatLng(39.91374, 116.37333),
            new qq.maps.LatLng(39.91347, 116.39336),
            new qq.maps.LatLng(39.90184, 116.41306)
        ];

        //根据图片大小调整 界点
        var anchor = new qq.maps.Point(0, 39),
            size = new qq.maps.Size(42, 68),
            origin = new qq.maps.Point(0, 0),
            markerIcon = new qq.maps.MarkerImage(
                "http://xxx.xxxxxxxxxx.com/style/image/img31.png",
                // size,
                // origin,
                // anchor
            );

        for (var i = 0; i < latlngs.length; i++) {
            (function (n) {
                //实例标注
                var marker = new qq.maps.Marker({
                    position: latlngs[n],
                    map: map
                });

                //设置每个标注的样式
                marker.setIcon(markerIcon);

                //标注点击事件
                qq.maps.event.addListener(marker, 'click', function () {
                    infoWin.open();
                    infoWin.setContent('<div style="text-align:center;white-space:' +
                        'nowrap;margin:10px;">这是第 ' +
                        n + ' 个标注</div>');
                    infoWin.setPosition(latlngs[n]);
                });
            })(i);
        }
    }
    init();
</script>
</body>
</html>

　　

posted @ 2020-05-13 17:26  撑一支船蒿  阅读(6027)  评论(0)    收藏  举报