微信小程序使用地图(一) 获取位置、移动选点、逆地址解析

我会带着你远行 2022-05-26 00:28 398阅读 0赞

wxml:

<view class="page-body">
      <view class="page-section page-section-gap">
        <map id="qqMap" style="width: 100%; height: 300px;" latitude="{
       {latitude}}" longitude="{
       {longitude}}" markers="{
       {markers}}" show-location></map>
      </view>
      <view class="btn-area">
        <button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>
        
        选择的位置：
        <view>位置：{
      {mobileLocation.address}}</view>
        <view>经度：{
      {mobileLocation.longitude}}</view>
        <view>纬度：{
      {mobileLocation.latitude}}</view>
    
      </view>
    </view>

js:

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    var qqmapsdk;
    Page({
       data: {
          borderRadius : 5,
          latitude : 0,
          longitude: 0,
          markers: [],
          callout : {
             content: '预计还有10分钟到达',
             bgColor: "#736F6E",
             color: "#ffffff",
             padding: 10,
             display: "ALWAYS",
             borderRadius: 5
          },
          mobileLocation : {
      //移动选择位置数据
             longitude : 0,
             latitude: 0,
             address: '',
          }
       },
        onLoad: function () {
           // 实例化API核心类
           qqmapsdk = new QQMapWX({
              key: 'qq-map key'
           });
          var that = this;
          //获取位置
          wx.getLocation({
             type: 'gcj02',//默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
             success: function(res) {
                console.log(res);
                var marker = [{
                   id: 0,
                   latitude: res.latitude,
                   longitude: res.longitude,
                   callout: {
      //窗体
                      content: that.data.callout.content,
                      bgColor: that.data.callout.bgColor,
                      color: that.data.callout.color,
                      padding: that.data.callout.padding,
                      display: that.data.callout.display,
                      borderRadius: that.data.callout.borderRadius
                   },
                }];
                var mobileLocation = {
                   latitude: res.latitude,
                   longitude: res.longitude, 
                };
                that.setData({
                   latitude: res.latitude,
                   longitude: res.longitude,  
                   markers: marker,
                });
                //根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
                qqmapsdk.reverseGeocoder({
                   location: {
                      latitude: res.latitude,
                      longitude: res.longitude
                   },
                   success: function (addressRes) {
                      var address = addressRes.result.formatted_addresses.recommend;
                      mobileLocation.address = address;
                      console.log(address)
                      //当前位置信息
                      that.setData({
                         mobileLocation: mobileLocation,
                      });
                   }
                });
             }
          });
    
          this.mapCtx = wx.createMapContext('qqMap');
       },
       
        //移动选点
       moveToLocation: function () {
          var that = this;
          wx.chooseLocation({
             success: function (res) {
                let mobileLocation = {
                   longitude: res.longitude,
                   latitude: res.latitude,
                   address: res.address,
                };
                that.setData({
                   mobileLocation: mobileLocation,
                });
             },
             fail: function (err) {
                console.log(err)
             }
          });
       }
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue + 百度地图点选地址（地址逆解析）

1、先上效果图： ![在这里插入图片描述][20210525142108883.gif_pic_center] 2、实现方法：百度地图的引用方法本篇文章没有提

约定不等于承诺〃/ 2022年10月15日 12:59/ 0 赞/ 454 阅读

相关微信小程序地图点聚合

场景当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，可以使用点聚合能力。快速

- 日理万妓/ 2022年09月05日 12:56/ 0 赞/ 582 阅读

相关使用百度地图API 逆地址解析

使用百度地图API 逆地址解析。数据库中查询出地址，调用百度API解析 <script type="text/javascript" src="http://api.map

ゝ一纸荒年。/ 2022年07月24日 12:13/ 0 赞/ 612 阅读

相关百度地图逆地址解析

对于百度地图的逆地址解析，首先必须声明 var geoc = new BMap.Geocoder(); 然后将坐标点转换为百度坐标点 var point

不念不忘少年蓝@/ 2022年07月13日 13:15/ 0 赞/ 295 阅读

相关微信小程序使用地图(一) 获取位置、移动选点、逆地址解析

wxml: <view class="page-body"> <view class="page-section page-section-ga

我会带着你远行/ 2022年05月26日 00:28/ 0 赞/ 399 阅读

相关微信小程序 —— 地图上选择位置

> 需求分析：一些小程序打开后，以文字形式显示用户所在位置，如果用户觉得不准，可以打开地图，在地图上自己选择位置，选择完成后，显示的用户的位置会发生变化.今天我们就来看一下如

àì夳堔傛蜴生んèń/ 2022年05月25日 11:38/ 0 赞/ 412 阅读

相关微信小程序之地图使用（二获取当前位置定位）

获取当前位置定位是直接使用微信小程序自带的API(指路[https://developers.weixin.qq.com/miniprogram/dev/ap

港控/mmm°/ 2022年04月23日 02:26/ 0 赞/ 516 阅读

相关微信小程序的百度地图获取地理位置：微信小程序教程系列15

由于小程序只提供了我们一个获取地理位置、速度的api，并没有获取的相关地位位置的信息等等，因此我们还需要借助一些第三方的api来实现 ![20170214134733484]

r囧r小猫/ 2021年12月03日 13:15/ 0 赞/ 737 阅读

相关微信小程序点击地址，跳转到地图导航

在进入小程序的时候我就获取了地理位置了，所以直接在地址的位置加点击事件即可获取地理位置的在下篇文章 uni.openLocation({ latit

川长思鸟来/ 2021年07月24日 18:16/ 0 赞/ 708 阅读

相关百度地图地址解析和逆地址解析

[教程地址][Link 1] 地址解析:将地址转换成经纬度坐标逆地址解析（地理逆编码）:将经纬度转换成地址提供的转换类：BMap.

傷城~/ 2021年07月24日 15:06/ 0 赞/ 950 阅读