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

Source: Internet
Author: User
Tags polyline

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.