Soso Map API use (i) on the map to draw a circle to achieve ideas and code _javascript skills

Foreword : Recently in doing Soso map related development, encounter related drawing circle knowledge, hereby simply record down.
1. Add the Soso Map API reference to the page, referencing the script :

Copy Code code as follows:

<script charset= "Utf-8" src= "Http://api.map.soso.com/v1.0/main.js" ></script>;

2. Create a new Map div container, as follows：

Copy Code code as follows:

<div style= "width:603px;height:300px" id= "container" ></div>

3. Initialize the map：

Copy Code code as follows:

var center=new soso.maps.LatLng (22.540551,113.934593);
var map=new soso.maps.Map (document.getElementById ("container"), {
Center:center,
Zoomlevel:14
});

4. Create a Circle object：

Copy Code code as follows:

var circle=new soso.maps.Circle ({
Map:map,
Center:center,
radius:1000,
FillColor: "#00f",
fillopacity:0.3,
Strokeweight:2
});

5. In order to be beautiful, and then to set a central point of the circle, the code is as follows：

Copy Code code as follows:

var marker = new Soso.maps.Marker ({
Position:center,
Map:map
});
var anchor = new Soso.maps.Point (0, 0),
size = new Soso.maps.Size (27, 35),
icon = new Soso.maps.MarkerImage (' Http://s.map.soso.com/themes/default/img/centermarker.png '
, size//specifies the size of the part of the picture to use
, anchor//is used to specify the anchor point of the icon, the default is the location of the center of the icon, you can specify the location of the icon, and the default is aligned with the upper-left corner of the picture.
, the new Soso.maps.Point (0, 0)//specifies which part of the picture to use, relative to the pixel coordinates of the upper-left corner of the picture
, New Soso.maps.Size (27, 35)//Specifies the original size of the picture
, New Soso.maps.Size (-12,-30))/left 12px, up to 30px
Marker.seticon (icon);
var decor = new Soso.maps.MarkerDecoration ({
Content: ',
Margin:new soso.maps.Size (0,-4),
Align:soso.maps.ALIGN.CENTER,
Marker:marker
});

6. After completing the above code, get a circle with the following figure
7. The specific code is as follows：

Copy Code code as follows:

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>SOSOMap</title>
<style type= "Text/css" >
*{
margin:0px;
padding:0px;
}
Body, button, input, select, textarea {
Font:12px/16px Verdana, Helvetica, Arial, Sans-serif;
}
#info {
width:603px;
padding-top:3px;
Overflow:hidden;
}
. btn{
width:190px;
}
</style>
<script charset= "Utf-8" src= "Http://api.map.soso.com/v1.0/main.js" ></script>
<script type= "Text/javascript" >
function init () {
var center=new soso.maps.LatLng (22.540551,113.934593);
var map=new soso.maps.Map (document.getElementById ("container"), {
Center:center,
Zoomlevel:14
});
var circle=new soso.maps.Circle ({
Map:map,
Center:center,
radius:1000,
FillColor: "#00f",
fillopacity:0.3,
Strokeweight:2
});
var marker = new Soso.maps.Marker ({
Position:center,
Map:map
});
var anchor = new Soso.maps.Point (0, 0),
size = new Soso.maps.Size (27, 35),
icon = new Soso.maps.MarkerImage (' Http://s.map.soso.com/themes/default/img/centermarker.png '
, size//specifies the size of the part of the picture to use
, anchor//is used to specify the anchor point of the icon, which defaults to the location of the icon Center
, the new Soso.maps.Point (0, 0)//specifies which part of the picture to use, relative to the pixel coordinates of the upper-left corner of the picture
, New Soso.maps.Size (27, 35)//Specifies the original size of the picture
, New Soso.maps.Size (-12,-30))/left 12px, up to 30px
Marker.seticon (icon);
var decor = new Soso.maps.MarkerDecoration ({
Content: ',
Margin:new soso.maps.Size (0,-4),
Align:soso.maps.ALIGN.CENTER,
Marker:marker
});
var path1=[
Center
];
var polyline = new Soso.maps.Polyline ({
Path:path1,
Strokecolor: ' #000000 ',
Strokeweight:5,
Strokeopacity:1,
Editable:false,
Map:map
});
/*
Soso.maps.Event.addListener (map, ' zoomlevel_changed ', function () {
Circle.setmap (null); Console.log (map);
Circle.setmap (map);
});
*/
}
Window.onload=init;
</script>
<body onload= "init ()" >
<div style= "width:603px;height:300px" id= "container" ></div>
</body>