如何快速搭建一个基于FengMap的地图导航应用？

蜂鸟视图自成立以来就专注于提供从地图数据生产、地图编辑运维、地图应用开发的全流程专业技术产品与服务。长期的市场考验与技术迭代升级，产品功能接口较全面，性能表现优异。

日前，蜂鸟视图正式向海内外开发者用户开源「地图应用“小”程序」，提供地图导航应用源代码，让用户快速搭建一个基于FengMap的地图导航应用。

开源网址链接：https://github.com/Fengmap/FMSampleApp

一、主要开源框架

本次开源的移动端导航应用框架是基于原生的JavaScript，按照AMD规范进行编码的完整项目代码。本项目主要包括的以下主要模块：

1、基本地图展示和交互模块

本模块封装了基本的地图控制和交互操作，及常用的属性控制器

/**

 * [fmp.map 封装部分地图对象]

 * @return {[type]} [description]

 */

define('map', ['fmp.globalData', 'searchTpl', 'routeTpl'], function (tmap) {



    var fmap_ = null; //地图对象

    var element = 'fengMap'; //显示地图的Dom 的id

    var groupControl = null; //楼层控件对象

    var curMapGroupID = fmp.globalData.mapOptions.defaultFocusGroup;



    function create(options) {

        if (options.element) element = options.element

    }



    //打开fmap地图，传入options

    function openMap(options, success) {

        options = options || fmp.globalData.mapOptions;

        var mapOptions = Object.assign({}, options, {

            container: document.getElementById(element)

        });



        if (fmap_) {

            fmap_.dispose();

            fmap_ = null;

        }



        fmap_ = new fengmap.FMMap(mapOptions);



        fmap_.showCompass = fmp.config.compassControl; //指南针控件

        fmap_.compass.setFgImage('FMPM_CommonMap/images/compass.png');



        //打开Fengmap服务器的地图数据和主题

        fmap_.openMapById(fmp.globalData.fmapID, function (error) {

            alert('地图加载出错' + error);

            //打印错误信息

            // console.log(error);

        });



        //地图加载完成回掉方法

        var this_ = this;

        fmap_.on('loadComplete', function () {

            moveLeft();

            //是否需要添加导航类

            if (fmp.config.naviPage === true && fmp.config.routePage === true) {

                requirejs(['fmp.events', 'navi'], function (events, navi_) {

                    fmp.navi = navi_;

                    fmp.navi.create(fmap_);

                })

            }



            //url判断

            var FID = null;

            var query = window.location.search.substring(1);

            var vars = query.split("&");

            for (var i = 0; i < vars.length; i++) {

                var pair = vars[i].split("=");

                if (pair[0] == 'fid') {

                    FID = pair[1];

                }

            }

            if (FID) {

                var model = fmp.search.findModelByFid(FID);

                if (model && model.name) {

                    $('.header-wrap').hide();

                    $('.info-wrap').hide();

                    $('#route-panel').show();

                    //当前点击店铺作为导航终点

                    $("#route-panel input[name='startTxt']").val(model.name);

                    $("#route-panel input[name='endTxt']").focus();

                    fmp.globalData.startFid = FID;

                }

            }

        });



        fmap_.on('visibleGroupLoaded', () => {

            var center = getGroupCenter(curMapGroupID);

            moveToCenter(center);



            //根据当前配置设置事件

            if (fmp.config) {

                //是否需要楼层控件

                if (fmp.config.scrollGroupControl) {

                    groupControl = new fengmap.FMScrollGroupsControl(fmap_, Object.assign({}, fmp.globalData.scrollCtrlOption));

                    $('.fm-layer-list label').removeClass('active');

                    $(".fm-layer-list label[data-gid='" + fmap_.focusGroupID + "']").addClass('active');

                }



                if (fmp.config.zoomControl) {

                    var zoomControl = new fengmap.FMZoomControl(fmap_, fmp.globalData.zoomCtlOpt);

                }



                if (fmp.config.viewModeSwitchBtn) {

                    var viewModeControl = new fengmap.FMToolControl(fmap_, fmp.globalData.toolCtlOpt);

                }



                if (fmp.search) fmp.search.create(fmap_);

                if (fmp.markers) fmp.markers.create(fmap_);

            }



            if (success && typeof success == 'function') {

                success();

            }

        })



        //初始化地图数据

        function success() {

            //地图背景色

            fmap_.setBackgroundColor('#F5F5F5');

            //去掉loading

            $('#loader').css('display', 'none');

        }



        //过滤不允许点击的地图元素，设置为true为允许点击，设置为false为不允许点击

        fmap_.pickFilterFunction = function (event) {

            //如设置点击墙模型时不高亮

            if (event.nodeType == fengmap.FMNodeType.MODEL) {

                return true;

            }

            return false

        };



        //点击地图事件

        fmap_.on('mapClickNode', function (event) {

            if (!fmp.globalData.isNavigation) return;



            fmp.searchTpl.resetUI();

            fmp.map.showTool();

            fmp.map.resetToolbar();

            fmp.markers.removeAllMarkers();

            fmp.map.clearModelSel();

            $('.info-wrap').hide();

            if (fmp.globalData.isMapClick) {

                $('.facility-wrap').hide();

                setToolbar();

            } else {

                $('.facility-wrap').show();

            }



            //清空marker 重置发现设施样式

            // $('.header-wrap .discovery-facility ul li').removeClass("facility-active");

            $('.facility-wrap ul li').removeClass("facility-active");



            if (!event.target) return;

            if (!event.target.FID) return;



            fmp.globalData.isFindFacility = false;



            //显示店铺信息，缩放，聚焦

            if (fmp.infoTpl) {

                var model = fmp.search.findModelByFid(event.target.FID);

                fmp.search.mapSelectModel(model);

                fmp.markers.removeAllMarkers();

                $('.facility-wrap').hide();

            }



            // 地图选点

            if (fmp.globalData.isMapClick) {

                event.target.name = event.target.name ? event.target.name : '位置';

                fmp.routeInfoTpl.showPanel(event.target);

                $('.route-info-wrap').show();

                $('.info-wrap').hide()

                fmap_.moveTo(event.target.mapCoord);

                return;

            }



            //路径规划页面，不出现详情框

            if ($('#route-panel').css('display') == 'block') {

                return;

            }



        });



        // 点击指南针事件, 使角度归0

        fmap_.on('mapClickCompass', function () {

            if (!fmp.globalData.isNaving) {

                updateMapRoate(fmp.globalData.originMapRotate);

            }

        });



        //聚焦楼层发生变化

        fmap_.on('focusGroupIDChanged', function (focusGroupID) {

            var gid = focusGroupID.gid;



            if (curMapGroupID == gid) return;

            curMapGroupID = gid;



            //改变聚焦楼层字体颜色

            $('.fm-layer-list label').removeClass('active');

            $(".