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() + "¤tText=" + 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>