E企盈营销工具技术服务商 热线:4006-838-530

微信jssdk文档,web实现小程序chooseLocationapi使用腾讯地图,使用微信jssdk

E企盈直播平台营销卖货系统

2019独角兽企业重金招聘Python工程师标准首先项目为单页面vue项目在index中引入需要的qqmap.js(这里会有一个小问题,没有注册的js,在打包时,不会打包,所以请去index.ejs去注册)下面是代码templatedivdivwx-button:size=”‘mini'”@click=”chooseFail”取消/wx-buttonspanstyle=”line-height:2.3;color:black;font-weight:900;”位置/spanwx-button:type=”‘primary'”:size=”‘mini'”@click=”chooseOK”确定/wx-button/divdivwx-input:placeholder=”‘搜索'”style=”width:90%;margin-left:5%;height:0.3rem;border-radius:3px;”@change=”searchAddress”/wx-input/divdivid=”container1″:style=”‘height:’+height+’px;'”/divdivdivv-for=”(item,index)inlist”@click=”chooseAddress(index,item.latLng.lat,item.latLng.lng)”divstyle=”display:flex;flex-direction:column;width:80%”spanstyle=”font-size:16px;font-weight:600;”{{item.name}}/spanspanstyle=”font-size:12px;”{{item.address}}/span/divdivstyle=”text-align:right”imgv-show=”item.ischeck”src=”https://res.o2o.cn/img/0611a8fb49de4d0db9321541347dc5a4.png”/div/div/div/div/templatestylescoped#container1{width:3.75rem;height:3rem;}.main{display:flex;flex-direction:column;height:100%;width:100%;}.topBar{display:flex;justify-content:space-between;padding:0.1rem;}.searchBar{width:100%;display:flex;padding:0.1rem;}.addressList{width:100%;height:3rem;background-color:white;overflow:scroll;}.item{display:flex;flex-direction:row;padding-left:5%;color:black;width:100%;height:0.4rem;border-bottom:1pxsolid#f3f3f4;margin-top:5px;justify-content:space-between;}.address{width:80%;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;display:block;}input::-ms-input-placeholder{text-align:center;}input::-webkit-input-placeholder{text-align:center;}/stylescriptimportaxiosfrom”axios”;constqq=window.qq;varmap,geocoder,searchService,event,ismove=null;varclat,clng=null;constAPI_PROXY=”https://livefamily.o2o.com.cn/ApiNone/CrossDomainRequest/?url=”;//”https://bird.ioliu.cn/v1/?url=”;exportdefault{data(){return{height:0,list:[],lastChoose:-1};},mounted(){console.info(“地图选址”);varlat,lng=null;varthat=this;varheight=window.innerHeight;varwidth=window.innerWidth;vartopHeight=document.getElementsByClassName(“topBar”)[0].clientHeight;varsearchHeight=document.getElementsByClassName(“searchBar”)[0].clientHeight;varaddressHeight=document.getElementsByClassName(“addressList”)[0].clientHeight;this.height=height-topHeight-searchHeight-addressHeight;varmapHeight=height-topHeight-searchHeight-addressHeight;setTimeout(function(){wx.getLocation({success:function(res){lat=res.latitude;lng=res.longitude;console.info(“回调坐标”+lat+lng);map=newqq.maps.Map(document.getElementById(“container1”),{center:newqq.maps.LatLng(lat,lng),//地图的中心地理坐标。31.4708600000120.2705000000zoom:15//地图的中心地理坐标。});varmiddleControl=document.createElement(“div”);middleControl.style.left=width/2-21+”px”;middleControl.style.top=mapHeight/2-37+”px”;middleControl.style.position=”relative”;middleControl.style.width=”36px”;middleControl.style.height=”36px”;middleControl.style.zIndex=”100000″;middleControl.innerHTML=’imgstyle=”width:36px;height:36px;”src=”https://res.o2o.cn/img/94780ecf18784a44b85e9cad5d2061f1.png”/’;document.getElementById(“container1”).appendChild(middleControl);//返回地图当前中心点地理坐标console.info(“latlng:”+map.getCenter());//当地图中心属性更改时触发事件event=qq.maps.event.addListener(map,”center_changed”,function(){that.exchangeAddress(map.getCenter().lat,map.getCenter().lng);});setTimeout(function(){varmarker=newqq.maps.Marker({position:newqq.maps.LatLng(lat,lng),animation:qq.maps.MarkerAnimation.DROP,map:map});geocoder=newqq.maps.Geocoder({complete:function(result){clat=result.detail.location.lat;clng=result.detail.location.lng;qq.maps.event.removeListener(event);if(ismove){map.setCenter(result.detail.location);ismove=null;}setTimeout(function(){event=qq.maps.event.addListener(map,”center_changed”,function(){that.exchangeAddress(map.getCenter().lat,map.getCenter().lng);});},1000);}});//调用Poi检索类searchService=newqq.maps.SearchService({complete:function(results){varpois=results.detail.pois;for(leti=0;ipois.length;i++){pois[i][“ischeck”]=false;}that.list=pois;}});//自定义控件functionCustomZoomControl(controlDiv,map){functionupdate(){map.panTo(newqq.maps.LatLng(lat,lng));}update();//添加dom监听事件qq.maps.event.addListener(controlDiv,”click”,update);}varcustomZoomDiv=document.createElement(“div”);customZoomDiv.style.position=”relative”;customZoomDiv.style.width=”36px”;customZoomDiv.style.height=”36px”;customZoomDiv.style.zIndex=”100000″;customZoomDiv.style.backgroundColor=”#FFFFFF”;customZoomDiv.style.borderRadius=”50%”;customZoomDiv.style.paddingTop=”2px”;customZoomDiv.style.textAlign=”center”;customZoomDiv.innerHTML=’imgstyle=”width:32px;height:32px;”src=”https://res.o2o.cn/img/4a304d2170174a909fede4a3880931f8.png”/’;//获取控件接口设置控件varcustomZoomControl=newCustomZoomControl(customZoomDiv,map);//将控件添加到controls栈map.controls[qq.maps.ControlPosition.RIGHT_BOTTOM].push(customZoomDiv);//————-that.exchangeAddress(lat,lng);},1000);}});},1000);},methods:{searchAddress(e,needmove){if(!needmove){ismove=true;}geocoder.getLocation(e.detail.value);varregion=newqq.maps.LatLng(clat,clng);searchService.searchNearBy(e.detail.value,region,2000);},chooseAddress(index,lat,lng){varthat=this;if(that.lastChoose!=-1){that.list[that.lastChoose].ischeck=false;}that.lastChoose=index;that.$nextTick(function(){that.list[index].ischeck=true;qq.maps.event.removeListener(event);map.panTo(newqq.maps.LatLng(lat,lng));event=qq.maps.event.addListener(map,”center_changed”,function(){that.exchangeAddress(map.getCenter().lat,map.getCenter().lng);});});},chooseOK(){varthat=this;bus.emit(“chooseLatLng”,{lat:that.list[this.lastChoose].latLng.lat,lng:that.list[this.lastChoose].latLng.lng});that.chooseFail();},chooseFail(){wx.navigateBack();},exchangeAddress(lat,lng){varthat=this;that.lastChoose=-1;axios({method:”GET”,url:API_PROXY+encodeURIComponent(“https://apis.map.qq.com/ws/geocoder/v1/?location=”+that.reservedDecimal(lat,4)+”,”+that.reservedDecimal(lng,4)+”&key=IYOBZ-YVZ3F-VBRJX-JKD3E-3ZB65-QQF7A&get_poi=1″),headers:{“Content-Type”:”application/x-www-form-urlencoded”},responseType:”json”//’arraybuffer’,’blob’,’document’,’json’,’text’,’stream’json是默认的}).then(function(res){that.searchAddress({detail:{value:res.data.result.formatted_addresses.recommend}},false);}).catch(function(res){console.error(“error”);});},reservedDecimal:function(val,digit){returnNumber(val).toFixed(digit);}}//beforeRouteEnter(to,from,next){////…所有进入此页面的父页面都需要缓存//from.meta.keepalive=true;//next();//}};/script具体效果如下转载于:https://my.oschina.net/maxdeath/blog/3002549

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信jssdk文档,web实现小程序chooseLocationapi使用腾讯地图,使用微信jssdk
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