上节讲述了如在在高德地图中添加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: