微信小程序的map的使用

关于map的使用记录

具体文档见uniapp
这里写了具体详细的配置。使用了uview组件。

<u-form-item label="选择详细地点" :border-bottom="false"><view class="mapWrap"><map style="width: 100%; height: 150px;" @click="chooseLocation" :latitude="latitude" :longitude="longitude":markers="covers"></map></view>

事件函数

 chooseLocation: function() {uni.chooseLocation({success: (res) => {this.form.address = res.addressthis.latitude = res.latitudethis.longitude = res.longitudethis.covers[1].longitude = res.longitude.toString()this.covers[1].latitude = res.latitude.toString()// console.log(this.longitude, this.latitude, this.address)let reg = /.+?(省|市|自治区|自治州|县|区)/g;let add1 =res.addressconsole.log(add1 + ': ', add1.match(reg));}})},

reg是对定位选择的地址返回的具体地址的处理，返回值是以数组的形式返回。
配置情况

                id: 0, // 使用 marker点击事件 需要填写idtitle: 'map',latitude: '',longitude: '',province: "",ciry: '',district: '',covers: [{latitude: '',longitude: '',iconPath: '../../static/images/map/location.png'}, {latitude: '',longitude: '',iconPath: '../../static/images/map/location.png'}],

      先获取当地的经纬度   getlocation可以获取当地经纬度。

onLoad() {// 获取经纬度let that = thisuni.getLocation({type: 'wgs84',success: function(res) {console.log(res)// console.log(res.latitude,res.longitude)that.covers[0].latitude = res.latitudethat.covers[0].longitude = res.longitudethat.latitude = res.latitudethat.longitude = res.longitude}})},

第二种

通过外部引入的方法，来获取具体的位置首先引入。这个方法需要指定一个经纬度来确定具体的位置。返回值如下。配置同上。先用uni.getLocation来获取经纬度。

这里是qqmap-wx-jssdk.min.js

 var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js')

     chooseLocation: function() {uni.chooseLocation({success: (res) => {this.form.address = res.addressthis.latitude = res.latitudethis.longitude = res.longitudethis.covers[1].longitude = res.longitude.toString()this.covers[1].latitude = res.latitude.toString()console.log(this.longitude, this.latitude, this.address)// let reg = /.+?(省|市|自治区|自治州|县|区)/g;// let add1 = res.address// console.log(add1 + ': ', add1.match(reg));var qqmapsdk;qqmapsdk = new QQMapWX({key: 'AIEBZ-TUH6U-O3WVJ-4NEH5-UO2R7-ECFIH'})qqmapsdk.reverseGeocoder({location: {latitude: res.latitude, //用uni.getLocation来获取经纬度longitude: res.longitude},success: function(res) {console.log(res)this.province = res.result.address_component.provincethis.city = res.result.address_component.citythis.district = res.result.address_component.districtconsole.log(this.province, this.city, this.district)}})}})},

这里的adcode 指的是‘城市编码’ 。

微信小程序的map的使用相关推荐

php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
微信小程序自带地图_微信小程序之map地图
微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ ...
微信小程序覆盖map组件
微信小程序 MAP组件现在可以采用cover-view 来覆盖MAP组件 <map><cover-view>xxxx</cover-view> </map& ...
微信小程序，map地图中在底部添加半透明视图布局
最近在学习微信小程序,遇到一个问题,就是需求map上需要添加其他布局,但是map是由客户端创建的原生组件,层级是最高的,研究了好久,发现在map中可以使用cover-view组件,然后进行布局,有关c ...
微信小程序之map地图
微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({t ...
微信小程序开发MAP（地图）
在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明.https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map ...
微信小程序-地图map使用，周边公交地铁查询
1.腾讯地图注册,获取秘钥 2.下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2 3.小程序引入并使用,下面是搜索地点显示目标地图代码 js代码 // 引入wx ...
微信小程序实战 -- map：根据百度地图的api来获取地址信息
先附上实现效果: 实现的功能有:(中间"红色图标"所在位置为选择的定位) 1. 拖动地图,进行定位: 2. 根据输入的内容进行地图定位. 一. 申请秘钥ak ,下载百度地图微 ...
微信小程序之map地图规划路线以及显示距离
有个问题:在选择公交路线(包含步行和公交)时,怎么才能让不同的路线显示不同的颜色? ps:有个方式,自己写坐标解压往后的存入新数组.把步行时的数据标注下,有什么简单的方法呢? 自定义函数文件 /*** ...

微信小程序的map的使用

微信小程序的map的使用相关推荐

最新文章

热门文章