Foreword: I have recently been doing SOSO map-related development and came across some knowledge about drawing circles, so I simply recorded it here.
1. Add SOSO Map API reference to the page, reference script :
2. Create a new map DIV container, as follows :
3. Initialize the map :
var center=new soso.maps.LatLng(22.540551,113.934593);
var map=new soso.maps.Map(document.getElementById("container"),{
center:center,
zoom Level:14
});
4. Create a circular object :
var circle=new soso.maps.Circle({
map:map,
center:center,
radius:1000,
fillColor:"#00f",
fillOpacity:0.3,
strokeWeight:2
});
5. For the sake of beauty, set the circle A center point, the code is 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//Specify the size of the image part
, anchor//Used to specify the anchor point of the icon, the default is the position of the center of the icon, you can specify the position of the icon, the default is aligned with the upper left corner of the image.
, new soso.maps.Point(0, 0)//Specify which part of the picture to use, the pixel coordinates relative to the upper left corner of the picture
, new soso.maps.Size(27, 35)//Specify the picture The original size of .maps.MarkerDecoration({
content: '',
margin: new soso.maps.Size(0, -4),
align: soso.maps.ALIGN.CENTER,
marker: marker
});
6. After completing the above encoding, you will get a circle as shown below
7.
Specific The code is as follows :