java微信开发中的地图定位功能

程序员文章站 2024-02-22 18:58:04
页面代码: <%@ page language="java" contenttype="text/html; charset=utf-8" pagee...
页面代码:
<%@ 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="external nofollow" 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="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" >保存</a>
        <a id="getlocation" href="javascript:;" rel="external nofollow" rel="external nofollow" >地图</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>
总结
以上所述是小编给大家介绍的java微信开发中的地图定位功能，希望对大家有所帮助
上一篇：【STM32】FreeRTOS列表和列表项详解
下一篇： BAT32G137 移植threadX
java微信开发中的地图定位功能

java微信开发中的地图定位功能

Java编程调用微信支付功能的方法详解

java微信开发中的地图定位功能

微信小程序开发之 js页面获取wxml页面中picker,input的值

javascript - php 微信开发中图片长传的问题？

我要点爆”微信小程序云开发之项目建立与我的页面功能实现

微信开发中 jssdk 中 jsapi的返回值如何在php中获取

关于微信公众平台开发中换行的问题

总结微信公众平台网页开发中遇到的ios的兼容问题

thinkphp-用weiphp开发微信如何在代码中调用文本回复？然后如何获取用户输入的内容？
