Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.

Недавно клиент сделал запрос,Оценщики, которые входят в систему экзаменов, обязаны фиксировать свое текущее местоположение. Хотя в веб-форме его можно найти по IP.,Но IP слишком легко подделать,Так что для большей точности,Наконец решил использоватьВичатМини программа,Хотя есть вероятность мошенничества,Но это лучше, чем веб-форма.

1. Подготовка

Поскольку мы хотим найти, нам обязательно нужно найти функциональный API, связанный с картой, и выполнить поиск в документации по разработке WeChat. Потому что нам нужно только записать здесь функцию статуса и не нужно открывать карту, поэтому мы используем только wx. получить местоположение. Проверив этот метод, я обнаружил, что WeChat предоставляет только долготу и широту местоположения, но не предоставляет китайское название местоположения.

Когда мы хотим сохранить адрес, мы точно не можем просто сохранить широту и долготу. Вообще этого никто не может понять. Но фишка в том, что после поиска я не нашел, что апплет WeChat предоставляет эту функцию. После поиска в Интернете Baidu Map и Amap имеют функции API для получения местоположений по текущей долготе и широте. Учитывая, что апплет прогноза погоды в прошлый раз использовал Amap, давайте на этот раз воспользуемся функциями Amap. Метод тот же. Чтобы создать приложение позиционирования на открытой платформе Amap, выполните очень простые шаги. На первом этапе выберите «Навигация» в качестве типа, а на втором этапе выберите «Мини-программа WeChat». элемент платформы. После создания Вы получите ключ приложения.

2. Создайте небольшой программный проект.

Давайте сначала посмотрим, каков результат функции getLocation в мини-программе.

Откройте index.js и измените код метода onLoad на странице ({}) на следующий

wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log("-----success location-----")
        console.log(res)

        //var latitude = res.latitude
        //var longitude = res.longitude
        // wx.openLocation({
        //   latitude,
        //   longitude,
        //   scale: 18
        // })         

      },
      fail(res) {
        console.log("-----fail location-----")
        console.log(res)      
      }
    });

Семейное ведро Jetbrains 1 год 46, стабильная послепродажная гарантия

После компиляции, если использовать его впервые, будет сообщено напоминание о необходимости авторизации. Затем необходимо сначала добавить кусок кода в app.json.

"permission": {
    "scope.userLocation": {
      "desc": «Информация о вашем местоположении будет использоваться Mini Отображение эффекта интерфейса положения программы"
    }
  }

, а затем авторизуйте позиционирование. После успешной авторизации вы увидите строку json, напечатанную на консоли:

Важными являются два данных: широта и долгота. Значение остальных полей можно узнать в документе, в котором есть подробные пояснения.

Если вы откроете часть комментариев в приведенном выше коде, текущая карта будет отображена после компиляции апплета. По карте позиционирование неточное. Я не проверял причину, предполагаю, что позиционирование осуществляется через IP, поэтому есть несоответствие, если проверить на мобильном телефоне, позиционирование точное.

3. Найдите местоположение с помощью API Amap.

Измените файл index.wxml, чтобы на странице отображалось имя местоположения.

<view>
<text>{
  
  {address}}</text>
<view wx:for="{
  
  {arrAddress}}">
  <text>
    {
  
  {item.address}} -- {
  
  {item.name}}
  </text>
</view>
<button open-type="openSetting">Откройте страницу настроек авторизации</button> 
</view>

В первом текстовом теге хранится имя местоположения. Пока не обращайте внимания на тег циклического просмотра. Кнопка используется для открытия страницы настроек авторизации. В инструментах разработки мини-программ иногда возникают проблемы, когда авторизация используется не в первый раз. иногда диалоговое окно авторизации не выскакивает и его можно открыть прямо через эту кнопку. Ниже я также расскажу о том, как настроить напоминание диалогового окна и затем открыть страницу авторизации.

Найдите API позиционирования, предоставляемый AMAP.,Войдите на сайт открытой платформы Amap,оказаться“поддержка развития”–>”Вичат Мини программаSDK” –> “Справочное руководство”–>”Базовый класс”,

Следующий метод getPoiAround(Object), окружающий адрес POI, и адрес позиционирования getRegeo(Object) могут получить адрес, но мы используем его только для определения местоположения, поэтому просто используйте второй. Обновите код index.js следующим образом.

const amapFile = require('../../utils/amap-wx.js')
const app = getApp()

Page({
  data: {    
    arrAddress:[],
    address:''
  },  
  onLoad: function () {
    var $that = this;
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log("-----success location-----")
        console.log(res)

        var myAmapFun = new amapFile.AMapWX({ key: app.baseData.gdLocationKey });
        myAmapFun.getRegeo({
          success: function (data) {
            
            // успешный обратный вызов
            console.log("data ----- ")
            console.log(data)
            
            var address = data[0].desc + "【" + data[0].name + "】"
            $that.setData({ address: address });
          },
          fail: function (info) {
            //Ошибочный обратный вызов
            console.log(info)
            msg(info.errMsg)
          }
        });      

      },
      fail(res) {
        console.log("-----fail location-----")
        console.log(res)      
      }
    });    
    
  },
  onReady:function(){
    console.log("----onReady-----") 
  }
})

