前言:最近在做SOSO地图相关开发,遇到相关画圆知识,特此简单记录下来。
1.在页面中添加SOSO地图API引用,引用脚本:<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>;
2.新建一个地图DIV容器,如下:
></div>
3.初始化地图:
1: var center=new soso.maps.LatLng(22.540551,113.934593);
3: center:center,
4: zoomLevel:14
5: });
4.创建一个圆形对象:
new soso.maps.Circle({
2: map:map,
3: center:center,
4: radius:1000,
,
6: fillOpacity:0.3,
7: strokeWeight:2
8: });
5.为了美观,再给圆形设置一个中心点,代码如下:
new soso.maps.Marker({
2: position: center,
3: map: map
4: });
5:
new soso.maps.Point(0, 0),
new soso.maps.Size(27, 35),
'http://s.map.soso.com/themes/default/img/centermarker.png'
//指定使用图片部分的大小
//用来指定图标的锚点,默认为图标中心的位置,可以指定图标的位置,默认是和图片的左上角对齐的。
//指定使用图片的哪一部分,相对图片左上角的像素坐标
//指定图片的原始大小
//向左偏12px,向上偏30px
14: marker.setIcon(icon);
15:
new soso.maps.MarkerDecoration({
'',
new soso.maps.Size(0, -4),
19: align: soso.maps.ALIGN.CENTER,
20: marker: marker
21: });
6.完成上面的编码后,得到一个如下图样子的圆形。
7.具体代码如下:
>
>
>
/>
>
>
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: }
>
>
1:
2:
>
function init(){
new soso.maps.LatLng(22.540551,113.934593);
),{
7: center:center,
8: zoomLevel:14
9: });
new soso.maps.Circle({
11: map:map,
12: center:center,
13: radius:1000,
,
15: fillOpacity:0.3,
16: strokeWeight:2
17: });
18:
new soso.maps.Marker({
20: position: center,
21: map: map
22: });
23:
new soso.maps.Point(0, 0),
new soso.maps.Size(27, 35),
'http://s.map.soso.com/themes/default/img/centermarker.png'
//指定使用图片部分的大小
//用来指定图标的锚点,默认为图标中心的位置
//指定使用图片的哪一部分,相对图片左上角的像素坐标
//指定图片的原始大小
//向左偏12px,向上偏30px
32: marker.setIcon(icon);
33:
new soso.maps.MarkerDecoration({
'',
new soso.maps.Size(0, -4),
37: align: soso.maps.ALIGN.CENTER,
38: marker: marker
39: });
var path1=[
41: center
42: ];
new soso.maps.Polyline({
44: path: path1,
'#000000',
46: strokeWeight: 5,
47: strokeOpacity: 1,
false,
49: map: map
50: });
/*
soso.maps.Event.addListener(map,'zoomlevel_changed',function() {
circle.setMap(null);console.log(map);
circle.setMap(map);
});
*/
57: }
58: window.onload=init;
</script>
>
>
>
>
>