Taro开发小程序移动地图固定中间获取地址

效果图如下:

绿色地标固定在中间,移动地图的时候获取对应信息。

先定义map。

     <Map className="location" id={location}
          latitude={this.state.latitude}
          longitude={this.state.longitude}
          markers={this.state.markers}
          scale='16'
          onRegionchange={this.regionchange}
          // controls={this.state.controls}
          show-location
        >
          <CoverView className="coverloc"><CoverImage src={locationpng} className="coverlocpng"></CoverImage></CoverView>
        </Map>

写对应样式。

.coverloc {
        z-index: 6;
        margin:auto;
        text-align: center;
        position:absolute;
        left:50%;
        top:50%;
        height: 100px;
        width: 100px;
        .coverlocpng {
            height: 100px;
            width: 100px;
        }
    }

写对应的移动地图的函数,需要用到腾讯地图对微信小程序的支持。

regionchange = (e) => {
    console.log(e)
    let _this = this
    let value
    if (e.type == 'end') {
      this.mapCtx.getCenterLocation({
        success: function (res) {
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: res.latitude,
              longitude: res.longitude
            },
            success: function (resc) {
              console.log(resc)
              value = resc.result.address_component.street_number //address
              Taro.setStorageSync('site', value)
              console.log('地址是:' + vlaue)
            }
          })
        }
      })
    }
  }

好,完成,这样就可以简单的拿取到地图的中间位置信息了。

转载于:https://www.cnblogs.com/all1008/p/10551208.html

要在 Taro开发小程序获取用户地理位置,可以按照以下步骤进行: 1. 在 `app.config.js` 文件中开启小程序的 `setting`,设置 `permission` 为 `scope.userLocation`,以便获取用户地理位置权限: ```javascript export default { ... permission: { 'scope.userLocation': { desc: '你的位置信息将用于小程序位置接口的效果展示' } } } ``` 2. 在需要获取用户地理位置的页面中,使用 Taro 的 `getLocation` API,获取用户的地理位置信息: ```javascript import Taro from '@tarojs/taro'; Taro.getLocation({ type: 'wgs84', // 获取经纬度坐标 success: (res) => { const latitude = res.latitude; // 纬度 const longitude = res.longitude; // 经度 console.log('latitude:', latitude, 'longitude:', longitude); } }); ``` 在调用 `getLocation` 时,可以设置 `type` 参数为 `gcj02`,以获取国测局坐标系的地理位置信息。 3. 在小程序中使用地图组件来展示用户的位置信息。可以使用 Taro 的 `Map` 组件,或者引入第三方地图组件库,如腾讯地图、高德地图等。 ```javascript import Taro, { Component } from '@tarojs/taro'; import { Map, Marker } from '@tarojs/components'; class MapPage extends Component { render() { return ( <Map latitude={this.state.latitude} longitude={this.state.longitude} scale={16} show-location style={{ width: '100%', height: '100%' }} > <Marker latitude={this.state.latitude} longitude={this.state.longitude} /> </Map> ); } } ``` 在上面的代码中,使用了 Taro 的 `Map` 组件和 `Marker` 组件,将用户的位置信息展示在地图上。 需要注意的是,获取用户地理位置信息需要用户授权,并且可能会受到用户设置的隐私保护级别的限制。在实际开发中,需要根据实际情况进行处理,提供友好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值