0
点赞
收藏
分享

微信扫一扫

腾讯地图画圆

野见 2022-02-13 阅读 62


1:坐标取拾地址https://lbs.qq.com/getPoint/

2:在线代码运行地址https://lbs.qq.com/webDemoCenter/javascriptV2/polygon/circleRadius

3:图例

腾讯地图画圆_覆盖物

4:代码


<!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>动态改变圆的半径</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

    });

  //设置圆形覆盖物的颜色和透明度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>每隔500毫秒圆形覆盖物的半径改变一次。</p>

</div>

</body>

</html>


举报

相关推荐

0 条评论