SOSOマップAPIの使い方(1)map_javascriptスキルで円を描くための実装アイデアとコード

まえがき : 最近 SOSO マップ関連の開発を行っていて、円の描画に関する知識を見つけたので、簡単にここに記録します。 1. SOSO Map API リファレンスをページに追加し、リファレンス スクリプト :

コードをコピーします コード次のように: 2. 次のように新しいマップ DIV コンテナを作成します : コードをコピーします コードは次のとおりです:

3. マップを初期化します : コードをコピーします コードは次のとおりです。 var center=new soso.maps.LatLng(22.540551,113.934593); var map=new soso.maps.Map(document.getElementById("container"),{ center:center, ズーム レベル:14 });

4. 円形オブジェクト を作成します: コードをコピーします コードは次のとおりです: var Circle=new soso.maps.Circle({ map:map, center:center, radius:1000, fillColor:"#00f", fillOpacity:0.3, ストロークウェイト:2 });

5. 見た目を美しくするために、円 A の中心点を設定します。コードは次のとおりです : コードをコピーします コードは次のとおりです: var marker = new soso.maps.Marker({ Position: center, map: map }); varアンカー = 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)//画像を指定 .maps.MarkerDecoration({ content: '', margin: new soso.maps.Size(0, -4), align: soso .maps.ALIGN.CENTER, マーカー: マーカー });

6. 上記のエンコードが完了すると、以下に示すような円が得られます 7. 具体的なコードは次のとおりです : コードをコピーします コードは次のとおりです: SOSOMap *{ margin:0px; padding:0px; } body、ボタン、入力、選択、テキストエリア { font: 12px/16px Verdana、Helvetica、 Arial、サンセリフ; } #info{ width:603px; padding-top:3px; overflow:hidden; } .btn{ width:190px; } 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 }); varcircle= new soso.maps.Circle({ マップ:map, center:center, radius:1000, fillColor:"#00f", fillOpacity:0.3, ストロークウェイト:2 }); var marker = new soso.maps.Marker({ position: center, map: map }); varアンカー = 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 // soso.maps.Point(0, 0)//使用する画像の一部を指定、相対する画像の左上角の画像素座標 , new soso.maps.Size(27, 35)// 指定する画像の元の大きさ , new soso.maps.Size(-12, -30));//方向左偏12px,方向偏30px marker.setIcon(icon); vardeco = new soso.maps.MarkerDecoration( { content: '', margin: new soso.maps.Size(0, -4), align: soso.maps.ALIGN.CENTER, マーカー: マーカー } ); var path1=[ center ]; var Polyline = new soso.maps.Polyline({ path: path1, ストロークカラー: '#000000', ストロークウェイト: 5, ストローク不透明度: 1, editable:false, マップ: マップ }); /* soso.maps。 Event.addListener(map, 'zoomlevel_changed',function() { Circle.setMap(null);console.log(map); Circle.setMap(map); }); */ } window.onload=init;

SOSOマップAPIの使い方(1)map_javascriptスキルで円を描くための実装アイデアとコード

関連記事