- 浏览: 5777077 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
首先导入google map JS(需要VPN):
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=places"></script>
然后定义一个地图显示区域:
<div id="content_map"></div>
最后添加JS:
使用cordova获取你当前的位置,成功的话执行onGeoSuccess,在该函数中查询门店位置信息:
获取到所有经纬度信息之后再初始化map,并在map上添加marker:
第一次地图显示的时候最好resize一下,使你的位置位于屏幕中心,refreshMap用于控制是否resizeMap,这样每次返回map_page的时候不至于总是resizeMap:
工具,计算2点间距离,返回的是mile英里数
最后显示的效果如下:
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=places"></script>
然后定义一个地图显示区域:
<div id="content_map"></div>
最后添加JS:
/////////////////////////////////////////////////////////////////////////////// //map start //var geocoder; var MY_POSITION="You are here"; var map; var markersArray = []; var latlng=null; function initializeMap(position) { $("#content_map").width($(window).width()).height($(window).height()-40); // geocoder = new google.maps.Geocoder(); if (typeof google === 'undefined') { log("================google is undefined================"); return ; } if(position==null){ latlng = new google.maps.LatLng(38.54,77.02);//华盛顿经纬度 }else{ latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); } var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("content_map"), myOptions); } function resizeMap(){ if (!isNull(map)) { google.maps.event.trigger(map, 'resize'); map.setCenter(latlng); } } function addMarker(location, item) { if (item === MY_POSITION) { var marker = new google.maps.Marker({ position : location, title : MY_POSITION, map : map }); markersArray.push(marker); var contentString = '<div style="color:black;text-align:center;">' +MY_POSITION+'</div>'; var win = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function() { win.open(map, marker); }); } else { var marker = new google.maps.Marker({ position : location, title : item.storeName, // icon:"img/icon.png", map : map }); markersArray.push(marker); var contentString = '<div style="color:black;text-align:center;">' +item.storeName+'<br />' +item.storeAddress+'</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function() { // map.setZoom(15); // map.setCenter(marker.getPosition()); infowindow.open(map, marker); }); google.maps.event.addListener(marker, 'dblclick', function() { onStoreClick(item); }); } } // Removes the overlays from the map, but keeps them in the array function clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } } } // Shows any overlays currently in the array function showOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(map); } } } // Deletes all markers in the array by removing references to them function deleteOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } markersArray.length = 0; } } /* function codeAddress() { var address = document.getElementById("address").value; if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); showAlert(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { showAlert("Geocode was not successful for the following reason: " + status); } }); } } */ //onSuccess Geolocation function onGeoSuccess(position) { curPosition=position; doCommandFindStoreList(appConfig,user); } // onError Callback receives a PositionError object function onGeoError(error) { onGeoSuccess(null); } var curPosition=null;// function doCommandFindStoreList(appConfig,user){ var senddata = {}; senddata.sid = user.sid; senddata.companyId = appConfig.companyId; senddata.brandId = appConfig.brandId; if(curPosition!=null){ senddata.latitude=curPosition.coords.latitude; senddata.longitude=curPosition.coords.longitude; } var require=$("#homepage #search").val().trim(); if(require.length>0){ senddata.require = require; } ajax(COMMAND_FIND_STORE_LIST,STORE_LIST_URL,senddata); }; //map end ///////////////////////////////////////////////////////////////////////////////
使用cordova获取你当前的位置,成功的话执行onGeoSuccess,在该函数中查询门店位置信息:
if(navigator.geolocation){ var options = { enableHighAccuracy: true, maximumAge: 30000, timeout: 8000 }; navigator.geolocation.getCurrentPosition(onGeoSuccess , onGeoError , options); }else{//Geolocation is not supported by this browser. onGeoSuccess(null); }
获取到所有经纬度信息之后再初始化map,并在map上添加marker:
case COMMAND_FIND_STORE_LIST: initializeMap(curPosition); $("#homepage #content_store_list").empty(); $.each(data.listStroe,function(i,item){ item.opening=isStoreOpen(item); var openStatus="<span style='font-size:12px;color:red;font-weight:normal;margin-left:10px;'>[OPEN]</span>"; if(item.opening!=0){ openStatus="<span style='font-size:12px;color:#666;font-weight:normal;margin-left:10px;'>"+getStoreOpenRemainingTime(item)+"</span>"; } var distance=""; if(curPosition!=null){ if(item.latitude==null||item.longitude==null){ }else{ distance=GetDistance(item.latitude,item.longitude,curPosition.coords.latitude,curPosition.coords.longitude);// } } var display="inline"; if(isNull(item.customerId)||item.customerId==0){ display="none"; }else{ display="inline"; } var itemStr=JSON.stringify(item); $("#homepage #content_store_list").append("<li class='li_item' onclick='onStoreClick("+itemStr+");'><div style='font-size:16px;font-weight:bold;margin-bottom:5px;'><span>"+item.storeName+"</span>"+openStatus+"<span style='float:right'><img style='display:"+display+"' src='img/my_favorite.png'/></span></div><div><span style='font-size:14px;'>"+item.storeAddress+"</span><div><span style='font-size:14px;'>"+item.city+","+item.provinceShrtNm+" "+item.zip+"</span><span style='font-size:14px;float:right;'>"+distance+"</span></div></div></li>"); if(!isNull(map)){ if(curPosition!=null){ addMarker(map.getCenter(),MY_POSITION); } if(item.latitude!=null){ var location = new google.maps.LatLng(item.latitude,item.longitude); addMarker(location,item); } } }); break;
第一次地图显示的时候最好resize一下,使你的位置位于屏幕中心,refreshMap用于控制是否resizeMap,这样每次返回map_page的时候不至于总是resizeMap:
var refreshMap=true; $(document).delegate('#map_page', 'pageshow', function () { curPage="map_page"; if(refreshMap){ refreshMap=false; resizeMap(); } });
工具,计算2点间距离,返回的是mile英里数
function GetDistance(lat1,lng1,lat2,lng2){ var radLat1 = Rad(lat1); var radLat2 = Rad(lat2); var a = radLat1 - radLat2; var b = Rad(lng1) - Rad(lng2); var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); s = s *6378.137 ;// EARTH_RADIUS; s = 0.62*Math.round(s * 10000) / 10000; s=s.toFixed(0); return s+"mi"; }
最后显示的效果如下:
发表评论
-
JQ插件:radiosToSlider
2014-09-11 17:43 1327demo: http://rubentd.com/radios ... -
Javascript常用正则表达式集合
2014-09-06 22:08 14491.匹配正整数:/^[0-9]*[1-9][0-9]*$/ 2 ... -
关于CSS细节集合
2014-09-05 12:23 1363以后可能会用到,记一下 原址:http://www.iteye ... -
cordova插件InAppBrowser在iPhone上显示url和Done、Back/Forward键的问题
2014-09-02 14:11 11989I am currently building a News ... -
CSS实现简单动态渐变闪烁效果
2014-08-28 15:57 4039CSS练习用例: .event { border ... -
JQ插件:nicescroll自定义滚动条
2014-08-27 15:53 2058参考: http://www.areaaperta.com/n ... -
jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码
2014-08-27 14:55 1656<!DOCTYPE html PUBLIC &quo ... -
JQ插件:qrcode生成二维码
2014-08-27 14:51 7504jquery.qrcode.js 是把它用jquery方式封装 ... -
JQ插件:日期时间选择器date picker
2014-08-27 13:59 2383这个控件关键是它能支持在mobile中显示。iPhone和an ... -
JQ插件:Knob旋钮按钮
2014-08-27 10:33 2478在线演示 用法介绍: 分享一款超棒的jQuery旋钮插件 ... -
JQM:如何点击footer中的navbar只切换content的内容
2014-08-22 10:53 5160在JQM运用中想固定Header与Footer,当然Foote ... -
各种JS jQuery CSS资源等
2014-08-15 23:53 13142014年最酷的30个JavaScript库 http://w ... -
CSS将图片和文字垂直居中
2014-08-15 16:56 1197这个问题说起来有点惭 ... -
jQuery 中使用 JSON
2014-08-15 11:29 3218在 jQuery 中已经提供了对于解析 JSON 的内在支持, ... -
JQM Toggle switch、selectmenu动态设置默认选中值时没有效果的问题
2014-08-14 13:21 2118静态时,ok,没问题,如下: <label for=&q ... -
cordova读写文件(2)
2014-08-13 17:53 3098上一篇讲的是如何将数据写入文件 这篇讲如何读取文件。 v ... -
cordova读写文件(1)
2014-08-13 17:44 23517使用cordova可以很方便的在手机sdcard中读写文件。 ... -
JQM自动提示插件autoComplete.js
2014-08-11 17:33 1327JQM自动提示插件: https://github.com/c ... -
Jquery mobile 新手问题总汇
2014-08-05 14:43 1479http://www.wglong.com/main/arti ... -
JQM控件之Navbar和Tabs
2014-08-01 15:49 6337在JQM中使用导航栏Navbar是简单的。 只需要将data ...
相关推荐
高德地图自定义infowindow,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
百度地图上展示多个marker的同时,能展示多个infowindow,避免只有最后一个infowindow能展示的问题。 博客地址:http://blog.csdn.net/qq_19666821/article/details/70195267
可以在地图上显示多个InfoWindow框架 这个框架可以在地图上的marker上显示多个infoWindow(高德默认只能同时显示一个infoWindow) 效果图如下: 使用 !!!!! 请在使用前 将高德地图的sdk加到工程中 allprojects { ...
百度地图V3.6.0系列——覆盖物和InfoWindow的使用
自定义的infowindow,想弹几个弹几个,不受约束,源码支持修改
百度InfoWindow实现的demo有详细注释,看不懂代码可以下载这个demo自己调试
GoogleMap-InfoWindow-android
百度地图的infoBox。类似于infoWindow,比infoWindow更有灵活性,比如可以定制border,关闭按钮样式等。 基于Baidu Map API 1.2 +。
上网搜了好多方法也没用, 后来想想还是查了一下官方的API,发现了google.maps.InfoWindow下面的Events里面有个domready事件 官方解释: This event is fired when the containing the InfoWindow’s content is ...
自定义arcgis api for javascript窗口的样式
示范使用SuperMap iClient 6R for Flex开发模式,通过设置InfoWindow 类的各种Styles属性,自定义信息窗InfoWindow样式。
百度map,百度map API,百度地图 实现百度地图动态搜索、静态地图动态插入 mygw@163.com js 内容如下: /** 加载地图的主控类 */ var MapControl={ staticWith : 512,//链接静态图宽度 staticHeight : 320,/...
arcgis javascript中自定义infowindow实现,包含infowindow.js和infowindow.css和一个测试用的html页面,通过继承InfoWindowBase来实现
该项目,包含GMap3自动加载,Marker的自动创建和添加,添加GMap3的infowindow风格扩展包。希望对大家有用
基于百度地图SDK ,实现仿滴滴打车对地图的操作,即...包括两部分功能:(1)传入地址比如北京市海淀区五道口地铁站,会在地图上地位,(2)监测到地图移动完成之后,显示Marker当前所指位置的市,区,街道,街道号。
是用的是高德地图 包含定位,覆盖物,和根据缩放级别改变覆盖物的大小,和pop的弹窗显示内容
百度地图api操作实例,包括初始化地图,infowindow,地图标注等;需要使用vs2017
谷歌地图 js+html5 +css 代码 自定义 infowindow marker 效果图 http://blog.csdn.net/mkrcpp/article/details/44222117
代码为博客实例代码:http://blog.csdn.net/lmj623565791/article/details/37737213 有问题请博客中留言