高德地圖和canvas畫圖結合應用(二)

上節講述瞭如在在高德地圖中添加canvas圖層，這節就講述下如何在canvas圖層添加鼠標的事件。

在上節腳本的最後加入如下代碼：

var text;
$('#container').on('click', 'canvas.amap-labels', function(e) {
    if(text)
        text.setMap(null);
    //使用勾股定理計算這個點與圓心之間的距離
    var pixel = map.lnglatTocontainer(new AMap.LngLat(116.344496,39.939976));
    var distanceFromCenter = Math.sqrt(Math.pow(pixel.getX() - e.clientX, 2) + Math.pow(pixel.getY() - e.clientY, 2));
    if (distanceFromCenter <= 50){
        console.log('x='+e.clientX+' y='+e.clientY);
        text = new AMap.Text({
            text:'北京展覽館1',
            textAlign:'left', // 'left' 'right', 'center',
            verticalAlign:'middle', //middle 、bottom
            draggable:false,
            cursor:'pointer',
            style:{
                'background-color':'#21b6f4',
                'opacity': '0.8',
                'border':'none',
                'color':'#fff',
                'padding':'0'
             },
            position: [116.344496,39.939976]
        });
        text.setOffset(new AMap.Pixel(50, 0));
        text.setMap(map);
    }
});

 

這裏記得引入jquery的腳本哈，否則會報錯哦。

運行效果以下所示：