编程语言
首页 > 编程语言> > 开发中使用腾讯地图Javascript api，实现多个label和定位点（改变样式）

开发中使用腾讯地图Javascript api，实现多个label和定位点（改变样式）

作者：互联网

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 在使用地图api的时候必须要引入秘钥 -->
    <script src="https://map.qq.com/api/gljs?v=1.exp&style=1&key=你的秘钥"></script>
    <style>
        #positionMap {
            overflow: hidden;
            margin: auto;
            width: 800px;
            height: 800px;
        }
        
        <!-- 去除腾讯地图默认的样式 -->
        #positionMap div:first-child+div {
            display: none !important;
        }
    </style>
</head>

<body>
	<!-- 腾讯地图的容器 -->
    <div id="positionMap">
    
    </div>
    
    <script>
    	// 这里的定位（经纬度）是随意取的
        let longitude = "120.27626236979300",
            latitude = "31.881967350260700",
            labelAddres = "地址1",
            jlon = "120.27326236979300",
            jlat = "31.889967350260700",
            jaddress = "地址2",
            qlon = "120.27126236978130",
            qlat = "31.888867350260280",
            qaddress = "地址3";
        initMap(longitude, latitude, labelAddres, jlon, jlat, jaddress, qlon, qlat, qaddress);


        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap(lon, lat, title, jlon, jlat, jaddress, qlon, qlat, qaddress) {

            //定义地图中心点坐标
            var center = new TMap.LatLng(lat, lon);
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('positionMap'), {
                center: center, //设置地图中心点坐标
                zoom: 15, //设置地图缩放级别
            });
            // map.setMapStyleId("style3");
            //初始化marker
            var marker = new TMap.MultiMarker({
                id: "marker-layer", //图层id
                map: map,
                styles: { //点标注的相关样式
                    "marker": setMarkImg("./images/position.png"),
                    "marker2": setMarkImg("./images/position1.png"),
                    "marker3": setMarkImg("./images/position2.png")
                },
                geometries: geometries(lat, lon, jlat, jlon, qlat, qlon)
            });

            //初始化label
            var label = new TMap.MultiLabel({
                id: 'label-layer',
                map: map, //设置折线图层显示到哪个地图实例中
                //文字标记样式
                styles: {
                    'label_1': labelColor('#d81e06'),
                    'label_2': labelColor('#1296db'),
                    'label_3': labelColor('#707070')
                },
                //文字标记数据
                geometries: labelgeometries(center, title, jlat, jlon, jaddress, qlat, qlon, qaddress)
            });
        }

        function labelColor(color) {
            return new TMap.LabelStyle({
                'color': color, //颜色属性
                'size': 16, //文字大小属性
                'offset': {
                    x: 0,
                    y: -40
                }, //文字偏移属性单位为像素
                'angle': 0, //文字旋转属性
                'alignment': 'center', //文字水平对齐属性
                'verticalAlignment': 'middle' //文字垂直对齐属性
            })
        }

        function labelgeometries(center, title, jlat, jlon, jaddress, qlat, qlon, qaddress) {
            return [{
                'id': 'label_1', //点图形数据的标志信息
                'styleId': 'label_1', //样式id
                'position': center, //标注点位置
                'content': title, //标注文本
            }, {
                'id': 'label_2', //点图形数据的标志信息
                'styleId': 'label_2', //样式id
                'position': new TMap.LatLng(jlat, jlon), //标注点位置
                'content': jaddress, //标注文本
            }, {
                'id': 'label_3', //点图形数据的标志信息
                'styleId': 'label_3', //样式id
                'position': new TMap.LatLng(qlat, qlon), //标注点位置
                'content': qaddress, //标注文本
            }];
        }

        function setMarkImg(src) {
            return new TMap.MarkerStyle({
                "width": 35,
                "height": 40,
                "anchor": {
                    x: 16,
                    y: 32
                },
                "src": src
            })
        }

        function geometries(lat, lon, jlat, jlon, qlat, qlon) {
            return [{ //点标注数据数组
                "id": "marker",
                "styleId": "marker",
                "position": new TMap.LatLng(lat, lon),
                "properties": {
                    "title": "marker"
                }
            }, {
                "id": "marker2",
                "styleId": 'marker2',
                "position": new TMap.LatLng(jlat, jlon),
                "properties": {
                    "title": "marker2"
                }
            }, {
                "id": "marker3",
                "styleId": 'marker3',
                "position": new TMap.LatLng(qlat, qlon),
                "properties": {
                    "title": "marker3"
                }
            }];
        }
    </script>
</body>

</html>

文件图片：
在这里插入图片描述
效果如下：
在这里插入图片描述

标签：TMap,qlat,Javascript,label,定位点,new,qlon,id
来源： https://blog.csdn.net/beLaity/article/details/111472874