各ピットを記録し、ピット
現在、Baiduのマップ接点集約需要としてプロジェクトをやって、古いルールは、ドキュメントノートを参照してください。
その他0
1.ポイント重合
現象をカバーするマップを生成し、パフォーマンスを向上させるために、特徴点の多数をロードする問題を解決するためのポイント重合（MarkerClustererの重合マーカー）。
Baiduのマップ - 集約ポイント
2.簡単な例
- HTMLの\のCSS
<style>
body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}
#allmap {width: 100%;height: 500px;}
p {margin-left: 5px;font-size: 14px;}
/*隐藏百度logo*/
.anchorBL a img{display: none;}
.anchorBL span span{display: none;}
</style>
<body style="min-height: 100%;">
<div id="allmap"></div>
</body>
- JS
- 前記ポイント集計関数、有効データが非同期要求に応じて取得してもよいが、得られたデータは、水平及び垂直座標であるべきです
- あなたはすぐに、関連する場所に移動し、マップを開くたびに到達するために、場所をオンにすることができます
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<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>
<script>
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,6);
//启用滚轮放大缩小
map.enableScrollWheelZoom(true);
// 相关数据(也可以根据需求异步获取）
// 可以确定的是每条数据应要有横纵坐标
var data = [{"mapy": "32.94584", "mapx": "112.894350", "time": "12:30"},
{"mapy": "33.34683", "mapx": "112.694300", "time": "11:30"},
{"mapy": "33.54702", "mapx": "112.094380", "time": "10:30"},
{"mapy": "33.148780", "mapx": "116.494390", "time": "13:30"}
];
var markers = [];
// 遍历得到的数据
$.each(data, function (i, item) {
// 横纵坐标定点
var point = new BMap.Point(item.mapx, item.mapy);
var marker = new BMap.Marker(point);
// 获取数据
var content = item.time;
// 添加点击事件
//addClickHandler(content, marker);
markers.push(marker);
});
// 根据ip定位
function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
console.log("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
// 添加点聚合效果
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
</script>
- 集約ポイントのスタイルを変更し
、彼らは、デフォルトのスタイルが良く見える、または特別なニーズを持っていないと感じた場合、あなたがスタイルのポイントをカスタマイズすることができます
// 添加点聚合效果
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
//最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
minClusterSize: 2,
styles: [{
// 此处URL不知道能否用本地图片，自己试了一下不能，待解答！
url: 'dist/img/smallred.png',
size: new BMap.Size(0, 0)
}]
});
3.クリックイベントを追加します。
あなたは、このようなポップ・ポップの表示情報として、通常の状況下では、各ポイントのクリックイベントを追加する必要があります
ポップ
- クリックイベントを追加
// 添加点击事件,可在循环数据时调用
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
- ポップ
-
openInfo(content, e)、あなたはパラメータのニーズを渡すことができますどこに。 -
var infoWindow = new BMap.InfoWindow( 拼接数据 , opts);、どこでスプライシングは、パラメータをカスタマイズすることができます。
-
// 弹窗
var opts = {
width: 270, // 信息窗口宽度
height: 100, // 信息窗口高度
enableMessage: true//设置允许信息窗发送短息
};
// 弹窗点击事件
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
// 创建信息窗口对象
var infoWindow = new BMap.InfoWindow(`<div>自定义内容</div><div>${content}</div>` , opts);
//开启信息窗口
map.openInfoWindow(infoWindow, point);
}
4.終了
1.より複雑な要件はあまりを終了する前に、と接触していませんでした。
ポップ部分の間2.実行する層を組み合わせることが好きですが、失敗しただろう、エラーは次のとおりです。正しくないノード、層がカプセル化されない場合があります。
3.「BMap.InfoWindow（層成分、付き合えない）」上の層成分は、最初の引数が呼び出されますが、バックグラウンドのエラー、そして最終的にアイデアをあきらめています。
賛美聖歌をポイント！