После компиляции название локации появится на странице симулятора. Также возникает проблема с ошибкой. Если вы используете мобильный телефон, проблем не возникнет.

Фактически, глядя на приведенный выше код, вы можете определить текущее местоположение напрямую с помощью API Amap, не используя wx.getLocation мини-программы. Причина, по которой здесь все еще используется wx.getLocation, — это напоминание о причине авторизации, но это так. только что написал так. Тоже есть проблема. Если авторизоваться не в первый раз, будет сообщаться только об ошибке, а диалоговое окно напоминания об авторизации не выскочит. Здесь нужно самому написать окно напоминания.

4. Настройте диалоговое окно статуса авторизации.

Сначала извлеките приведенный выше код в метод, я поместил его здесь в util.js.

module.exports={
  msg:msg,
  getLocation: getLocation
}
function msg(title){  
  wx.showToast({
    title: title,
    icon: "success",
    duration: 1000
  })
}
function getLocation($that) {
  var address ;
  wx.getLocation({
    type: 'wgs84',
    success(res) {
      console.log("-----success location-----")
      console.log(res)
      var myAmapFun = new amapFile.AMapWX({ key: app.baseData.gdLocationKey });
      myAmapFun.getRegeo({
        success: function (data) {
          // успешный обратный вызов
          console.log("data ----- ")
          console.log(data)          
          address = data[0].desc + "【" + data[0].name+ "】"
          $that.setData({ address: address });
        },
        fail: function (info) {
          //Ошибочный обратный вызов
          console.log(info)
          msg(info.errMsg)
        }
      })
    },
    fail(res) {
      console.log("-----fail location-----")
      console.log(res)
      //settingLoaction($that)
    }
  });
}

Изменить index.js

const util = require('../../utils/util.js')
const app = getApp()
Page({
  data: {    
    arrAddress:[],
    address:''
  },  
  onLoad: function () {
    
    console.log("----onLoad-----")
    util.getLocation(this);
    
  }
})

После компиляции местоположение также появится в симуляторе. В это время нажмите кнопку «Открыть страницу настроек авторизации» в симуляторе, отключите переключатель «Использовать мое географическое местоположение», перекомпилируйте апплет, и консоль сообщит об этом. ошибка. Но симулятор не выводит диалоговое окно авторизации. Даже если вы просто используете API Amap, консоль сообщит об ошибке:

{errCode: «0», errMsg: «getLocation:fail auth Deny»} сообщает, что местоположение не авторизовано.

Определение наличия авторизации на самом деле заключается в определении истинности «scope.userLocation» в текущих настройках пользователя, полученных через апплет WeChat.

Напишите метод суждения

function settingLoaction($that){
  wx.getSetting({    
    success: function (res) {
      console.log("-----userLocation-----")
      console.log(res)
      if (res.authSetting['scope.userLocation'] != true) {
        wx.showModal({
          title: «Авторизовать текущее местоположение»,
          content: «Необходимо получить ваше географическое местоположение, пожалуйста, подтвердите авторизацию, иначе необходимые вам данные невозможно будет получить»,
          success: function (res) {
            if (res.cancel) {//Нажмите, чтобы отменить
              msg("Ошибка авторизации 1!")
              getLocation($that)
            } else if (res.confirm) {//Нажмите ОК.
              wx.openSetting({
                success: function (res) {
                  console.log(res)
                  if (res.authSetting['scope.userLocation'] == true) {
                    msg("Авторизация успешна 1!")
                    getLocation($that)
                  } else {
                    msg("Ошибка авторизации 2!")
                    getLocation($that)
                  }
                }
              })
            }
          }
        });
      }
    }
  });
}

Затем измените вышеуказанное getLocation(that) Если позиционирование не удается получить в методе, оно закомментируется в возвращаемой функции. settingLoaction(that) Просто включите его. В это время перекомпилируйте апплет, и появится настроенное диалоговое окно. Метод, который я здесь описал, заключается в том, что диалоговое окно исчезнет только тогда, когда пользователь разрешит его. При фактическом использовании вы можете управлять им в соответствии со своими потребностями.

5. Получить PoiAround

Это функция, предоставляемая Amap для получения 20 адресов по долготе и широте. Просто замените приведенный выше getRegeo этим, а затем присвойте значение внешнему интерфейсу.

$that.setData({ arrAddress: data.markers });

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Этот сайт предоставляет только услуги по хранению информации, не имеет никаких прав собственности и не принимает на себя соответствующие юридические обязательства. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.

Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/203613.html Исходная ссылка: https://javaforall.cn