123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta name="description" content=""/>
- <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
- <meta name="format-detection" content="telphone=no,email=no"/>
- <meta name="viewport"
- content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <title>设备地理位置</title>
- <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
- <link rel="stylesheet" href="../components/custom/css/common.css"/>
- <link rel="stylesheet" href="css/xyf.common.min.css">
- <style>
- </style>
- </head>
- <body>
- <div class="map-container">
- <div id="allmap"></div>
- <div class="map-top">
- <input class="address-search" id="addressSearch" placeholder="输入地址"/>
- <i class="iconfont icon-location"></i>
- </div>
- <div class="address-pop"></div>
- <div class='center-mark'><i class='iconfont icon-location-b c-primary'></i></div>
- <div class="set-current-location iconfont icon-location-c"></div>
- <div class="map-bottom">
- <div class="address-cancel btn">取消</div>
- <div class="address-ok btn">确定</div>
- </div>
- </div>
- <script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
- <script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
- <script src="/components/custom/js/common.js"></script>
- <script type="text/javascript"
- src="https://api.map.baidu.com/api?v=2.0&ak=9579bf3cb9fdab9d6b49cdaf72c9907f"></script>
- <script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
- <script src="../components/lib/gcoord.js"></script>
- <script src="js/xyf.common.js"></script>
- <script>
- var info = {
- lng: getQueryString("lng"),
- lat: getQueryString("lat"),
- logicalCode: getQueryString("logicalCode"),
- }
- initAddressSelect({lng: info.lng, lat: info.lat});//尝试初始化地图
- function closeMapDialog() {
- history.back();
- }
- // 下拉框选择附近的位置
- var selectPoint = {};
- var mapLoaded = false;
- function initAddressSelect(initPoint) {
- initPoint = new BMap.Point(initPoint.lng, initPoint.lat);
- if (mapLoaded) {
- // 避免多次加载
- return;
- }
- mapLoaded = true;
- //取消或确认选点
- $('.map-bottom .btn').off().tap(function () {
- if ($(this).hasClass("address-cancel")) {
- //点击取消
- closeMapDialog(true)
- } else if ($(this).hasClass("address-ok")) {
- saveLocation();
- }
- return false;
- });
- // 创建地理编码实例
- var myGeo = new BMap.Geocoder();
- // 根据坐标得到地址 并显示在界面、并移动地图
- function getAddressName(currentPoint) {
- // 根据坐标得到地址描述
- myGeo.getLocation(currentPoint, function (result) {
- if (result) {
- $(".address-pop").text(result.address + " (经度:" + currentPoint.lng + ",纬度:" + currentPoint.lat + ')').addClass('active')
- selectPoint = currentPoint;//【缓存当前经纬度,供后台保存】!!!
- map.centerAndZoom(currentPoint, 16);//移动地图到当前位置
- }
- });
- }
- // 获得当前位置 并移动地图和显示位置信息
- function getCurrent(callback) {
- getLocation(function (res) {
- if (res) {
- //转换为百度可用的坐标
- var pointList = gcoord.transform(
- [res.lng, res.lat],
- gcoord.GCJ02, // 当前坐标系
- gcoord.BD09 // 目标坐标系
- );
- var currentPoint = new BMap.Point(pointList[0], pointList[1]);
- if (callback) {
- callback(currentPoint);
- } else {
- getAddressName(currentPoint)
- }
- }
- });
- }
- var map = new BMap.Map("allmap");
- map.setMapStyle({
- styleJson: [
- {
- "featureType": "all",
- "elementType": "labels.text.fill",
- "stylers": {
- "color": "#888888"
- }
- },
- {
- "featureType": "poilabel",
- "elementType": "labels.icon",
- "stylers": {
- "visibility": "off"
- }
- }
- ]
- });
- map.addEventListener("touchstart", function () {
- $("#addressSearch").blur();
- });
- map.addEventListener("dragstart", function () {
- });
- map.addEventListener("dragend", function () {
- var point = map.getCenter();
- getAddressName(point)
- });
- map.addEventListener("zoomend", function () {
- var point = map.getCenter();
- getAddressName(point)
- });
- // 搜索输入
- var isFirst = true;
- //地址搜索建议,location参数表示根据当前区域进行搜索
- var ac = new BMap.Autocomplete({
- "input": "addressSearch", location: {}, "onSearchComplete": function (result) {
- if (isFirst) {
- $(".tangram-suggestion-main").hide();
- isFirst = false;
- }
- }
- });
- //鼠标点击下拉列表后的事件
- ac.addEventListener("onconfirm", function (e) {
- $("#addressSearch").blur();
- var _value = e.item.value;
- var myValue = _value.street + _value.business;
- var detail = _value.province + _value.city + _value.district + myValue
- // 根据详细地址得到坐标
- myGeo.getPoint(detail, function (result) {
- selectPoint = result;
- if (!selectPoint) {
- } else {
- map.centerAndZoom(selectPoint, 16);
- $(".address-pop").text(detail + " (经度:" + selectPoint.lng + ",纬度:" + selectPoint.lat + ')').addClass('active')
- }
- });
- return myValue;
- });
- // 定位按钮事件
- $(".set-current-location").click(function () {
- getCurrent();
- });
- // 初始化移动到 存储点
- if (initPoint.lat) {
- getAddressName(initPoint);
- } else {
- getCurrent();
- }
- }
- //保存位置信息
- function saveLocation() {
- if (!selectPoint) {
- mui.toast("请先定位!");
- }
- var data = {
- 'logicalCode': info.logicalCode,
- 'lng': selectPoint.lng,
- 'lat': selectPoint.lat
- };
- myAjax({
- url: "/device/updateLocation",
- type: "POST",
- mask: false,
- async: true,
- timeout: 70000,
- success: function (res) {
- if (res.result == 1) {
- mui.toast("上报成功!");
- setTimeout(function () {
- history.back()
- }, 1000);
- }
- },
- data: data,
- dataType: 'json'
- });
- }
- </script>
- </body>
- </html>
|