gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 116 forks source link

Geolocation не работает #165

Closed tsepen closed 5 years ago

tsepen commented 5 years ago

Как получить город пользователя? Данный пример не работает. Спасибо

import React from "react";
import ReactDOM from "react-dom";
import { YMaps } from "react-yandex-maps";

import "./styles.css";
const getGeoLocation = ymaps => {
  return ymaps.geolocation
    .get({ provider: "yandex", mapStateAutoApply: true })
    .then(result =>
      ymaps.geocode(result.geoObjects.position).then(res => {
        let firstGeoObject = res.geoObjects.get(0);
        console.log(
          firstGeoObject.getLocalities().length
            ? firstGeoObject.getLocalities()
            : firstGeoObject.getAdministrativeAreas()
        );
      })
    );
};

const handleApiAvaliable = ymaps => {
  const geolocation = getGeoLocation(ymaps);

  console.log(geolocation)
};

function App() {
  return (
    <div className="App">
      <YMaps onApiAvaliable={ymaps => handleApiAvaliable(ymaps)} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
mmarkelov commented 5 years ago

@tsepen Данный пример не совместим с последней версией пакета. Он написан под предыдущую версию. Для текущей версии: Edit focused-pond-z51bn Перед открытием issue, настоятельно рекомендую читать документацию, в особенности это Спасибо!

RokeAlvo commented 5 years ago

Подниму ветку, пример в песочнице не работает, но это, я думаю связано с безопасностью соединения... У меня вот такой код не работает:

import React from 'react'
import './Map.css'
import { Map, YMaps } from 'react-yandex-maps'

export default function(props) {
  const onLoadMap = (inst) => {
    var location = window.ymaps.geolocation.get(
      { mapStateAutoApply: true },
    )
    console.log('ymaps  ', window.ymaps)
// Асинхронная обработка ответа.
    location.then(
      function(result) {
        // Добавление местоположения на карту.
        console.log('location ', result)
        result.geoObjects.options.set('preset', 'islands#redCircleIcon');
        result.geoObjects.get(0).properties.set({
          balloonContentBody: 'Мое местоположение'
        });
        inst.geoObjects.add(result.geoObjects);      },
      function(err) {
        console.log('Ошибка: ' + err)
      },
    )
  }
  const [zoom, setZoom] = React.useState(15)
  // const setZoom = zoom=>zoom
  const [center, setCenter] = React.useState(
    [66.08, 76.6931577],
  )
  const mapState = React.useMemo(() => ({ center, zoom }),
    [center, zoom,
    ])
  return (
    <YMaps query={{
      apikey: 'my_api',
    }}>
      <div>
        <Map onLoad={(inst) => onLoadMap(inst)}
             className='map-container'
             state={mapState}
        >
        </Map>
      </div>
    </YMaps>
  )
}
mmarkelov commented 5 years ago

@RokeAlvo я не вижу у вас подключения модулей в коде. Думаю, что проблема в этом:

        <Map 
             modules={["geolocation", "geocode"]}  
             onLoad={(inst) => onLoadMap(inst)}
             className='map-container'
             state={mapState}
        >
namazbaev commented 3 years ago
const getGeoLocation = ymaps => {
    return ymaps.geolocation
      .get({ provider: "yandex", mapStateAutoApply: true })
      .then(result =>
        ymaps.geocode(result.geoObjects.position).then(res => {
          res.geoObjects.get(0).geometry.getCoordinates();
        })
      );
  };