当前位置：网站首页>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

Tencent map circle _javascript

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>


原网站

版权声明
本文为[Little boy, handsome Yang Shaoping]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202131424462352.html

边栏推荐

猜你喜欢

随机推荐