订餐系统之地图订餐

　　离上一篇博客已经是1月有余了，这中间清楚的认识到自己几年的编程下来（大学4年，入行3载），能拿出手的东西真的屈指可数，也许真的是，一直以来都是为实现功能来写代码，所以终无大的突破！每每得空便思考自己到底差在哪？是不了解框架？于是学习EF；是不了解node.js？安装后，写了些demo; 是没学习新知识？于是学了下WFP... 然而，了解这些东西并没让自己有所收获，反而越发不知所措了。思考还在继续，”探索“还在继续... 于是有一天看到了设计模式，看到《大话设计模式》才明白自己差在哪，差在对面向对象的理解！于是才开始正式的去了解什么是面向对象，为了加深理解，又细细看了《你必须知道的.net(第二版)》中的OO大原则，OO大智慧，OO之美...而后，再一次对《大话设计模式》中内容细细品味...这时，我觉得自己才开始真正的沉淀了！罗嗦了半天，下面开始今天的正文吧！

　　所谓地图订餐就用户直接在地图上确定自己的位置后，搜索出附近商家后，直接选择商家开始订餐。目前市面上也有很多这样的功能，下面我就把自己实现方式介绍下吧。上篇博客《订餐系统之按距离[根据经纬度]排序、搜索》中所提到的功能，在地图订餐中就是一个应用。

　　注：以下代码都是百度地图的API。google API变成3.0后，语法变了太多了，大部分项目都变成百度地图了。

商家定位

　　所谓定位，就是在地图上标注商家的位置，成为用户搜索的来源，如图1：

订餐系统之地图订餐

图1

　　定们代码比较简单，js部分代码如下：

<script type="text/javascript">
    var gzoom = 15;
    var marker = null;
    var map = new BMap.Map("map_canvas"); // 创建地图实例
    map.enableScrollWheelZoom();
    var myGeo = new BMap.Geocoder();
    var _lat = parseFloat($("#hidLat").val());
    var _lng = parseFloat($("#hidLng").val());
    var initpoint = new BMap.Point(_lng, _lat); // 创建点坐标
    //图标
    var myIcon = new BMap.Icon("http://www.ihangjing.com/images/marker50.png", new BMap.Size(20, 34), { anchor: new BMap.Size(10, 0) });
    marker = new BMap.Marker(initpoint, { icon: myIcon });
    map.addOverlay(marker);
    marker.enableDragging();
    marker.setTitle("拖动修改位置");
    map.centerAndZoom(initpoint, gzoom); // 初始化地图，设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());  //缩放工具

    EventWrapper.addListener(map, "click", function(e) {
        map.clearOverlays();
        initpoint = e.point;
        map.removeOverlay(marker);
        marker = new BMap.Marker(initpoint, { icon: myIcon });
        map.addOverlay(marker);
        marker.enableDragging();
        marker.openInfoWindow(infoWindow);
        setLatLng(initpoint);

        marker.addEventListener("dragend", function(e) {
            initpoint = e.point;
            marker = new BMap.Marker(initpoint);
            this.openInfoWindow(infoWindow);
            setLatLng(initpoint);
        });
        marker.addEventListener("dragstart", function(e) {
            map.closeInfoWindow()
        });
    });

    marker.addEventListener("dragend", function(e) {
        initpoint = e.point;
        marker = new BMap.Marker(initpoint);
        this.openInfoWindow(infoWindow);
        setLatLng(initpoint);
    });

    marker.addEventListener("dragstart", function(e) {
        map.closeInfoWindow()
    });

    var opts = {
        width: 250,     // 信息窗口宽度  
        height: 50    // 信息窗口高度
    }

    var winhtml = " <div><p>确定地图位置后，点击按钮“确认位置”进行保存</p>";
    winhtml += "<p style=\" float:right; padding-right:10px;\"><input type=\"button\" value=\"确认位置\" onclick='map.closeInfoWindow()' /></p></div>";

    var infoWindow = new BMap.InfoWindow(winhtml, opts);  // 创建信息窗口对象

    function setLatLng(point) {
        document.getElementById("hidLat").value = point.lat;
        document.getElementById("hidLng").value = point.lng;
        return true;
    }

    function setPlace() {
        var hfcity = $("#hfcity").val();
        var address = document.getElementById("keyaddress").value.trim();
        var local = new BMap.LocalSearch(hfcity, {
            renderOptions: {
                map: map,
                autoViewport: true,
                selectFirstResult: false
            }
        });
        local.search(address);
    }
</script>

View Code