java微信開發之地圖定位_ZenDei技術網路在線

頁面代碼: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePat ...
頁面代碼:
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>填寫基本信息</title>
    <link href="<%=basePath %>js/common.css" rel="stylesheet" />
    <script src="<%=basePath %>js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <link href="<%=basePath %>js/master.css" rel="stylesheet" />
</head>
<body style="background: #f5f5f5;">
    <section>
        <div class="content-detail">
            <div class="detail mt20">
                <div class="detail-div"><span class="name">物品名稱</span><span class="shuru"><input type="text" id="wpmc"></span></div>
                <div class="wxapi_container">
                    <div class="lbox_close wxapi_form">
                        
                        <!-- <div style="clear:both"></div>
                       
                        <!-- <div style="clear:both"></div> -->
                        <span class="desc">拍照或從手機相冊中選擇圖片</span>
                         <button class="btn btn_primary" id="chooseImage">選擇圖片</button> 
                        <!-- <h3 id="menu-image">已選擇圖片</h3> -->
                        <div id="imgs"></div>
                        <button class="btn btn_primary" id="uploadImage">上傳圖片</button>
                        <h3 id="upload-image">已上傳圖片</h3>
                        <div id="uploadImgs"></div>
                
                       <!--  <button class="btn btn_primary" id="postData">提交</button> -->
                
                    </div>
                </div>
                <div class="detail-div detail-div-ha"><span class="name">物品描述</span><span class="shuru"><textarea id="wpms" rows="6" cols=""></textarea></span></div>
                <div class="detail-div"><span class="name">經度</span><span class="shuru"><input id="jingdu" type="text"></span></div>
                <div class="detail-div"><span class="name">緯度</span><span class="shuru"><input id="weidu" type="text"></span></div>
                <div class="detail-div"><span class="name">地址</span><span class="shuru"><input id="dizhi" type="text"></span></div>
                <div class="detail-div"><span class="name">海拔</span><span class="shuru"><input id="haiba" type="text"></span></div>
            </div>
            <div class="detail-btn">
                <a class="save" id="postData" href="javascript:;">保存</a>
                <a id="getlocation" href="javascript:;">地圖</a>
            </div>
        </div>
    </section>
     <div id="map" style="height:200px;left:"class="content-detail"></div>  
     <div id="map1" style="height:200px;left:"class="content-detail"></div>  
     
     
</body>

