ユーザーデータ層
#ディレクトリ
- 1 ユーザー データ レイヤー
- 2 ユーザー データのアップロード
- 3 ユーザー データ レイヤーの表示
- 4 ユーザー データの取得
ユーザー データのアップロード
ユーザー データをアップロードするには 2 つの方法があります。1 つは HTTP インターフェイスのアップロードです。メソッド、ビジュアル アノテーション メソッド。 1. HTTP インターフェイスのアップロード方法: HTTP インターフェイスの方法では、まずデータ ストレージ スペース (データボックス) を作成し、次にユーザーの POI データをアップロードする必要があります。ストレージ スペースとポイを作成すると、POST リクエストが送信されます。Chrome ブラウザーで Postman プラグインを使用すると、視覚的にリクエストを送信できます。 2. 視覚的な注釈方法: クラウド ストレージ編集ページに入った後、ユーザーは POI データを入力するための注釈モードを設定します。この方法はシンプルで直観的であるという特徴がありますが、データ量が多い場合には非効率的です。ユーザー データ レイヤーの表示
オーバーレイ ユーザー データ レイヤー
CustomLayer コンストラクターは、データ ストレージ スペース ID (地理的可能性) を受け取ることができます。 id) パラメータはユーザー データ レイヤーを生成し、データ ストレージの作成時にストレージ スペース ID を取得できます。 コードは次のとおりです://根据daboxId创建自定义图层，用户可用自己创建的geotableid替换30960
var customLayer=new BMap.CustomLayer({
geotableId: 30960,
q: '', //检索关键字
tags: '', //空格分隔的多字符串
filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
});map.addTileLayer(customLayer);//添加自定义图层
以下は、地図上に北京鉄道切符販売所レイヤーをオーバーレイした表示効果です:
ユーザー データのピット表示の例。体験してください。それ 。
ユーザー データ レイヤー イベント
JSAPIv1.5 は、クリック ユーザー データ レイヤー イベントを提供し、クリックされた POI ポイントに関する情報を返すことをサポートします。コードは次のとおりです。
customLayer.addEventListener('onhotspotclick',callback);//单击图层事件
function callback(e)//单击热点图层
{
var customPoi = e.customPoi, //获取poi对象
str = [];
str.push("address = " + customPoi.address);
str.push("phoneNumber = " + customPoi.phoneNumber);
var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br>电话：' + customPoi.phoneNumber + '</p>';
var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { //带检索的信息窗口
title: customPoi.title, //标题
width: 290, //宽度
height: 40, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
enableSendToPhone: true, //是否显示发送到手机按钮
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
searchInfoWindow.open(point);}
}ユーザー データの取得
ユーザー所有のデータを表示するだけでなく、 JSAPI取得インターフェースにより、独自のデータを取得することもできます。サポートされている検索タイプには、都市内検索、長方形エリア検索、円形エリア検索が含まれます。以下では、円形検索を例として、円形領域内の独自のデータを取得する方法を説明します。まず、マウスを使用して円形領域を描画します:
var drawingManager = new BMapLib.DrawingManager(map, {
//使用鼠标工具需要引入鼠标工具开源库DrawingManager_min.js及样式文件DrawingManager_min.css
isOpen: false, //是否开启绘制模式
enableDrawingTool: false, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
scale: 0.8 //工具栏缩放比例
}
});
drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);
drawingManager.open();マウス円描画終了イベント コールバック関数で周囲の検索を実行します:
drawingManager.addEventListener('circlecomplete', function(e) {
circle = e;
var radius= parseInt(e.getRadius()); //检索半径必须是整型
var center= e.getCenter();
drawingManager.close();
if (customLayer) {
map.removeTileLayer(customLayer);
}
localSearch.searchNearby(' ', center,radius,{customData:{databoxId: 4032}});//用新创建的databoxid替换该值
});以下は中関村周辺の鉄道切符売り場を検索した検索結果画像です:
ユーザーデータ取得の例、ぜひ体験してください。
