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.具体的なコードは次のとおりです
:
コードをコピーします

コードは次のとおりです: