当前位置:网站首页>Tencent map circle
Tencent map circle
2022-07-06 14:02:00 【Little boy, handsome Yang Shaoping】
1: Coordinate pick-up address https://lbs.qq.com/getPoint/
2: Online code running address https://lbs.qq.com/webDemoCenter/javascriptV2/polygon/circleRadius
3: legend
4: Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title> Dynamically change the radius of a circle </title>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
#container{
width:100%;
height:90%;
}
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#info {
margin-top: 10px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</script>
<script>
function init(){
var center=new qq.maps.LatLng(36.070299,120.370787);
var map=new qq.maps.Map(document.getElementById("container"),{
center:center,
zoom:14
});
// Set the color and transparency of the circular cover rgba
var circle_color = new qq.maps.Color(
Number(2),
Number(3),
Number(4),
0.1);
var circle=new qq.maps.Circle({
map:map,
center:center,
radius:300,
fillColor:circle_color,
strokeWeight:2
});
var radius=300;
setInterval(function(){
circle.setRadius(radius);
radius=radius+100;
if(radius>1000){
radius=300;
};
},5000);
}
window.οnlοad=init;
</script>
</head>
<body οnlοad="init()">
<div id="container"></div>
<div id="info">
<p> every other 500 The radius of the millisecond circular cover changes once .</p>
</div>
</body>
</html>
边栏推荐
- [modern Chinese history] Chapter 6 test
- 实验七 常用类的使用
- Principles, advantages and disadvantages of two persistence mechanisms RDB and AOF of redis
- 7-7 7003 组合锁(PTA程序设计)
- 【VMware异常问题】问题分析&解决办法
- [data processing of numpy and pytoch]
- 1. Preliminary exercises of C language (1)
- Harmonyos JS demo application development
- Mode 1 two-way serial communication is adopted between machine a and machine B, and the specific requirements are as follows: (1) the K1 key of machine a can control the ledi of machine B to turn on a
- 7-14 错误票据(PTA程序设计)
猜你喜欢
. Net6: develop modern 3D industrial software based on WPF (2)
QT meta object qmetaobject indexofslot and other functions to obtain class methods attention
记一次猫舍由外到内的渗透撞库操作提取-flag
Hackmyvm target series (4) -vulny
Callback function ----------- callback
实验六 继承和多态
深度强化文献阅读系列(一):Courier routing and assignment for food delivery service using reinforcement learning
Hackmyvm target series (6) -videoclub
强化学习基础记录
强化学习系列(一):基本原理和概念
随机推荐
记一次猫舍由外到内的渗透撞库操作提取-flag
Relationship between hashcode() and equals()
[modern Chinese history] Chapter 9 test
强化学习基础记录
[modern Chinese history] Chapter 6 test
【头歌educoder数据表中数据的插入、修改和删除】
[experiment index of educator database]
实验七 常用类的使用(修正帖)
Harmonyos JS demo application development
Have you encountered ABA problems? Let's talk about the following in detail, how to avoid ABA problems
2022泰迪杯数据挖掘挑战赛C题思路及赛后总结
实验四 数组
Hackmyvm target series (6) -videoclub
QT meta object qmetaobject indexofslot and other functions to obtain class methods attention
Why use redis
[MySQL table structure and integrity constraint modification (Alter)]
【黑马早报】上海市监局回应钟薛高烧不化;麦趣尔承认两批次纯牛奶不合格;微信内测一个手机可注册俩号;度小满回应存款变理财产品...
7-5 走楼梯升级版(PTA程序设计)
Interpretation of iterator related "itertools" module usage
SRC挖掘思路及方法