最近在做SOSO地图相关开发，遇到相关画圆知识，特此简单记录下来，接下来讲解如何在在地图上画圆，感兴趣的朋友可以了解下

前言:最近在做SOSO地图相关开发，遇到相关画圆知识，特此简单记录下来。1.在页面中添加SOSO地图API引用，引用脚本:复制代码代码如下：脚本charset=' utf-8 ' src=' http://API。地图。搜搜。com/v 1.0/main。js '/script；2.新建一个地图DIV容器，如下:复制代码代码如下：div style=' width:603 px；高度：300 px ' id=' container '/div3.初始化地图:复制代码代码如下：var center=新搜搜。地图。latlng(22.540551，113.934593)；var map=新搜搜。地图。地图(文档。getelementbyid(' container ')，{ center:center，zoom level:14 })；4.创建一个圆形对象:复制代码代码如下：var circle=新搜搜地图。circle({ map:map，center:center，radius:1000，fillColor:'#00f '，fillOpacity:0.3，笔画粗细：2 })；5.为了美观，再给圆形设置一个中心点，代码如下:复制代码代码如下：var mark=新搜搜。地图。标记({ position:center，map:map })；var anchor=new soso.maps.Point(0，0)，size=new soso.maps.Size(27，35)，icon=新搜搜。地图。标记图像(' http://s。地图。搜搜。com/themes/default/img/center标记。png '，大小//指定使用图片部分的大小，锚//用来指定图标的锚点，默认为图标中心的位置，可以指定图标的位置，默认是和图片的左上角对齐的2008,新soso.maps.Point(0，0)//指定使用图片的哪一部分，相对图片左上角的像素坐标，new soso.maps.Size(27，35)//指定图片的原始大小，new soso.maps.Size(-12，-30))；//向左偏12px，向上偏30pxmarker.setIcon(图标);var装饰=新搜搜。地图。标记装饰({ content:' '，margin: new soso.maps.Size(0，-4)，align: soso.maps.ALIGN.CENTER，marker:marker })；6.完成上面的编码后，得到一个如下图样子的圆形7.具体代码如下:复制代码代码如下：DOCTYPE html html xmlns=' http://www。w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/titleSOSOMap/title style type=' text/CSS ' * { margin:0px；填充：0px}body，button，input，select，textarea { font: 12px/16px Verdana，Helvetica，Arial，sans-serif；} # info { width:603像素；填充顶部：3px溢出：隐藏；}.btn{宽度：190px}/style脚本charset=' utf-8 ' src=' http://API。地图。搜搜。com/v 1.0/main。js '/script脚本type=' text/JavaScript '函数init(){ var center=新搜搜。地图。latlng(22.540551，113.934593)；var map=新搜搜。地图。地图(文档。getelementbyid(' container ')，{ center:center，zoom level:14 })；var圈=新搜搜。地图。circle({ map:map，center:center，radius:1000，fillColor:'#00f '，fillOpacity:0.3，笔画粗细：2 })；新搜搜。地图。标记({ position:center，map:map })；var anchor=new soso.maps.Point(0，0)，size=new soso.maps.Size(27，35)，icon=新搜搜。地图。标记图像(' http://s。地图。搜搜。com/themes/default/img/center标记。png '，大小//指定使用图片部分的大小，锚//用来指定图标的锚点，默认为图标中心的位置，new soso.maps.Point(0，0)//指定使用图片的哪一部分，相对图片左上角的像素坐标，new soso.maps.Size(27，35)//指定图片的原始大小，new soso.maps.Size(-12，-30))；//向左偏12px，向上偏30px marker.setIcon(图标);var装饰=新搜搜。地图。标记装饰({ content:' '，margin: new soso.maps.Size(0，-4)，align: soso.maps.ALIGN.CENTER，marker:marker })；var路径1=[中心]；var折线=新搜搜。地图。polyline({ path:path 1，strokeColor: '#000000 '，strokeWeight: 5，strokeOpacity: 1，editable:false，map:map })；/*搜搜。地图。事件。添加侦听器(map，' zoomlevel_changed '，function(){ circle。set map(null))；console.log(地图);circle.setMap(地图);});*/}窗口。onload=init/script/head body onload=' init()' div style=' width:603 px；高度：300 px ' id=' container '/div/body/html

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。