腾讯地图GL版：图形的鼠标事件

最新推荐文章于 2023-05-28 16:56:28 发布

老狼8848

最新推荐文章于 2023-05-28 16:56:28 发布

阅读量703

点赞数 1

分类专栏：地图切片工具

本文链接：https://blog.csdn.net/bq_cui/article/details/115764229

版权

地图切片工具专栏收录该内容

103 篇文章 17 订阅

订阅专栏

本例子展示腾讯地图中画一个圆，在其上定义鼠标单击事件和鼠标移过事件。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>简单圆形</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
  html,
  body {
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  #container {
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div id="container"></div>
  <script type="text/javascript">
    var center = new TMap.LatLng(39.984104, 116.307503);
    //初始化地图
    var map = new TMap.Map("container", {
      zoom: 12, //设置地图缩放级别
      center: center //设置地图中心点坐标
    });

    var circle = new TMap.MultiCircle({ 
      map,
      styles: { // 设置圆形样式
        'circle': new TMap.CircleStyle({
          'color': 'rgba(41,91,255,0.11)',
          'showBorder': true,
          'borderColor': 'rgba(41,91,255,0.02)',
          'borderWidth': 2,
        }),
      },
      geometries: [{
        styleId: 'circle',
        center: center,
        radius: 6500,
      }],
    });
	
    var eventClick = function (res) {
        var res = res && res.geometry;
        if (res) {
			console.log('mouse clicked');
        }
    }	
	var eventMouseOver = function (res) {
        var res = res && res.geometry;
        if (res) {
			console.log('mouseover');
        }
    }		
	
	circle.on('click', eventClick);
	circle.on('mouseover', eventMouseOver);
	
	
  </script>
</body>

</html>

老狼8848

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
腾讯地图GL版：图形的鼠标事件

本例子展示腾讯地图中画一个圆，在其上定义鼠标单击事件和鼠标移过事件。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" ...
复制链接

扫一扫