1. map+area
DW软件实现方法 视频:http://www.chuanke.com/3885380-190205.html
2. border-radius(H5)
- <style>
- .circle{
- /*圆设置*/
- width:100px;
- height:100px;
- border-radius: 50%;
- cursor: pointer;
- /*文字设置*/
- position: absolute;
- left:50px;
- top:50px;
- line-height: 100px;
- text-align: center;
- color: white;
- background-color:dimgray;
- }
- </style>
3. 纯js实现
求点在不在圆上的简单算法、获取鼠标坐标等等
两点之间的距离计算公式
|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
假设圆心为(100,100),半径为50,在圆内点击弹出相应的信息,在圆外显示不在圆内的信息
-
- document.οnclick=function(e){
- var r=50;//圆的半径
- var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
- //计算鼠标点的位置与圆心的距离
- var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
- if(len<=50){
- console.log("内")
- }else{
- console.log("外")
- }
- }