wechat JS-SKD (getLoaction) 定位顯示百度map

時間 2019-12-01

標籤 wechat skd getloaction 定位顯示百度 map 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
        <title></title>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script type="text/javascript">
            //經過config接口注入權限驗證配置
            wx.config({
                debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                appId: '', // 必填，公衆號的惟一標識
                timestamp: '<?php echo time();?>', // 必填，生成簽名的時間戳
                nonceStr: '<?php echo $nonceStr;?>', // 必填，生成簽名的隨機串
                signature: '<?php echo $signature;?>',// 必填，簽名
                jsApiList: [] // 必填，須要使用的JS接口列表
            });
            //經過ready接口處理成功驗證
            wx.ready(function(){
                // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後
            
});
            document.querySelector('#getLocation').onclick = function() {
             wx.getLocation({
             type: 'wgs84',     
             success: function(res) {
             var latitude = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90
             var longitude = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。
             
             

             },
            cancel: function(res) {
            alert('用戶拒絕受權獲取地理位置');
            }
            });
            };
        </script>
    </head>
    <body>
        <input type="button" value="Getloaction" id="getLoaction"/>
        <input type=""

    </body>
</html>

注意：
* 1. 全部的JS接口只能在公衆號綁定的域名下調用，公衆號開發者須要先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。
* 2. 若是發如今 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.htmljavascript

引入百度地圖APIphp

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=你的key"></script>

  <script type="text/javascript">
       var go = function (a, b) {
           // 百度地圖API功能
           var map = new BMap.Map("allmap");
           map.centerAndZoom(new BMap.Point(113.58, 22.25), 12);
           map.enableScrollWheelZoom(true);

           var p1 = new BMap.Point(113.584793, 22.253452);
           var p2 = new BMap.Point(113.582202, 22.252536);
           var p3 = new BMap.Point(113.585175, 22.258135);
           var p4 = new BMap.Point(113.582305, 22.251052);
           var p5 = new BMap.Point(a, b);
           var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
           walking.search(p1, p5);
           // switch(type){

           // case 'driving':
           //     var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
           //     driving.search(p1, p4);
           //     break;

           // case 'transit':
           // var transit = new BMap.TransitRoute(map, {renderOptions:{map: map, autoViewport: true}});
           // transit.search(p3, p1);
           //     break;

           // case 'walking':
           //     var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
           //     walking.search(p1, p2);
           //     break;
           // case 'test':
           //     var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
           //     walking.search(p1, p5);
           //     break;
           // }
       }

</script>

最後在WeChat JSSDK html

document.querySelector('#getLocation').onclick = function() {
             wx.getLocation({
             type: 'wgs84',     
             success: function(res) {
             var latitude = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90
             var longitude = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。
             go(longitude,latitude);
             

             },
            cancel: function(res) {
            alert('用戶拒絕受權獲取地理位置');
            }
            });
            };

最後在微信上進制定的連接在頁面點擊getlocation按鈕就能夠看到你當前位置到你固定好的位置的步行距離了java

地圖顯示的樣式git

<div id="allmap" style="height: 469px; width: 569px; max-width: 100%; overflow:hidden;"></div>

2015-09-11 Stuartapi

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。