腾讯地图marker中大小的控制和事件绑定。

Posted 2020-11-15 webh5

腾讯地图SDK地址:    点击进入

 

 

 在示例中 My location中需要加入按钮并绑定事件。

var container = document.getElementById("container");
var center = new TMap.LatLng(39.984104,116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map(container, {
    center: center
});
 
//初始marker
var marker = new TMap.MultiMarker({
    id: ‘marker-layer‘,
    map: map,
    styles: {
        "marker": new TMap.MarkerStyle({
            "width": 23,
            "height": 35,
            "anchor": { x: 12, y: 32 },
            "src": ‘../img/marker.png‘
        })
    },
    geometries: [{
        "id": ‘demo1‘,
        "styleId": ‘marker‘,
        "position": new TMap.LatLng(39.984104,116.307503),
        "properties": {
            "title": "marker"
        }
    }, {
        "id": ‘demo2‘,
        "styleId": ‘marker‘,
        "position": new TMap.LatLng(39.974104,116.347503),
        "properties": {
            "title": "marker"
        },
 
    }]
});
//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
    map: map,
    position: new TMap.LatLng(39.984104,116.307503),
    offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
});
infoWindow.close();//初始关闭信息窗关闭
//监听标注点击事件
marker.on("click", function (evt) {
    //设置infoWindow
    infoWindow.open(); //打开信息窗
    infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
    infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
 
})

 

PS：

1. 在marker.on的方法中直接为信息窗口添加事件会导致添加不上，需要加入500ms的演示定时器才能为信息窗体中的按钮绑定事件。

2.在setContent中插入元素时需要为所有的子元素添加一个父级的DIV，如果没有父级元素包裹会导致信息框内容撑不开窗体，导致内容显示失败。