百度地図apiファイルを導入する <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script> マップインスタンスを作成し、基本プロパティを設定する 関数 huaLine(id, sj, numSelect) { //百度マップAPI関数 // Baidu Map API関数 map = new BMap.Map(id, { mapType: BMAP_HYBRID_MAP }); // 座標と緑色の衛星地図の両方を持つハイブリッドマップであるマップインスタンスを作成します。 map.centerAndZoom(new BMap.Point(104.06, 30.67), 5); //マップを初期化し、中心点の座標とマップレベルを設定します。 map.enableScrollWheelZoom(true); //マウスホイールのズームを有効にする
Baidu Map Point Aggregatorプラグインの導入 <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min. js"></script><script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/ 1.2/src/MarkerClusterer_min.js"></script>。
ポイント集計を実装するためのカスタムアノテーションを作成する。 // 配列を作成する var markers = []; //ピクセル単位の x 座標と y 座標を持つ点を作成します。 var pt = new BMap.Point(longitude, latitude); //マーカーのアイコンを設定する 。 //マーカーのアイコンを設定し、導入された画像のサイズを変更します。
var myIcon = new BMap./...Icon(".../.../img/work/yuan.png", new BMap.Size(32, 32)); // 注釈を作成し、注釈のサイズを設定する。 // マーカーを作成し、マーカーの緯度経度とマーカーの画像を設定します。 var marker2 = new BMap.Marker(pt, { icon: myIcon }) ; // 集計するポイントを配列に追加する markers.push(marker2) ;
// ポイント集約を初期化 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
注意: 既存のポイント集計プラグインはラグが多いので、Baiduで兄貴分の修正プラグインを検索して使ってください。
|