控件使用文档

飞道科技

Tag

必要参数： ak 目前可以完美的在 http网站 使用，https网站有点问题，有待解决

<fd-w000015></fd-w000015>

百度地图v2.0和v3.0的显而易见的差别是: v3.0的定位功能必须要通过一个alert弹窗获得用户授权。

其他详细差别见官方说明

Attributes

ak

类型为字符串【string】 首先需要在百度上申请ak 申请地址

city

类型为字符串 当前城市，如北京、郑州

map-level

必须为大于0的一个整数，地图的默认绽放比例，数字越大，显示区域越小，默认为12

longitude

地图初始定位的经度，必须和latitude结合使用。【string】

latitude

地图初始定位的纬度，必须和longitude结合使用。【string】

search-id

要进行搜索的输入框的id。【String】

disable-geolocation-marker

值为 true 取消定位当前位置

Methods

set_point

const widget = document.getElementById('widget');
widget.set_point(111,123);  // 参数为经纬度

设置当前地图中心点,并设置标注

longitude

中心点经度 【Number】

latitude

中心点纬度 【Number】

level

可选参数。绽放比例，必须为大于0的整数值，默认12 【Number】

add_marker

在当前地图中添加标注点以及信息窗口

longitude

标注点经度 【Number】

latitude

标注点纬度 【Number】

info

信息窗口内容，支持html标签 【String】

option

标注的配置信息（可选参数）【Json】

属性               类型         描述
offset             Size         标注的位置偏移值
icon               Icon         标注所用的图标对象
enableMassClear   Boolean       是否在调用map.clearOverlays清除此覆盖物，默认为true
enableDragging    Boolean       是否启用拖拽，默认为false
enableClicking    Boolean       是否响应点击事件。默认为true
raiseOnDrag       Boolean       拖拽标注时，标注是否开启离开地图表面效果。默认为false
draggingCursor    String        拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范
rotation          Number        旋转角度
shadow            Icon          阴影图标
title             String        鼠标移到marker上的显示内容

示例：

<input type="button" value="添加标注" id="fd-w000015-002">
<input type="button" value="清除所有标注" id="fd-w000015-003">
<fd-w000015 id="fd-w000015-001" ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" style="width:30em;height:30em;display:block" map-level=9>
</fd-w000015>

const fd_w000003_001 = document.getElementById('fd-w000015-001');
const fd_w000003_002 = document.getElementById('fd-w000015-002');
const fd_w000003_003 = document.getElementById('fd-w000015-003');

fd_w000003_002.addEventListener('click', (e) => {
    fd_w000003_001.add_marker(113, 34, '我是标注001号', { title: 'ssss' });
    fd_w000003_001.add_marker(113, 34.125, '我是标注002号');
});

fd_w000003_003.addEventListener('click', (e) => {
    fd_w000003_001.clear();
});

fd_w000003_001.addEventListener('fdwe-marker-position', (r) => {
    console.log(JSON.stringify( r));
    const lat = r.lat;
    const lng = r.lng;
    fd_w000003_001.set_center(lng, lat);
    fd_w000003_001.set_level(10);
});

set_center

设置当前地图显示的中心点（没有标注），参数为经纬度

lng

经度 【Number】

lat

纬度 【Number】

set_center

设置当前地图显示的中心点（没有标注），参数为城市名

cityname

城市名称 【String】

set_level

设置当前地图的展示级别

level

级别，范围0-19 【Number】

关键字检索

keyword

关键字，可以是一个或者多个，多个的话为字符串数组 【String   String<>】

pagesize

检索结果每一页显示的条数 【Number】

cityname

城市名称，在某一个城市下搜索。可以不传入次参数，若不传入则全国搜索。 【String】

search_go_page

检索结果跳转到第几页【Number】

page_index

页码 【Number】

clear

清空所有地图标识点

Events

feidao-web事件绑定示例

<fd-w000015 data-feidao-actions="fdwe-get-address:a001"></fd-w000015>

fdwe-get-address

{"longitude":114.394734,"latitude":34.790768,"address":"河南省开封市顺河回族区"}

点击地图的任意位置，返回该位置的内容，内容包含：longitude，latitude，address

fdwe-search-city

[{
      "city": "郑州市",
      "numResults": 22165
}, {
      "city": "洛阳市",
      "numResults": 13448
}, {
      "city": "平顶山市",
      "numResults": 10327
}]

地图缩放级别比较小时进行检索，检索到的城市列表；返回的数据为数组。每一行数据包括的字段：

city        城市名称
numResults  结果数量

fdwe-search-result

检索到的结果。返回的数据为： current_page_size, total_num, total_page, page_index, result

current_page_size        当前检索结果页的结果数
total_num                总结果数
total_page               总页数
page_index               页数序号
result                   检索结果，数组，每一行数据包括的字段：