<script charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyDcGSUQz920n7V2LaPVs-tH9qMhkaHkTyo&language=zh-CN"></script>


    <script type="text/javascript">  
    
    var images = {
            index:1,   //用於產生全局圖片id，綁定已選擇圖片和已上傳圖片
            selectIds: {},  //保存已經選擇的圖片id
            uploadIds:{}  //保存已經上傳到微信伺服器的圖片
        };
    
    
    wx.config({
        debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。
        appId: '${appid}', // 必填，企業號的唯一標識，此處填寫企業號corpid
        timestamp: '${timestamp}', // 必填，生成簽名的時間戳
        nonceStr: '${nonceStr}', // 必填，生成簽名的隨機串
        signature: '${signature}',// 必填，簽名，見附錄1
        jsApiList: ['getLocation','openLocation','chooseImage','uploadImage','downloadImage'] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
    });
    
    function i(i, a) {
        var t = 52.35987755982988,
        e = a,
        n = i,
        o = Math.sqrt(e * e + n * n) + 2e-5 * Math.sin(n * t),
        l = Math.atan2(n, e) + 3e-6 * Math.cos(e * t),
        d = o * Math.cos(l) + .0065,
        s = o * Math.sin(l) + .006;
        return {
            longitude: d,
            latitude: s
        }
    }
    
    var lat;
    var lng;
    
    wx.ready(function () {
        wx.getLocation({
            type: 'gcj02', // 預設為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入'gcj02'
            success: function (res) {
                lat = res.latitude; // 緯度，浮點數，範圍為90 ~ -90
                lng = res.longitude; // 經度，浮點數，範圍為180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒計
                var accuracy = res.accuracy; // 位置精度
                var e = i(lng,lat);
                //alert(e.longitude + ',' + e.latitude);
                $("#jingdu").val(lng);
                $("#weidu").val(lat);
                
                //goole api 獲得海拔
                 var elevator = new google.maps.ElevationService;
                 var latLng = {"lat":lat,"lng":lng};
                    
                      elevator.getElevationForLocations({
                        'locations': [latLng]
                      }, function(results, status) {
                        if (status === 'OK') {
                          if (results[0]) {
                             $("#haiba").val(results[0].elevation+"米");
                          } else {
                              
                          }
                        } else {
                        }
                       }); 
                
                
                var MJKD_LATLNG = e.longitude + ',' + e.latitude;
                var url = 'http://api.map.baidu.com/geocoder/v2/?ak=6yAoynmTPNlTBa8z1X4LfwGE&location=' + MJKD_LATLNG + '&output=json&pois=1';
                $.get(url, function(data) {
                  if(data.status === 0) {
                    //alert(data.result.formatted_address + '=>' + data.result.sematic_description);
                      $("#dizhi").val(data.result.sematic_description);
                  }
                }, 'jsonp');
            } 
        });
        

        // 圖片介面
        // 拍照、本地選圖
        $("#chooseImage").on("click", function () {
            wx.chooseImage({
                success: function (res) {
                    for (var i = 0; i < res.localIds.length; i++) {
                         //全局圖片id，綁定微信選擇圖片產生的localId，將用戶選擇圖片追加到已選擇圖片
                        var id = '' + images.index++; 
                        images.selectIds[id] = res.localIds[i];  
                        $('#imgs').append('<div class="imgdiv"><div class="box"><input id="' + id +'" type="checkbox"/><img style="width:200px;height:200px" src="' + res.localIds[i] + '" /></div></div>');
                    }
                    console.log('已選擇了 ' + Object.keys(images.selectIds).length + ' 張圖片');
                }
            });
        });

        //上傳圖片(保存到js)
        $("#uploadImage").on("click", function () {
            if (Object.keys(images.selectIds).length == 0) {
                alert('請先選擇圖片');
                return;
            }
            var i = 0, length = Object.keys(images.selectIds).length;
            var selectIds = [];  //需要上傳的圖片的全局圖片id
            for(var id in images.selectIds){
                selectIds.push(id);
            }
            function upload() {
                wx.uploadImage({
                    localId: images.selectIds[selectIds[i]],  //根據全局圖片id獲取已選擇圖片
                    isShowProgressTips: 0, // 預設為1，顯示進度提示
                    success: function (res) {
                        //上傳成功，images.selectIds中移除，images.uploadIds追加
                        //圖片從已選擇移到已上傳區域
                        var selectId = selectIds[i];
                        localId = images.selectIds[selectId];
                        removeId(selectId);
                        $('#uploadImgs').append('<div class="imgdiv"><div class="box"><input id="' + selectId +'" type="checkbox"/><img style="width:200px;height:200px" src="' + localId + '" /></div></div>');
                        images.uploadIds[selectId] = res.serverId
                        i++;
                        if (i < length) {
                            console.log('已上傳成功 ' + i + '/' + length);
                            upload();
                        } else {
                            alert('圖片上傳完畢, 已上傳成功 ' + i + '/' + length);
                        }
                    },
                    fail: function (res) {
                        alert('上傳失敗 ' + i + '/' + length);
                    }
                });
            }
            upload();
        });
    });
    
        //保存
        $('#postData').click(function () {
            
            var wpmc = $("#wpmc").val();
            var wpms = $("#wpms").val();
            var jingdu = $("#jingdu").val();
            var weidu = $("#weidu").val();
            var dizhi = $("#dizhi").val();
            
            if (Object.keys(images.uploadIds).length == 0) {
                alert('請先上傳圖片');
                return false;
            }

            var serverIds = [];
            var serverId;
            for(var id in images.uploadIds){
                serverIds.push(images.uploadIds[id]);
            }
            
            var data = {
                'imgIds': serverIds
            }
            $.ajax({
                type: "post",
                async: false,
                url: '/uploadImgData',
                data: {"data": JSON.stringify(data), "wpmc":wpmc , "wpms":wpms , "jd":jingdu, "wd": weidu, "dz":dizhi},
                dataType: "text",
                success: function (data) {
                    if (data == "success") {
                         alert('保存成功！');
                         location.reload();
                    } else {
                        alert('保存失敗');
                    }

                },
                error: function (e) {
                    alert(11);
                }
            });
        });

        
        
    //點擊覆選按鈕,刪除.
    $("body").on('click', ':checkbox', function(){
        var id = $(this).attr('id');
        removeId(id);
    });

   
    function removeId(id){
        if(id in images.selectIds){
            delete images.selectIds[id]
        }else{
            delete images.uploadIds[id]
        }
        $('#' + id).parent().parent().remove();
    }
        
    
    

    //獲取地圖
    $("#getlocation").click(function(){
        wx.openLocation({
            latitude: lat, // 緯度，浮點數，範圍為90 ~ -90
            longitude:lng, // 經度，浮點數，範圍為180 ~ -180。
            name: $("#dizhi").val(), // 位置名
            address: '當前位置', // 地址詳情說明
            scale: 16, // 地圖縮放級別,整形值,範圍從1~28。預設為最大
            infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點擊跳轉
        });
    })
        
    </script> 
</html>
View Code