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,width: 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>

 

 

posted @ 2016-04-18 15:13  呱哇  阅读(699)  评论(0编辑  收藏  举报