属性          类型            描述
title        String        结果的名称标题
point        Point         该结果所在的地理位置
url          String        在百度地图中展示该结果点的详情信息链接
address      String        地址（根据数据部分提供）。注：当结果点类型为公交站或地铁站时，地址信息为经过该站点的所有车次
city        String         所在城市
phoneNumber String         电话，根据数据部分提供
postcode    String         邮政编码，根据数据部分提供
type        PoiType        类型，根据数据部分提供
isAccurate  Boolean        是否精确匹配。只适用LocalSearch的search方法检索的结果
province    String         所在省份
tags        Array<String>  POI的标签，如商务大厦、餐馆等。目前只有LocalSearch的回调函数onSearchComplete(result)中的result和Geocoder.getLocation的回调函数的参数GeocoderResult.surroundingPois涉及的LocalResultPoi有tags字段。其他API涉及的LocalResultPoi没有该字段
detailUrl    String        在百度地图详情页面展示该结果点的链接。localsearch的结果中才有

fdwe-search-content

{ content: ‘水果’ }

搜索建议选择的内容。返回的数据为：content

fdwe-marker-position

返回值,lng为经度，lat为纬度，title为标示。

{"lng":113,"lat":34.125,"title":""}

获取当前点击标注的经纬度。返回的数据为：lng，lat，title

Example

自动定位

<fd-w000015 ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" id="widget" style="width:30em;height:30em;display:block"></fd-w000015>

设置地图绽放比例

<fd-w000015 ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" style="width:30em;height:30em;display:block" map-level=4></fd-w000015>

设置地图当前城市

<fd-w000015 ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" style="width:30em;height:30em;display:block" city="南京"></fd-w000015>

定位经纬度

<fd-w000015 ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" style="width:30em;height:30em;display:block" longitude=110.6 latitude=26.6></fd-w000015>

添加标注点和信息窗口

<input type="button" value="添加标注" id="fd-w000015-002">
<input type="button" value="清除所有标注" id="fd-w000015-003">
<fd-w000015 id="fd-w000015-001" ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" style="width:30em;height:30em;display:block" map-level=9>
</fd-w000015>

const fd_w000003_001 = document.getElementById('fd-w000015-001');
const fd_w000003_002 = document.getElementById('fd-w000015-002');
const fd_w000003_003 = document.getElementById('fd-w000015-003');

fd_w000003_002.addEventListener('click', (e) => {
    fd_w000003_001.add_marker(113, 34, '我是标注001号', { title: 'ssss' });
    fd_w000003_001.add_marker(113, 34.125, '我是标注002号');
});

fd_w000003_003.addEventListener('click', (e) => {
    fd_w000003_001.clear();
});

fd_w000003_001.addEventListener('fdwe-marker-position', (r) => {
    console.log(r);
    const lat = r.lat;
    const lng = r.lng;
    fd_w000003_001.set_center(lng, lat);
    fd_w000003_001.set_level(10);
});

点击获取地图位置内容

<fd-w000015 id="fd-w000015-004" ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" style="width:30em;height:30em;display:block" map-level=9>
</fd-w000015>

const fd_w000003_004 = document.getElementById('fd-w000015-004');

fd_w000003_004.addEventListener('fdwe-get-address', (r) => {
    alert(r.address);
});

搜索框

这个功能在控件测试器内不能正常运行，在正常的项目环境下是正常的

<input type="text" id="fd-w000015-006">
<fd-w000015 ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" id="fd-w000015-005" style="width:30em;height:30em;display:block" search-id=search>
</fd-w000015>

const fd_w000003_005 = document.getElementById('fd-w000015-005');
const fd_w000003_006 = document.getElementById('fd-w000015-006');

fd_w000003_006.addEventListener('keydown', (e) => {
    if (e.keyCode === 13) {
        const value = fd_w000003_006.value;
        fd_w000003_005.search(value, 10);
    }
});

关键字搜索

<button id="fd-w000015-008">检索结果为城市列表，检索内容为`水`</button>
<button id="fd-w000015-009">检索结果为点，检索内容为`水果`</button>
<fd-w000015 ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" id="fd-w000015-007" style="width:30em;height:30em;display:block">
      <img src="//api.map.baidu.com/staticimage/v3?ak=Vc7G9OQsedlrDANxqapCDe5SD30MA9bu&mcode=666666&center=110,33&width=480&height=450&zoom=12">
</fd-w000015>

const fd_w000003_007 = document.getElementById('fd-w000015-007');
const fd_w000003_008 = document.getElementById('fd-w000015-008');
const fd_w000003_009 = document.getElementById('fd-w000015-009');

fd_w000003_008.addEventListener('click', (e) => {
    fd_w000003_007.search('河', 10);
});

fd_w000003_009.addEventListener('click', (e) => {
    fd_w000003_007.search('水果', 20);
});

fd_w000003_007.addEventListener('fdwe-search-content', (e) => {
    const content = e.content;
    fd_w000003_007.search(content, 10);
});

fd_w000003_007.addEventListener('fdwe-search-city', (e) => {
    console.log(e);
});

fd_w000003_007.addEventListener('fdwe-search-result', (e) => {
    console.log(e);
});

取消当前位置标注

<fd-w000015 ak="Vc7G9OQsedlrDANxqapCDe5SD30MA9bu" style="width:30em;height:30em;display:block" disable-geolocation-marker></fd-w000015>