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 相关文章推荐
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
jQuery的position()方法详解
Jul 19 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
2.PHP入门
2006/10/09 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
javascript中new关键字详解
2015/12/14 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
如何运行带参数的python脚本
2019/11/15 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
小学生成长感言
2014/01/30 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
明星邀请函
2015/02/02 职场文书
男方婚前保证书
2015/02/28 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
交通事故调解协议书
2015/05/20 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技