騰訊地圖marker中大小的控制和事件綁定。

騰訊地圖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，如果沒有父級元素包裹會導致信息框內容撐不開窗體，導致內容顯示失敗。