SOSO地图API使用(一)在地图上画圆实现思路与代码


Posted in Javascript onJanuary 15, 2013

前言:最近在做SOSO地图相关开发,遇到相关画圆知识,特此简单记录下来。
1.在页面中添加SOSO地图API引用,引用脚本

<script charset="utf-8" src="http://api.map.soso.com/v1.0/main.js"></script>;

2.新建一个地图DIV容器,如下
<div style="width:603px;height:300px" id="container"></div>

3.初始化地图
 var center=new soso.maps.LatLng(22.540551,113.934593);
 var map=new soso.maps.Map(document.getElementById("container"),{
     center:center,
     zoomLevel:14
 });

4.创建一个圆形对象
 var circle=new soso.maps.Circle({
        map:map,
        center:center,
        radius:1000,
        fillColor:"#00f",
        fillOpacity:0.3,
        strokeWeight:2
    });

5.为了美观,再给圆形设置一个中心点,代码如下
 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//指定使用图片部分的大小
         , anchor//用来指定图标的锚点,默认为图标中心的位置,可以指定图标的位置,默认是和图片的左上角对齐的。
         , new soso.maps.Point(0, 0)//指定使用图片的哪一部分,相对图片左上角的像素坐标
         , new soso.maps.Size(27, 35)//指定图片的原始大小
         , new soso.maps.Size(-12, -30));//向左偏12px,向上偏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.完成上面的编码后,得到一个如下图样子的圆形
SOSO地图API使用(一)在地图上画圆实现思路与代码7.具体代码如下
 <!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: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//指定使用图片部分的大小
             , anchor//用来指定图标的锚点,默认为图标中心的位置
             , new soso.maps.Point(0, 0)//指定使用图片的哪一部分,相对图片左上角的像素坐标
             , new soso.maps.Size(27, 35)//指定图片的原始大小
             , new soso.maps.Size(-12, -30));//向左偏12px,向上偏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>
 </head>
 <body onload="init()">
 <div style="width:603px;height:300px" id="container"></div>
 </body>
 </html>
Javascript 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 #Javascript
javascript真的不难-回顾一下基础知识
Jan 15 #Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 #Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 #Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 #Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 #Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 #Javascript
You might like
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
小偷PHP+Html+缓存
2006/11/25 PHP
php 启动报错如何解决
2014/01/17 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python利用命名空间解析XML文档
2020/08/10 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
超市国庆节促销方案
2014/02/20 职场文书
酒后驾车标语
2014/06/30 职场文书
主题党日活动总结
2014/07/08 职场文书
奶茶店创业计划书
2014/08/14 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
怎样写辞职信
2015/02/27 职场文书
湘江北去观后感
2015/06/15 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android