微信开发调用地图_php开发微信公众号网页调用微信地图功能 - CSDN
  • 不会的朋友可以看看《微信开发-初级接入微信公众平台MP》 2. 引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.0.0.js,然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口...


    1.第一步当然是已经正确接入了微信并且配置好了回调安全域名。不会的朋友可以看看《微信开发-初级接入微信公众平台MP》

    2.   引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.0.0.js,然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口:

    /**
    	 * 获取页面需要的配置信息的参数
    	 * 
    	 * @param request
    	 * @param url
    	 * @return
    	 */
    	@ResponseBody
    	@RequestMapping(value = "getJsTicket")
    	public Map<String, Object> getWeJsTicket(HttpServletRequest request, String url) {
    		Map<String, Object> map = new HashMap<String, Object>();
    		try {
    			// 获取微信signature
    			WxJsapiSignature sin = wxMpService.createJsapiSignature(url);
    			map.put("appId", configStorage.getAppId());
    			map.put("timestamp", sin.getTimestamp());
    			map.put("nonceStr", sin.getNonceStr());
    			map.put("signature", sin.getSignature());
    		} catch (Exception e) {
    			this.logger.error(e.getMessage());
    		}
    		return map;
    	}
    

    3.在引用了jweixin-1.0.0.js的页面里配置wx.config的验证(反正我把相关代码独立到单独的js文件里不行,不知为何),用ajax方式请求上面提供的url获得相关验证消息,然后再调用we.config方法去向微信服务器做验证:

    function configWx() {
    		var thisPageUrl = location.href.split('#')[0];
    		var json = {
    			url : thisPageUrl
    		};
    		var ajaxHelper = new AjaxHelper()
    		ajaxHelper.get("../weixin/getJsTicket", json, function(data) {
    			if (data != null) {
    				configWeiXin(data.appId, data.timestamp, data.nonceStr,
    						data.signature);
    			} else {
    				console.log("配置weixin jsapi失败");
    			}
    		}, function() {
    			console.log("配置请求错误");
    		});
    	}
    
    	function configWeiXin(appId, timestamp, nonceStr, signature) {
    		wx.config({
    			debug : true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    			appId : appId,
    			timestamp : timestamp,
    			nonceStr : nonceStr,
    			signature : signature,
    			jsApiList : [ 'chooseImage', 'uploadImage', 'downloadImage',
    					'previewImage', 'openLocation', 'getLocation',
    					'scanQRCode', 'checkJsApi', 'onMenuShareTimeline',
    					'onMenuShareAppMessage', 'onMenuShareQQ',
    					'onMenuShareWeibo', 'onMenuShareQZone' ]
    		});
    	}
    

    注意jsApiList里配的权限。其它权限可从https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E4.BD.BF.E7.94.A8.E5.BE.AE.E4.BF.A1.E5.86.85.E7.BD.AE.E5.9C.B0.E5.9B.BE.E6.9F.A5.E7.9C.8B.E4.BD.8D.E7.BD.AE.E6.8E.A5.E5.8F.A3  config接口注入权限验证配置完成。

    3.  测试号也可以使用地理位置功能,且微信是能使用alert(“”)弹出框的。

    WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

    GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系

    BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。

     

    2个js方法:

    使用微信内置地图查看位置接口

    wx.openLocation({
       latitude: 0, // 纬度,浮点数,范围为90 ~ -90
       longitude: 0, // 经度,浮点数,范围为180 ~ -180。
       name: '', // 位置名
       address: '', // 地址详情说明
       scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
       infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
    });

    获取地理位置接口:

    wx.getLocation({
       type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
       success: function (res) {
           var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
           var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
           var speed = res.speed; // 速度,以米/每秒计
           var accuracy = res.accuracy; // 位置精度
       }
    });


    一般我们如下使用:

    function getLocation() {
    		wx.getLocation({
    			type : 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
    			success : function(res) {
    				//使用微信内置地图查看位置接口
    				wx.openLocation({
    					latitude : res.latitude, // 纬度,浮点数,范围为90 ~ -90
    					longitude : res.longitude, // 经度,浮点数,范围为180 ~ -180。
    					name : '我的位置', // 位置名
    					address : '329创业者社区', // 地址详情说明
    					scale : 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
    					infoUrl : 'http://www.gongjuji.net' // 在查看位置界面底部显示的超链接,可点击跳转(测试好像不可用)
    				});
    			},
    			cancel : function(res) {
    				
    			}
    		});
    	}
    

    先通过getLocation方式获取 到当前的经纬度,然后再将经纬度传给openLocation.

    注意:jsApiList里若没配置openLocation和getLocation权限会报


    错误。

    getLocation方法用于获得当前的经纬度,openLocation用于打开微信内置地图显示详情。比如现在的地图如下:



    展开全文
  • HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地 我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面 可以省下先发送...

    HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地
    我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面
    可以省下先发送位置信息后,点确定再出导航,省一步,

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地</title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wDYEcxgRRheZwyC9jpN1Tt7fzr2zjosZ"></script>  
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery-->
    
      <style type="text/css">
            body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style> 
    
    </head>
    
    <body>  
       <div id="allmap"></div>
    </body>  
    </html>  
    <script type="text/javascript">  
    
        var map = new BMap.Map("allmap");  
        var point = new BMap.Point(116.709684,39.89778);
        map.centerAndZoom(point, 16);  
        map.enableScrollWheelZoom(); 
    
        var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{
            anchor: new BMap.Size(10,10)    
        });
    
        var marker=new BMap.Marker(point,{icon: myIcon});  
        map.addOverlay(marker);  
    
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                //map.panTo(r.point);//地图中心点移到当前位置
                var latCurrent = r.point.lat;
                var lngCurrent = r.point.lng;
                //alert('我的位置:'+ latCurrent + ',' + lngCurrent);
    
                location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving&region=北京&output=html";
    
            }
            else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
    
    
        map.addOverlay(marker);  
        var licontent="<b>健龙森羽毛球馆</b><br>";  
            licontent+="<span><strong>地址:</strong>北京市通州区滨河中路108号</span><br>";  
            licontent+="<span><strong>电话:</strong>(010)81556565 / 6969</span><br>";          
        var opts = { 
            width : 200,
            height: 80,
        };         
        var  infoWindow = new BMap.InfoWindow(licontent, opts);  
        marker.openInfoWindow(infoWindow);  
        marker.addEventListener('click',function(){
            marker.openInfoWindow(infoWindow);
        });  
    
    </script>
    展开全文
  • 1.「微信小程序」实现获取当前位置并在地图上显示 http://blog.csdn.net/crazy1235/article/details/55004841 2.微信小程序之地图功能 http://blog.csdn.net/crazy1235/article/details/55004841 前端开发,Java

    两个资料,也是在网上海量查找之后选出的,实测可行,也很有用,感谢大神。
    1.「微信小程序」实现获取当前位置并在地图上显示
    http://blog.csdn.net/tycsbs/article/details/52690007?_t_t_t=0.7465108021865636
    2.微信小程序之地图功能
    http://blog.csdn.net/crazy1235/article/details/55004841
    前端开发,JavaScript和css学一学入门后,再看一看微信官方的教程,能把小程序构建出来之后,照着上面的两个教程,就可以做出简单的小程序地图应用了。
    https://mp.weixin.qq.com/debug/wxadoc/dev/
    小程序官方文档中关于地图的内容https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html
    https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-map.html#wxcreatemapcontextmapid
    获取位置速度的内容。
    https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxopenlocationobject
    资料列举完了说点别的。
    在实践中遇到了两个参考资料中没有提到的问题。
    其一,地图全屏显示。

    style="width: 100%; height: 100vh;"

    微信小程序中,手机屏幕宽度是100vm,高度是100vh,一半的话,就是50vm,50vh呗,测试的时候,width识别100%,但height不识别100%,换成100vh就好了。

    这是一个问题,还有一个问题就是定位点marker的图片不显示,这不单单是地图组件调用的问题,有时候编写其他要插入图片的小程序也会遇到这个问题。
    这个问题的解决办法就是,把图片文件夹放在同级目录下。
    这里写图片描述
    在图上标红线的三处能看出,图标1.png文件在images下面,启动页面index在pages的index下面,iconPath的路径是/images/1.png。images和pages是同级目录,这样的话,图标就显示在了地图上。
    我们再看一下一个别的,把iconPath的路径替换成pages下的img中的1.png。
    这里写图片描述
    图片一对比,问题一目了然。
    要把图标文件放在pages的同级目录images下,才能在小程序上显示。
    我没有正经八百学习过编程,所以经常能遇到一些稀奇古怪的问题,所谓,牺牲我一人,幸福千万家吧。
    这个图标显示的问题,也折腾了一晚上,希望我能尽快把设想的小程序编出来。

    展开全文
  • 微信调用地图

    2020-05-25 08:57:30
    其中lat和lon是经纬度得表示 chooseCommunity是方法 catchtap=“goto_map" 是方法 data-val=”{{item}} 是自定义传参

    其中lat和lon是经纬度得表示
    在这里插入图片描述
    chooseCommunity是方法
    catchtap=“goto_map" 是方法 data-val=”{{item}} 是自定义传参
    在这里插入图片描述

    展开全文
  • 之前在微信企业号开发:微信考勤中使用了百度地图的定位组件,但发现在部分手机上会出现定位失败的提示,于是有研究了一下百度地图。原来使用的Web组件百度不打算更新了,也是重新查了一下百度地图的其他API,还有一...
  • 一,调用支付接口 1.必须引入权限的js    2.js部分的初始化配置  paymentAuthorization();//页面支付权限授权  // 点击支付  $("#Save_Patient_Msg").click(function(){  $("#Save_Patient_Msg").hide(); $...
  • wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: _appid, // 必填,...
  • 项目中要求使用微信内置地图,在这里记录一下! 前端要做的很简单,一是调用后端接口配置appId和签名等等,二是调用微信内置位置接口,两步搞定。 1.后端接口配置appId和签名等 this.axios.get('/api_index/getSign'...
  • 1.首先第一步查看一下自己的微信公众平台有没有获取js-sdk地图的开发者权限 2.引用jar包: &lt;script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"&...
  • 微信开发中遇到了安卓正常显示内置地图,但是ios苹果系统不显示,经过排查是因为ios系统调用网页时的经度和纬度必须使用Number类型的,但是安卓的可以. wx.config({ debug: false, // 开启调试模式,调用的所有api的...
  • # 内置腾讯地图可以标记多个自己定义的位置吗?请求各位大神帮忙,如有做过此类功能麻烦解答
  • 页面代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath...String basePath = request.getScheme()+"://...
  • 本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与在线...
  • 在最近开发微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图。 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key。 2,然后找到项目...
  • 关键代码: wx.openLocation(function(){ longitude: longitude, latitude: latitude, name: name, address: address }); 下面是具体步骤: 第一点,先去腾讯API申请所需密匙;...script char...
  • 在使用百度地图进行微信考勤时,遇到很多问题,尤其是定位问题,我知道定位有偏差,但使用百度地图,几十次后,偶尔一次会错的离谱,例如直接就定位到了外省,例如我一直在西安,一次定位到了天津,一次定位到了...
  • 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如下: 首先要在腾讯地图开发平台先注册账号,申请key腾讯地图开发平台 申请完key对其进行设置 下载sdk 下载sdk并解压将其...
  • 经过开发测试发现,百度地图定位api兼容ios,在安卓手机上会导致浏览器定位失败从而调用ip定位,即定位所在城市(市级) 腾讯地图定位api对微信版本有要求,如图: 如图所示在微信7.0以后需要https协议,经测试发现...
1 2 3 4 5 ... 20
收藏数 8,636
精华内容 3,454
关键字:

微信开发调用地图