SOSO map API use (1) draw a circle on the map implementation ideas and code

Last Update:2013-10-17 Source: Internet

Author: User

Tags polyline

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Preface: I have recently developed SOSO maps and encountered circle-related knowledge. I would like to record it briefly.
1. Add SOSO map API reference on the page and reference the script:
Copy codeThe Code is as follows:
<Script charset = "UTF-8" src = "http://api.map.soso.com/v1.0/main.js"> </script>;

2. Create a map DIV container as follows::
Copy codeThe Code is as follows:
<Div style = "width: 603px; height: 300px" id = "container"> </div>

3. initialize the map:
Copy codeThe Code is 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 circular object:
Copy codeThe Code is as follows:
Var circle = new soso. maps. Circle ({
Map: map,
Center: center,
Radius: 1000,
FillColor: "# 00f ",
FillOpacity: 0.3,
StrokeWeight: 2
});

5. Set a center point for the circle to be beautiful. The Code is as follows::
Copy codeThe 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 icon's anchor. By default, it is the center of the icon. You can specify the icon's position, which is aligned with the upper left corner of the image by default.
, New soso. maps. Point (0, 0) // specifies which part of the image to use, relative to the pixel coordinate in the upper left corner of the image
, New soso. maps. Size (27, 35) // specify the original Size of the image.
, New soso. maps. Size (-12,-30); // The orientation is 12px to the left and 30px to the top.
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 encoding, get a circle as shown in the following figure.
7.The Code is as follows::
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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: pixel PX;
}
</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 // specify the size of the image part
, Anchor // used to specify the anchor of an icon. The default value is the center of the icon.
, New soso. maps. Point (0, 0) // specifies which part of the image to use, relative to the pixel coordinate in the upper left corner of the image
, New soso. maps. Size (27, 35) // specify the original Size of the image.
, New soso. maps. Size (-12,-30); // The orientation is 12px to the left and 30px to the top.
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>
</Head>
<Body onload = "init ()">
<Div style = "width: 603px; height: 300px" id = "container"> </div>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More