微信小程序 地图拖拽,获取地图拖拽的位置

想要实现地图拖拽,中心点保持不变。

需要用到map:bindregionchange="regionchange"  这个方法

mapCtx.getCenterLocation  这个默认类型是gcj02坐标,但是腾讯地图是wgs84坐标系,就需要gcj02转wgs84坐标。

最终结果为js文件中

var coordinate = that.gcj02towgs84(res.longitude, res.latitude)

          console.log(coordinate, 2222)


重要的事情说说三遍:

console.log(coordinate, 2222)

console.log(coordinate, 2222)

console.log(coordinate, 2222)

这个才是给api转换用的经纬度



话不多说 上代码


wxml:

<view class="container">

  <map id="map4select" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" markers="{{markers}}" show-location bindcontroltap="controltap" polyline="{{polyline}}" bindmarkertap="markertap" circles="{{circles}}" bindregionchange="regionchange"

    class='map'>

    <cover-image class="cover-image" bindtap="my_location" src="/images/mapicon.png" />

    <!-- <cover-image class="cover-image_confirm" bindtap="confirm_bag" src="/images/mapicon.png" /> -->

  </map>

</view>


js:

const app = getApp()

//定义一些常量

var x_PI = 3.14159265358979324 * 3000.0 / 180.0;

var PI = 3.1415926535897932384626;

var a = 6378245.0;

var ee = 0.00669342162296594323;

Page({

  data: {

    longitude: '108.947040',

    latitude: '34.259430',

  },

  onLoad() {

    var that = this;

    wx.getLocation({

      type: 'wgs84',

      success: function(res) {

        // console.log(res);

        var latitude = res.latitude

        var longitude = res.longitude

        that.setData({

          latitude: latitude,

          longitude: longitude

        })

        //弹框

        wx.showModal({

          title: '当前位置',

          content: "纬度:" + latitude + ",经度:" + longitude,

        })

      }

    })

  },

  regionchange(e) {

    console.log(e)

    // 地图发生变化的时候,获取中间点,也就是用户选择的位置toFixed

    if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {

      console.log(e)

      var that = this;

      this.mapCtx = wx.createMapContext("map4select");

      this.mapCtx.getCenterLocation({

        type: 'gcj02',

        success: function(res) {

          console.log(res, 11111)

          var coordinate = that.gcj02towgs84(res.longitude, res.latitude)

          console.log(coordinate, 2222)

          that.setData({

            latitude: res.latitude,

            longitude: res.longitude,

            circles: [{

              latitude: res.latitude,

              longitude: res.longitude,

              color: '#FF0000DD',

              fillColor: '#d1edff88',

              radius: 0, //定位点半径

              strokeWidth: 1

            }]

          })

        }

      })

    }

  },

  //定位到自己的位置事件

  my_location: function(e) {

    var that = this;

    that.onLoad();

  },

  gcj02towgs84(lng, lat) {

    var that  = this;

    if (that.out_of_china(lng, lat)) {

      return [lng, lat]

    } else {

      var dlat = that.transformlat(lng - 105.0, lat - 35.0);

      var dlng = that.transformlng(lng - 105.0, lat - 35.0);

      var radlat = lat / 180.0 * PI;

      var magic = Math.sin(radlat);

      magic = 1 - ee * magic * magic;

      var sqrtmagic = Math.sqrt(magic);

      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);

      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);

      var mglat = lat + dlat;

      var mglng = lng + dlng;

      return [lng * 2 - mglng, lat * 2 - mglat]

    }

  },

  transformlat(lng, lat) {

    var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));

    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;

    ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;

    return ret

  },

  transformlng(lng, lat) {

    var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));

    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;

    ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;

    return ret

  },

  /**

  * 判断是否在国内,不在国内则不做偏移

  * @param lng

  * @param lat

  * @returns {boolean}

  */

  out_of_china(lng, lat) {

    return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);

  }

})



wxss:



.container{

  width: 100%;

  height: 100%;

}

.cover-image {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -40rpx;

  margin-left: -40rpx;

  width: 80rpx;

  height: 80rpx;

}

.cover-image_confirm {

  width: 50rpx;

  height: 50rpx;

}

.map {

  width: 100vw;

  height: 100vh;

}


PS:cover-image:没有找到好的方法居中

所以真实经纬度用户是感应不到的

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,135评论 6 514
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,317评论 3 397
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,596评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,481评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,492评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,153评论 1 309
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,737评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,657评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,193评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,276评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,420评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,093评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,783评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,262评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,390评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,787评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,427评论 2 359

推荐阅读更多精彩内容