了解Web端的地图组件(腾讯地图)

1. 绘制线路

在腾讯位置服务的官方文档(https://lbs.qq.com/webApi/javascriptGL/glGuide/glPolyline)中，详细介绍了如何在地图组件上面绘制线路。

var map = new TMap.Map('mapContainer', {
    center: new TMap.LatLng(40.038515, 116.272185),//地图显示中心点
    zoom:16 //缩放级别
});
 
//创建 MultiPolyline
var polylineLayer = new TMap.MultiPolyline({
    id: 'polyline-layer', //图层唯一标识
    map: map,
    //折线样式定义
    styles: {
        'style_blue': new TMap.PolylineStyle({
            'color': '#3777FF', //线填充色
            'width': 6, //折线宽度
            'borderWidth': 5, //边线宽度
            'borderColor': '#FFF', //边线颜色
            'lineCap': 'butt' //线端头方式
        }),
        'style_red': new TMap.PolylineStyle({
            'color': '#CC0000', //线填充色
            'width': 6, //折线宽度
            'borderWidth': 5, //边线宽度
            'borderColor': '#CCC', //边线颜色
            'lineCap': 'round' //线端头方式
        })
    },
    //折线数据定义
    geometries: [
        {//第1条线
            'id': 'pl_1',//折线唯一标识，删除时使用
            'styleId': 'style_blue',//绑定样式名
            'paths': [new TMap.LatLng(40.038540, 116.272389), new TMap.LatLng(40.038844, 116.275210), new TMap.LatLng(40.041407, 116.274738)]
        },
        {//第2条线
            'id': 'pl_2',   
            'styleId': 'style_red',
            'paths': [new TMap.LatLng(40.039492,116.271893), new TMap.LatLng(40.041562,116.271421), new TMap.LatLng(40.041957,116.274211)]
        }
    ]
});

2. 绘制坐标点

在腾讯位置服务的另一份文档(https://lbs.qq.com/webApi/javascriptGL/glGuide/glMarker)中，详细介绍了如何在地图组件上面绘制线路。

//初始化地图
var map = new TMap.Map(container, {
    center: new TMap.LatLng(39.984104, 116.307503),
    zoom:16 //缩放级别
});
 
//创建并初始化MultiMarker
var markerLayer = new TMap.MultiMarker({
    map: map,  //指定地图容器
    //样式定义
    styles: {
        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
        "myStyle": new TMap.MarkerStyle({ 
            "width": 25,  // 点标记样式宽度（像素）
            "height": 35, // 点标记样式高度（像素）
            "src": '../img/marker.png',  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 16, y: 32 }  
        }) 
    },
    //点标记数据数组
    geometries: [{
        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        "styleId": 'myStyle',  //指定样式id
        "position": new TMap.LatLng(39.954104, 116.357503)  //点标记坐标位置
        
    }, {//第二个点标记
        "id": "2",
        "styleId": 'marker',
        "position": new TMap.LatLng(39.994104, 116.287503)
       
    }]
});

如果我们想要动态添加标记点，可以调用add()函数。

markerLayer.add([{
    "id": "3",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
    "styleId": 'myStyle',  //指定样式id
    "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
    "properties":  {
        "id": "4",
        "styleId": 'marker',
        "position": new TMap.LatLng(39.994104, 116.287503)
    }
])