2016-12-08 17:40:07 nideshijian 阅读数 10049
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27858 人正在学习 去看看 秦子恒

【微信开发】-HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地

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>


2019-07-15 11:36:16 qq_36470898 阅读数 639
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27858 人正在学习 去看看 秦子恒

微信小程序调用腾讯地图API进行驾车路线规划

申请key

微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如下:
首先要在腾讯地图开发平台先注册账号,申请key腾讯地图开发平台
在这里插入图片描述
申请完key对其进行设置
在这里插入图片描述

下载sdk

下载sdk并解压将其放入到你的微信小程序的目录中。jssdk v1.2

实现代码

.js文件

// 引入SDK核心类
var QQMapWX = require('../../assets/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '地图key' // 必填
});
Page({
  data: {
    ployline: [],//路线渲染
    latitude: 22.7340784793,//纬度
    longitude: 113.504708375,//经度
    //标记点
    markers: [{
      iconPath: "../images/123.png",
      id: 0,
      longitude: 113.504508375,
      latitude: 22.7344784793,
      width: 20,
      height: 20,
    }],

  },
  onLoad: function (options) {  
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
      //from参数不填默认当前地址
      from:'22.7344784793,113.504708375',
      to: '22.7342920943,108.594824432',
      success: function (res) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压(返回的点串坐标,通过前向差分进行压缩)
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: "#20B2AA", width: 4, dottedLine: false
          
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },
  //视野发生变化时触发
  regionchange(e) {
    console.log(e.type)
  },
  //单击标记点时触发
  markertap(e) {
    console.log(e.markerId)
  },
  //单击空间上时触发
  controltap(e) {
    console.log(e.controlId)
  }
})

请求腾讯地图API路线规划开发文档
.wxml


<map id='map' longitude="{{longitude}}" latitude="{{latitude}}"
 markers="{{markers}}" polyline="{{polyline}}" 
 bindregionchange="regionchange" show-location style='width:100%;height:70vh;'></map>

在这里插入图片描述

遇到的问题

在开发者工具可以显示,而在真机不能显示规划路线。原因是我们需要在微信公众平台上进行设置request合法域名,添加https://apis.map.qq.com

在这里插入图片描述
在这里插入图片描述

2017-12-25 20:10:10 sinat_41310868 阅读数 6968
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27858 人正在学习 去看看 秦子恒

两个资料,也是在网上海量查找之后选出的,实测可行,也很有用,感谢大神。
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下,才能在小程序上显示。
我没有正经八百学习过编程,所以经常能遇到一些稀奇古怪的问题,所谓,牺牲我一人,幸福千万家吧。
这个图标显示的问题,也折腾了一晚上,希望我能尽快把设想的小程序编出来。

2019-11-11 15:11:48 sun1647757891 阅读数 34
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27858 人正在学习 去看看 秦子恒

下面是调用腾讯地图sdk的官方文档:
https://lbs.qq.com/qqmap_wx_jssdk/index.html、

需要注意的是,按照官方文档配置完以后,还要在微信公众平台—开发—开发者工具中开通腾讯位置服务,与刚申请的腾讯地图密钥进行绑定,否则会报错:request:fail url not in domain list 。

2019-07-26 15:51:32 mythInternet 阅读数 294
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27858 人正在学习 去看看 秦子恒

引言:实现微信小程序调用外部地图APP,类似微信聊天,打开别人发送的位置,然后自动识别当前手机中已有的地图APP,效果如下图所示:

 

此功能,主要在js上做处理:  


微信小程序引用腾讯地图sdk,首先需要完成以下步骤:

1. 申请开发者密钥(key):https://lbs.qq.com/console/key.html

2. 开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存

     (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)

3. 下载微信小程序JavaScriptSDK,https://download.csdn.net/download/mythinternet/11435175

4. 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

 


下面是微信小程序.js代码:

//1.引入腾讯地图mapSdk
const QQMapWX = require('qqmap-wx-jssdk.min.js');

//2.定义全局qqmapsdk变量;
let qqmapsdk;

Page({
    /**
     * 页面的初始数据
     */
    data: {
      nearbyMap:null
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getLocation();  //位置授权; 必须要启用位置授权功能,否则无法实现下一步
    },
    /**
     *@method: 获取位置授权
     */
    getLocation() {
      wx.authorize({
        scope: 'scope.userLocation',
        success: res => {
          console.log(res)
        },
        fail: fres => {
          let arr = {
            title: "",
            cont: '检测到您没打开定位权限,是否去设置打开?'
        }
        showConfirm(arr, res => {
            if (res.confirm) {
              wx.openSetting({
                success: (res) => {}
              })
            } else {
              console.log('取消获取授权')
            }
        })
        }
      })
    },
    // 跳转至详情页面
  toNavDs(event){
    wx.showLoading({
      title: '加载中',
    })
    let lon = '经度',lat = '纬度';  //此处经纬度是你的目标位置,进入微信预览页面展示;
    const adds = '详细地址'; //此处是你目标位置的详细地址,微信预览页面展示;
    // 使用 JavaScript SDK 获取目的地经纬度
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'YDVBZ-***********'  //key值是腾讯地图开发者平台自动生成,需要自己去注册账户
    });
    qqmapsdk.geocoder({  // 腾讯地图sdk方法照着用
      address: adds,  //预览页详细地址展示
      success:res=> {
        if(res.status == 0){
          setTimeout(function () {
              wx.hideLoading()
           }, 500)

          let local = res.result.location;
          this.setData({
            latitude: lat,  //纬度
            longitude: lon  //经度
          })

        }
        
      }
    })
    // 使用微信内置地图查看位置
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success:res=> {
        wx.openLocation({
          longitude: JSON.parse(longitudeAndLatitude[0]),
          latitude: JSON.parse(longitudeAndLatitude[1]),
          scale: 13,
          name: '[位置]', //打开后显示的标题名称;
          address: adds //预览地图展示详细地址;
        })
      }
    })
  }
})

 

没有更多推荐了,返回首页