UI控件

比例尺

提供比例尺UI控件，默认位于地图左下角

// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);
// 创建地图实例
var mapScale = new FMap.Map('mapScale', {
    // 设置中心点坐标
    center: new FMap.LatLng(38.92705, 121.6580833),
    // 设置地图缩放级别
    zoom: 13,
    maxZoom: 17,
    minZoom: 3,
    // 设置地图实例瓦片层
    layers: [layer]
});
mapScale.addControl(new FMap.Control.Scale());

搜索

提供搜索UI控件，默认位置地图左上角

// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);
// 创建地图实例
var mapSearch = new FMap.Map('mapSearch', {
    // 设置中心点坐标
    center: new FMap.LatLng(38.92705, 121.6580833),
    // 设置地图缩放级别
    zoom: 13,
    maxZoom: 17,
    minZoom: 3,
    // 设置地图实例瓦片层
    layers: [layer]
});

//指定搜索控件选用的搜索接口
var sourceData = function (text, callResponse) {
    var searchOption = new FMap.LocalSearchOptions('http://map.botaisoft.com/apis/', callResponse, token);
    var searchSetting = new FMap.LocalSearchSetting(text, 0, 10);
    var searcher = new FMap.LocalSearch(searchOption);
    searcher.searchInCity(searchSetting, '大连', 0);
};
//指定搜索结果的数据处理方式
var formatData = function (result) {
    var json = {}, key, loc, disp = [];
    var poiList = result.getPoiList();
    for (var i in poiList) {
        key = poiList[i].name;
        loc = FMap.latLng(poiList[i].point.lat, poiList[i].point.lng);
        json[key] = loc;
    }
    return json;
};
//添加搜索控件
mapSearch.addControl(new FMap.Control.Search({
    sourceData: sourceData,
    formatData: formatData,
    markerLocation: true,
    autoType: false,
    autoCollapse: true,
    minLength: 2,
    zoom: 15,
    initial: false
}));

版权

默认位于地图右下方

//版权信息
var fmapAttrib = '&copy; <a href="#"target="_blank">FMap</a>';
// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token, { attribution: fmapAttrib });

// 创建地图实例
var mapCopyright = new FMap.Map('mapCopyright', {
    // 设置中心点坐标
    center: new FMap.LatLng(38.92705, 121.6580833),
    // 设置地图缩放级别
    zoom: 13,
    maxZoom: 17,
    minZoom: 3,
    // 设置地图实例瓦片层
    layers: [layer]
});

缩放控制

默认位于地图左上方

// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);

// 创建地图实例
var mapZoom = new FMap.Map('mapZoom', {
    // 设置中心点坐标
    center: new FMap.LatLng(38.92705, 121.6580833),
    // 设置地图缩放级别
    zoom: 13,
    maxZoom: 17,
    minZoom: 3,
    // 设置地图实例瓦片层
    layers: [layer]
});

mapZoom.addControl(FMap.control.zoomslider({
    //以下参数为默认值，可根据需求配置
    position: 'topleft',
    zoomInText: '+',
    zoomOutText: '_',
    zoomInTitle: 'Zoom in',
    zoomOutTitle: 'Zoom out'
}))