在天地图中添加多边形及注册面的点击事件

在天地图中添加多边形及注册面的点击事件

思路

准备一些多边形坐标，然后在天地图上利用这些坐标形成面，在面上添加监听事件（比如鼠标移入该面后出现信息框）

知识点

Polygon类创建多边形覆盖物。 构造参数：Polygon(points:Array[,opts:PolygonOptions]) points：坐标数组。 opts：多边形的属性对象，请参考 PolygonOptions。更多参数请参考天地图文档

效果图

html部分

css部分

*{ padding: 0; margin: 0; box-sizing: border-box;}body, html{ width: 100%; height: 100%; font-family:"微软雅黑";}#typeMap{ width: 100%; height: 100%;}#typeMap .mestable{ /*float:left;*/ top: 50px; right: 50px; position: absolute; z-index: 999; width: auto; box-shadow: 0 50px 50px rgba(10, 16, 20, 0.24), 0 0 30px rgba(10, 16, 20, 0.12); background-color: #8D8D8D; cursor: pointer; /*display: none;*/}#typeMap .mestable .registerbtn{ padding: 5px 0; /*background-color: #D9D9D9;*/ background-color: rgba(255,255,255,1); width: 165px; height: 50px; display: flex; justify-content: space-around; align-items: center;}#typeMap .mestable .registerbtn>div{ padding: 0 5px; width: 60px; height: 30px; border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0,0,0,0.21);}#typeMap .mestable .registerbtn>div p{ text-align: center; height: 30px; line-height: 30px; color: #ffffff;}#typeMap .mestable .registerbtn>div.regcolor1{ background-color: #3498db;}/*#typeMap .mestable .registerbtn>div.regcolor1:focus{*//* background-color: #fd9644;*//*}*/#typeMap .mestable .registerbtn>div.regcolor2{ background-color: #f1c40f;}

js部分

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。