zoukankan      html  css  js  c++  java
  • googleMap JsAPI

    var obj = {};
    var currentText = "全部";
    var point = null;
    var map = null;
    var infowindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();
    
    
    function formatDistance(distance){
        if(distance == 0){
            return "";
        }else if(distance < 1000){
            return parseInt(distance) + "m";
        }else{
            return Math.round(distance/1000*10)/10  + "km";
        }
    }
    
    
    obj.locate = function(){
        if (window.navigator.geolocation) {
            window.navigator.geolocation.getCurrentPosition(
                function(position) {
                    //创建地图
                    point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    var option = {
                        zoom: 10,
                        center: point,
                        disableDefaultUI: true, //取消默认的试图 
                        navigationControl: false, //导航
                        mapTypeControl: false, //地图、卫星视图
                        scaleControl: false, //比例尺
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("myMap"), option);
                    if(point != null){
                        $("#myMap").css("background-image", "");
                    }
                    obj.init();
                    //创建当前位置
                    /*var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: {url: 'https://maps.gstatic.com/mapfiles/markers/marker_green.png'}
                    });
                    geocoder.geocode({'location': point}, function(results, status) {
                        if (status === google.maps.GeocoderStatus.OK) {
                            var content = results[0].formatted_address;
                            if(content.indexOf("省")!=-1){
                                content = content.substring(content.indexOf("省")+1,content.length);
                            }
                            if(content.indexOf(" ")!=-1){
                                content = content.substring(0,content.indexOf(" "));
                            }
                            marker.addListener('click', function() {
                                map.setZoom(11);
                                map.setCenter(point);
                                infowindow.setContent("我的位置:<br/>" + content);
                                infowindow.open(map, marker);
                            });
                            
                        } else {
                            window.alert('Geocoder failed due to: ' + status);
                        }
                    });*/
                }, 
                function(error) {
                    obj.init();
                    //alert('Locate failed due to ' + error.message);
                    /*switch(error.code){
                    case error.TIMEOUT :
                        alert( " 连接超时,请重试 " );
                        break;
                    case error.PERMISSION_DENIED :
                        alert( " 您拒绝了使用位置共享服务,查询已取消 " );
                        break;
                    case error.POSITION_UNAVAILABLE :  
                        alert( " 非常抱歉,我们暂时无法为您所在的星球提供位置服务 " );
                        break;
                    }*/
                },
                {
                    enableHighAcuracy : true
                }
            );
        }
    };
    
    
    //初始化
    obj.init = function() {
        $("#dataList").empty();
        $.post("/store/getList",{'address': currentText},function(data){
            if(point != null){
                for(var i=0; i < data.length; i++){
                    data[i].distance = new GLatLng(point.lat(), point.lng()).distanceFrom(new GLatLng(data[i].storeDto.latitude, data[i].storeDto.longitude));  
                }
                if(data.length > 1){
                    for(var i=0; i<data.length-1; i++){   
                        for(var j=i+1; j<data.length; j++){
                            if (parseFloat(data[i].distance) > parseFloat(data[j].distance)){
                                var temp = data[i];   
                                data[i] = data[j];   
                                data[j] = temp;
                            }
                        }
                    }
                }
            }
            obj.initList(data);
        });
    };
    
    
    obj.initList = function(data){
        var tag = "";
        for(var i=0;i<data.length;i++){
            var store= data[i];
            tag += "<a href='shop-details.html?store="+encodeURI(encodeURI(JSON.stringify(store)))+"'>";
            tag += "    <div class='shop-list'>";
            tag += "        <div class='shop-info'>";
            tag += "            <p class='name'>"+ store.name +"</p>";
            tag += "            <p class='address'>"+ store.addressDetail +"</p>";
            tag += "        </div>";
            tag += "        <div class='dist'>";
            if(store.distance != null && store.distance != 0){
                tag +=     "        <span class='count'>"+formatDistance(store.distance)+"</span>";
            }
            tag += "            <span class='icon'></span>";
            tag += "        </div>";
            tag += "    </div>";
            tag += "</a>";
        }
        $("#dataList").append(tag);
        obj.locateStore(data[0]);
    };
    
    
    obj.locateStore = function(row){
        var firstPoint = new google.maps.LatLng(row.storeDto.latitude, row.storeDto.longitude);
        map.setZoom(10);
        map.setCenter(firstPoint);
        var marker = new google.maps.Marker({
            map: map,
            position: firstPoint,
            icon: {url: 'https://maps.gstatic.com/mapfiles/markers/marker.png'}
        });
        
        infowindow.setOptions({
            content: "<div style='font-size: 11px'>" + row.name + "<br/>" + row.addressDetail + "</div>",
            disableAutoPan: false,//地图完全打开时才可见
            pixelOffset: {height: 15, 0},
            position: firstPoint
        });
        infowindow.open(map, marker);
        marker.addListener('click', function() {
            map.setZoom(15);
            map.setCenter(firstPoint);
            infowindow.open(map, marker);
        });
    };
    
    
    obj.serch = function(){
        if(point != null){
            window.location.href = "shop-search.html?latitude=" + point.lat() + "&longitude=" + point.lng() + "&currentText=" + encodeURI(encodeURI(currentText)) + "&searchText=" + encodeURI(encodeURI($("#searchText").val()));
        }else{
            window.location.href = "shop-search.html?currentText=" + encodeURI(encodeURI(currentText)) + "&searchText=" + encodeURI(encodeURI($("#searchText").val()));
        }
    };
    
    
    $(document).ready(function() {
        obj.locate();
        touch.on('#map-nav .menu','tap',function(e){
            $(e.currentTarget).addClass('current').siblings().removeClass('current');
            currentText = $(e.currentTarget).find('span').text();
            $("#searchText").val("");
            obj.init();
        });
        
        $("#serch-btn").click(obj.serch);
        $(".icon").click(obj.icon);
        
        touch.on('#toHome','tap',function(){
            if(typeof(mymobile) != "undefined") {
                mymobile.openExternalLinks("http://www.sasa.com/");
            };
        });
    });
    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2&key=AIzaSyDKwuaDu2iHVXUxCXlpmXOwfG9imvbKyjw"></script>
    <!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDKwuaDu2iHVXUxCXlpmXOwfG9imvbKyjw&signed_in=false"></script> -->
    <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script>

  • 相关阅读:
    C#多线程参数传递
    Delphi单元测试工具Dunit介绍
    使用javascript生成文件
    Windows自动登录源码
    [Win32]一个调试器的实现
    用MASM写一个简单的实现递归操作的汇编程序,所谓递归,上课已经跟大家说清楚了,如果我们只考虑简单的只分一次的递
    C#多线程编程(4)多线程与UI操作
    在Delphi中实现类型安全的容器,Delphi泛型库DGL引介(提供源码下载) .
    delphi 中几种多线程操作方式
    C#实现WEB服务器
  • 原文地址:https://www.cnblogs.com/linying/p/5404579.html
Copyright © 2011-2022 走看看