相关代码 wx.openLocation({ latitude: !!that.addressPoint.latitude ? Number(that.addressPoint.latitude) : 34.194024, longitude: !!that.addressPoint.longitude ? Number(that.addressPoint.longitude) : 108.937925, name: !!that.addressPoint.name ? that.addressPoint.name : "声动语商学苑", address: !!that.addressPoint.address ? that.addressPoint.address : "西安市" }); **注意：wx的openLocation方法绑定的经纬度坐标值必须为number类型，string类型不会跳转到地图界面，虽然也不会报错，最终效果为：
原文首发于微信公众号：jzman-blog，欢迎关注交流！最近的项目涉及到百度地图的使用，项目组通知使用天地图替代百度地图，一个原因是天地图是国家测绘地理信息局建设的，企业可以使用其公众版本进行开发以提供相关的地图信息服务，较其他地图具有权威性，当然天地图提供的服务是否较其他地图更具有权威性和实时性，这个作为普通开发者是不能确定的，另一个原因是减少运用成本，我觉得是否真能达到这样的目标真不一定，毕竟商业地图输出能力还是较免费版本更强。还是先来开始天地图 Android SDK 的学习之路吧，先从一下几个方面来学习： 引入天地图 SDK地图显示我的位置定位图标的修改获取位置信息显示效果引入天地图 SDK首先下载天地图地图 SDK，然后添加相应的 Jar 包和 so 文件到 libs 文件夹中，在 module 的 build.gradle 文件中指定 so 文件的目录为 libs 目录，具体如下： sourceSets { main { //指定so文件的查找目录是libs目录 jniLibs.srcDir 'libs' }}按照官网指定的权限配置，使用过程中发现少了权限，下面是完整权限列表，具体如下： <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.CALL_PHONE" /><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name="android.permission.READ_PHONE_STATE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />如果项目 targetSdkVersion 是 23 以上记得动态申请相关危险权限，此时，天地图地图 SDK 就引入到项目中了。 地图显示首先在布局中引入 MapView，布局代码如下： <com.tianditu.android.maps.MapView android:id="@+id/mapView" android:layout_width="match_parent" android:layout_height="match_parent"/>此时，地图就可以正常显示了，不需要额外的配置，当然可以初始化地图相关的一些参数，常用配置如下： private void initMapView() { //启用内置的缩放组件 mapView.setBuiltInZoomControls(true); //得到MapView的控制权,可以用它控制和驱动平移和缩放 mMapController = mapView.getController(); //用给定的经纬度构造一个GeoPoint，单位是微度 (度 * 1E6) GeoPoint point = new GeoPoint((int) (39.915 * 1E6), (int) (116.404 * 1E6)); //设置地图中心点 mMapController.setCenter(point); //设置地图缩放级别 mMapController.setZoom(12);}天地图 Android SDK 的引入及地图显示相对百度地图、高德地图还是比较方便的。 ...
最近一段时间不是那么忙，就抽空整理了下之前的项目，因为之前有开发过H5聊天项目，只是觉得好些功能都没有特别的完善，所以就把之前项目重新开发了下，如是就有了这个html5版实时聊天语音项目weChatIM系统。依旧使用的是h5+css3+jquery+wcPop+swiper+weScroll等技术架构开发，新增了上拉刷新加载数据，右键长按菜单弹窗、仿微信语音效果(按住说话，上滑取消发送)及地图定位功能。// >>> 【按住说话核心模块】——————————————// …按住说话var _voiceObj = $(".J__wdtVoice"), eY1 = 0, eY2 = 0, eY3 = 0, isDrag = true;var voiceIdx;var difftime = 0;function initVoice(){ _voiceObj.on(“touchstart”, function(e){ difftime = new Date(); if(!isDrag) return; isDrag = false; eY1 = e.originalEvent.targetTouches[0].pageY; _voiceObj.text(“松开 结束”); // 弹窗提示 voiceIdx = wcPop({ id: ‘wdtVoice’, skin: ’toast’, content: ‘<div style=“margin-top:-10px;"><i class=“iconfont icon-yuyin” style=“font-size:65px;"></i><div style=“line-height:32px;">手指上滑，取消发送</div></div>’, style: ‘border-radius:6px;height: 160px; width:160px;’, time: 10, opacity: 0, }); _voiceObj.on(“touchmove”, function (e) { e.preventDefault(); eY3 = e.originalEvent.targetTouches[0].pageY; if(eY1 - eY3 < 150){ _voiceObj.text(“松开 结束”); }else{ _voiceObj.text(“松开手指，取消发送”); // 弹窗提示 $("#wdtVoice .popui__panel-cnt”).html(’<div style=“margin-top:-10px;"><i class=“iconfont icon-quxiao” style=“font-size:65px;"></i><div style=“background:#c53838; border-radius:3px; line-height:32px;">松开手指，取消发送</div></div>’); } }); }); _voiceObj.on(“touchend”, function (e) { e.preventDefault(); eY2 = e.originalEvent.changedTouches[0].pageY; _voiceObj.text(“按住 说话”); // 录音时间太短提示 if(new Date() - difftime < 1000){ // 弹窗提示 $("#wdtVoice .popui__panel-cnt”).html(’<div style=“margin-top:-10px;"><i class=“iconfont icon-gantan” style=“font-size:65px;"></i><div style=“line-height:32px;">录音时间太短！</div></div>’); } else{ if (eY1 - eY2 < 150) { // 发送成功 submitData(); console.log(“测试数据”); } else { // 取消发送 console.log(“cancel”); } } // 关闭弹窗 setTimeout(function(){ wcPop.close(voiceIdx); }, 500); isDrag = true; });}// >>> 【摇一摇加好友核心模块】——————————————// 摇一摇加好友弹窗$("#J__popScreen_shake”).on(“click”, function () { var shakePopIdx = wcPop({ id: ‘wcim_shake_fullscreen’, skin: ‘fullscreen’, title: ‘摇一摇’, content: $("#J__popupTmpl-shakeFriends”).html(), position: ‘right’, xclose: true, style: ‘background: #303030;’, show: function(){ // 摇一摇功能 var _shake = new Shake({threshold: 15}); _shake.start(); window.addEventListener(“shake”, function(){ window.navigator.vibrate && navigator.vibrate(500); // console.log(“触发摇一摇！”); $(".J__shakeInfoBox”).html(””); $(".J__shakeLoading”).fadeIn(300); // 消息模板 var shakeTpl = [ ‘<div class=“shake-info flexbox flex-alignc”>\ <img class=“uimg” src=“img/uimg/u__chat-img08.jpg” />\ <div class=“flex1”>\ <h2 class=“name”>大幂幂<i class=“iconfont icon-nv c-f37e7d”></i></h2>\ <label class=“lbl clamp1”>开森每一刻，每天都要美美哒！</label>\ </div>\ </div>’ ].join(”"); setTimeout(function(){ $(".J__shakeLoading").fadeOut(300); $(".J__shakeInfoBox").html(shakeTpl); }, 1500); }, false); } });});// 切换摇一摇项目$(“body”).on(“click”, “.J__swtShakeItem a”, function(){ $(this).addClass(“active”).siblings().removeClass(“active”);});// 摇一摇设置$(“body”).on(“click”, “.J__shakeSetting”, function(){ wcPop({ skin: ‘actionsheetMini’, anim: ‘footer’, btns: [ { text: ‘<div class=“flexbox flex-alignc”><span class=“flex1”>是否开启震动</span> <span class=“rpr-30”><input class=“cp__checkboxPX-switch” type=“checkbox” checked /></span></div>’ }, { text: ‘摇到的历史’ }, ] });});欢迎大家一起交流、学习 Q：282310962 wx：xy190310 ...