前言:最近在做SOSO地图相关开发,遇到相关画圆知识,特此简单记录下来。

1.在页面中添加SOSO地图API引用,引用脚本:<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>;

2.新建一个地图DIV容器,如下:

></div>

3.初始化地图:

   1: var center=new soso.maps.LatLng(22.540551,113.934593);


   3:     center:center,
   4:     zoomLevel:14
   5: });

4.创建一个圆形对象:

new soso.maps.Circle({
   2:        map:map,
   3:        center:center,
   4:        radius:1000,
,
   6:        fillOpacity:0.3,
   7:        strokeWeight:2
   8:    });

5.为了美观,再给圆形设置一个中心点,代码如下:

new soso.maps.Marker({
   2:     position: center,
   3:     map: map
   4: });
   5:  
new soso.maps.Point(0, 0),
new soso.maps.Size(27, 35),
'http://s.map.soso.com/themes/default/img/centermarker.png'
//指定使用图片部分的大小
//用来指定图标的锚点,默认为图标中心的位置,可以指定图标的位置,默认是和图片的左上角对齐的。
//指定使用图片的哪一部分,相对图片左上角的像素坐标
//指定图片的原始大小
//向左偏12px,向上偏30px
  14: marker.setIcon(icon);
  15:  
new soso.maps.MarkerDecoration({
'',
new soso.maps.Size(0, -4),
  19:     align: soso.maps.ALIGN.CENTER,
  20:     marker: marker
  21: });

6.完成上面的编码后,得到一个如下图样子的圆形。

SOSO地图API使用(一)——在地图上画圆

7.具体代码如下:

>
>
>
/>
>
>
   7: *{
   8:     margin:0px;
   9:     padding:0px;
  10: }
  11: body, button, input, select, textarea {
  12:     font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
  13: }
  14: #info{
  15:     width:603px;
  16:     padding-top:3px;
  17:     overflow:hidden;
  18: }
  19: .btn{
  20:     width:190px;
  21: }
>
>
   1:  

   2:  

>

function init(){

new soso.maps.LatLng(22.540551,113.934593);

),{

   7:         center:center,

   8:         zoomLevel:14

   9:     });

new soso.maps.Circle({

  11:         map:map,

  12:         center:center,

  13:         radius:1000,

,

  15:         fillOpacity:0.3,

  16:         strokeWeight:2

  17:     });

  18:     

new soso.maps.Marker({

  20:         position: center,

  21:         map: map

  22:     });

  23:     

new soso.maps.Point(0, 0),

new soso.maps.Size(27, 35),

'http://s.map.soso.com/themes/default/img/centermarker.png'

//指定使用图片部分的大小

//用来指定图标的锚点,默认为图标中心的位置

//指定使用图片的哪一部分,相对图片左上角的像素坐标

//指定图片的原始大小

//向左偏12px,向上偏30px

  32:     marker.setIcon(icon);

  33:     

new soso.maps.MarkerDecoration({

'',

new soso.maps.Size(0, -4),

  37:         align: soso.maps.ALIGN.CENTER,

  38:         marker: marker

  39:     });

var path1=[

  41:         center

  42:     ];

new soso.maps.Polyline({

  44:         path: path1,

'#000000',

  46:         strokeWeight: 5,

  47:         strokeOpacity: 1,

false,

  49:         map: map

  50:     });

/*

    soso.maps.Event.addListener(map,'zoomlevel_changed',function() {

        circle.setMap(null);console.log(map);

        circle.setMap(map);

    });

    */

  57: }

  58: window.onload=init;
</script>
>
>
>
>
>

相关文章:

  • 2021-08-13
  • 2021-11-26
  • 2021-08-30
  • 2022-12-23
  • 2022-12-23
  • 2021-10-24
猜你喜欢
  • 2022-12-23
  • 2021-10-10
  • 2021-09-22
  • 2021-04-21
  • 2021-06-19
  • 2021-11-03
  • 2021-10-03
相关资源
相似解决方案