SOSO地图API使用（一）——在地图上画圆
前言：最近在做SOSO地图相关开发，遇到相关画圆知识，特此简单记录下来。
1.在页面中添加SOSO地图API引用，引用脚本：<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>；
2.新建一个地图DIV容器，如下：
1: <div style="width:603px;height:300px" id="container"></div>
3.初始化地图：
1: var center=new soso.maps.LatLng(22.540551,113.934593);
2: var map=new soso.maps.Map(document.getElementById("container"),{
3: center:center,
4: zoomLevel:14
5: });
4.创建一个圆形对象：
1: var circle=new soso.maps.Circle({
2: map:map,
3: center:center,
4: radius:1000,
5: fillColor:"#00f",
6: fillOpacity:0.3,
7: strokeWeight:2
8: });
5.为了美观，再给圆形设置一个中心点，代码如下：
1: var marker = new soso.maps.Marker({
2: position: center,
3: map: map
4: });
5:
6: var anchor = new soso.maps.Point(0, 0),
7: size = new soso.maps.Size(27, 35),
8: icon = new soso.maps.MarkerImage('http://s.map.soso.com/themes/default/img/centermarker.png'
9: , size//指定使用图片部分的大小
10: , anchor//用来指定图标的锚点，默认为图标中心的位置，可以指定图标的位置，默认是和图片的左上角对齐的。
11: , new soso.maps.Point(0, 0)//指定使用图片的哪一部分，相对图片左上角的像素坐标
12: , new soso.maps.Size(27, 35)//指定图片的原始大小
13: , new soso.maps.Size(-12, -30));//向左偏12px,向上偏30px
14: marker.setIcon(icon);
15:
16: var decor = new soso.maps.MarkerDecoration({
17: content: '',
18: margin: new soso.maps.Size(0, -4),
19: align: soso.maps.ALIGN.CENTER,
20: marker: marker
21: });
6.完成上面的编码后，得到一个如下图样子的圆形。
7.具体代码如下：
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>SOSOMap</title>
6: <style type="text/css">
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: }
22: </style>
23: <script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>
1:
2:
3: <script type="text/javascript">
4: function init(){
5: var center=new soso.maps.LatLng(22.540551,113.934593);
6: var map=new soso.maps.Map(document.getElementById("container"),{
7: center:center,
8: zoomLevel:14
9: });
10: var circle=new soso.maps.Circle({
11: map:map,
12: center:center,
13: radius:1000,
14: fillColor:"#00f",
15: fillOpacity:0.3,
16: strokeWeight:2
17: });
18:
19: var marker = new soso.maps.Marker({
20: position: center,
21: map: map
22: });
23:
24: var anchor = new soso.maps.Point(0, 0),
25: size = new soso.maps.Size(27, 35),
26: icon = new soso.maps.MarkerImage('http://s.map.soso.com/themes/default/img/centermarker.png'
27: , size//指定使用图片部分的大小
28: , anchor//用来指定图标的锚点，默认为图标中心的位置
29: , new soso.maps.Point(0, 0)//指定使用图片的哪一部分，相对图片左上角的像素坐标
30: , new soso.maps.Size(27, 35)//指定图片的原始大小
31: , new soso.maps.Size(-12, -30));//向左偏12px,向上偏30px
32: marker.setIcon(icon);
33:
34: var decor = new soso.maps.MarkerDecoration({
35: content: '',
36: margin: new soso.maps.Size(0, -4),
37: align: soso.maps.ALIGN.CENTER,
38: marker: marker
39: });
40: var path1=[
41: center
42: ];
43: var polyline = new soso.maps.Polyline({
44: path: path1,
45: strokeColor: '#000000',
46: strokeWeight: 5,
47: strokeOpacity: 1,
48: editable:false,
49: map: map
50: });
51: /*
52: soso.maps.Event.addListener(map,'zoomlevel_changed',function() {
53: circle.setMap(null);console.log(map);
54: circle.setMap(map);
55: });
56: */
57: }
58: window.onload=init;
</script>
24: </head>
25: <body onload="init()">
26: <div style="width:603px;height:300px" id="container"></div>
27: </body>
28: </html>
