まえがき: 最近 SOSO マップ関連の開発を行っていて、円の描画に関する知識を見つけたので、簡単にここに記録します。 1. SOSO Map API リファレンスをページに追加し、リファレンス スクリプト : コードをコピーします コード次のように: script> ;; <BR></div><BR><STRONG>2. 次のように新しいマップ DIV コンテナを作成します </STRONG>: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="58626" class="copybut" id="copybut58626" onclick="doCopy('code58626')"><U> コードをコピーします</U> </a> コードは次のとおりです:</span></div><div class="codebody" id="code58626"><div style="width:603px;height:300px" id="container"></div><br> <br> </div> <br>3. マップを初期化します <strong>: </strong><br><div class="codetitle"><span><a style="CURSOR: pointer" data="36600" class="copybut" id="copybut36600" onclick="doCopy('code36600')"> コードをコピーします <u></u></a> コードは次のとおりです。 </span></div> <div class="codebody" id="code36600"> var center=new soso.maps.LatLng(22.540551,113.934593);<br> var map=new soso.maps.Map(document.getElementById("container"),{<br> center:center,<br> ズーム レベル:14 <br> });<br><br> </div> <br>4. 円形オブジェクト <strong> を作成します: </strong><br><div class="codetitle"><span><a style="CURSOR: pointer" data="76121" class="copybut" id="copybut76121" onclick="doCopy('code76121')">コードをコピーします <u></u></a> コードは次のとおりです: </span></div> <div class="codebody" id="code76121"> var Circle=new soso.maps.Circle({<br> map:map,<br> center:center,<br> radius:1000,<br> fillColor:"#00f",<br> fillOpacity:0.3,<br> ストロークウェイト:2<br> });<br><br> </div> <br>5. 見た目を美しくするために、円 A の中心点を設定します。コードは次のとおりです <strong>: </strong><br><div class="codetitle"><span><a style="CURSOR: pointer" data="57558" class="copybut" id="copybut57558" onclick="doCopy('code57558')"> コードをコピーします <u></u></a> コードは次のとおりです: </span></div> <div class="codebody" id="code57558"> var marker = new soso.maps.Marker({<br> Position: center,<br> map: map<br> });<br> varアンカー = new soso.maps.Point(0, 0),<br> size = new soso.maps.Size(27, 35),<br> icon = new soso.maps.MarkerImage('http:/ /s.map.soso.com/themes/default/img/centermarker.png'<br> 、size//画像部分のサイズを指定します <br> 、anchor//アイコンのアンカーポイントを指定するために使用されます、デフォルトはアイコンの中心の位置ですが、アイコンの位置を指定できます。デフォルトは画像の左上隅に揃えられます。 <br> , new soso.maps.Point(0, 0)//使用する画像の部分、画像の左上隅を基準としたピクセル座標を指定します <br> , new soso.maps.Size(27 , 35)//画像を指定 .maps.MarkerDecoration({<br> content: '',<br> margin: new soso.maps.Size(0, -4),<br> align: soso .maps.ALIGN.CENTER,<br> マーカー: マーカー<br> });<br><br><br><br>6. 上記のエンコードが完了すると、以下に示すような円が得られます<br> </div> <br>7.<strong>具体的なコードは次のとおりです <br>: </strong><img src="http://files.jb51.net/file_images/article/201301/2013115152429011.png?201301515253" alt="SOSOマップAPIの使い方(1)map_javascriptスキルで円を描くための実装アイデアとコード" ><strong></strong><br> コードをコピーします <div class="codetitle"><span><a style="max-width:90%" data="39804" class="copybut" id="copybut39804" onclick="doCopy('code39804')"> コードは次のとおりです:<u><div class="codebody" id="code39804"> <br> <!DOCTYPE html><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <メタhttp-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>SOSOMap</title><br> <style type="text/css" ><br> *{<br> margin:0px;<br> padding:0px;<br> }<br> body、ボタン、入力、選択、テキストエリア {<br> font: 12px/16px Verdana、Helvetica、 Arial、サンセリフ;<br> }<br> #info{<br> width:603px;<br> padding-top:3px;<br> overflow:hidden;<br> }<br> .btn{<br> width:190px;<br> }<br> </style><br> <script charset="utf-8" src="http://api.map.soso.com/v1.0/ main.js"> <br> function init(){<br> var center=new soso.maps.LatLng(22.540551,113.934593 );<br> var map=new soso.maps.Map(document.getElementById("container"),{<br> center:center,<br> zoomLevel:14<br> });<br> varcircle= new soso.maps.Circle({<br> マップ:map,<br> center:center,<br> radius:1000,<br> fillColor:"#00f",<br> fillOpacity:0.3,<br>ストロークウェイト:2<br> });<br> var marker = new soso.maps.Marker({<br> position: center,<br> map: map<br> });<br> varアンカー = new soso。 maps.Point(0, 0),<br> size = new soso.maps.Size(27, 35),<br> icon = new soso.maps.MarkerImage('http://s.map.soso.com /themes/default/img/centermarker.png '<br>、size // soso.maps.Point(0, 0)//使用する画像の一部を指定、相対する画像の左上角の画像素座標<br> , new soso.maps.Size(27, 35)// 指定する画像の元の大きさ<br> , new soso.maps.Size(-12, -30));//方向左偏12px,方向偏30px<br> marker.setIcon(icon);<br> vardeco = new soso.maps.MarkerDecoration( {<br> content: '',<br> margin: new soso.maps.Size(0, -4),<br> align: soso.maps.ALIGN.CENTER,<br> マーカー: マーカー<br> } );<br> var path1=[<br> center<br> ];<br> var Polyline = new soso.maps.Polyline({<br> path: path1,<br> ストロークカラー: '#000000', <br> ストロークウェイト: 5, <br> ストローク不透明度: 1,<br> editable:false,<br> マップ: マップ<br> });<br> /*<br> soso.maps。 Event.addListener(map, 'zoomlevel_changed',function() {<br> Circle.setMap(null);console.log(map);<br> Circle.setMap(map);<br> });<br> */<br> } <br> window.onload=init;<br>