高德地图和canvas画图结合应用(二)

63 阅读 0 评论 42 点赞

我是靠谱客的博主现实皮带，最近开发中收集的这篇文章主要介绍高德地图和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的脚本哈，不然会报错哦。

运行效果如下所示：