<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加缩略图控件</title>
    <link rel="stylesheet" href="https://map.botaisoft.com/js/doc/lib/fmap.css">
    <script src="https://map.botaisoft.com/js/doc/lib/fmap.js"></script>
    <style>
    body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        // 设置地图瓦片层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 map = new FMap.Map('map', {
            // 设置中心点坐标
            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;
        };
        //添加搜索控件
        map.addControl(new FMap.Control.Search({
            sourceData: sourceData,
            formatData: formatData,
            markerLocation: true,
            autoType: false,
            autoCollapse: true,
            minLength: 2,
            zoom: 15,
            initial: false
        }));
    </script>
</body>
</html>
添加搜索控件

results matching ""

No results matching ""
