Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lbh7/react-amap-geolocation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Geolocation 定位

鹰眼控件，用于显示缩略地图，显示于地图右下角，可以随主图的视口变化而变化，也可以配置成固定位置实现类似于南海附图的效果。

import { Geolocation } from '@lbh7/react-amap';
// 或者单独安装使用
import { Geolocation } from '@lbh7/react-amap-geolocation';

地图定位控件

import React, { useState, useRef } from 'react';
import { APILoader, Map, Geolocation } from '@lbh7/react-amap';

const Example = () => {
  const [data, setData] = useState();
  return (
    <>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={4}>
          <Geolocation
            // 是否使用高精度定位，默认:true
            enableHighAccuracy={true}
            // 超过10秒后停止定位，默认：5s
            timeout={10000}
            // 定位按钮的停靠位置
            // 官方 v2 不再支持
            // buttonPosition="RB"

            // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            // 官方 v2 不再支持
            // buttonOffset={new AMap.Pixel(10, 20)}
            
            // 定位成功后是否自动调整地图视野到定位点
            zoomToAccuracy={true}
            onComplete={(data) => {
              console.log('返回数据：', setData, data);
              setData(data);
            }}
            onError={(data) => {
              console.log('错误返回数据：', data);
              setData(data);
            }}
          />
        </Map>
      </div>
      <pre style={{ padding: 10, marginTop: 10 }}>
        {data ? JSON.stringify(data, null, 2) : '{正在获取}'}
      </pre>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

只获取定位经纬度

import React, { useState, useRef } from 'react';
import { APILoader, Geolocation } from '@lbh7/react-amap';

const Example = () => {
  const [data, setData] = useState();
  return (
    <>
      <div style={{ width: '100%' }}>
        <Geolocation
          // 是否使用高精度定位，默认:true
          enableHighAccuracy={true}
          // 超过10秒后停止定位，默认：5s
          timeout={10000}
          // 定位按钮的停靠位置
          buttonPosition="RB"
          // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset={new AMap.Pixel(10, 20)}
          // 定位成功后是否自动调整地图视野到定位点
          zoomToAccuracy={true}
          onComplete={(data) => {
            console.log('返回数据：', data);
            setData(data);
          }}
          onError={(data) => {
            console.log('错误返回数据：', data);
            setData(data);
          }}
        />
        <pre style={{ padding: 10, marginTop: 10 }}>
          {data ? JSON.stringify(data, null, 2) : '{正在获取}'}
        </pre>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

只获取定位地址信息

import React, { useState, useRef } from 'react';
import { APILoader, Geolocation } from '@lbh7/react-amap';

const Example = () => {
  const [data, setData] = useState();
  return (
    <>
      <div style={{ width: '100%' }}>
        <Geolocation
          type="cityInfo"
          // 是否使用高精度定位，默认:true
          enableHighAccuracy={true}
          // 超过10秒后停止定位，默认：5s
          timeout={10000}
          // 定位按钮的停靠位置
          buttonPosition="RT"
          // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset={new AMap.Pixel(10, 20)}
          // 定位成功后是否自动调整地图视野到定位点
          zoomToAccuracy={true}
          onComplete={(data) => {
            console.log('返回数据：', data);
            setData(data);
          }}
          onError={(data) => {
            console.log('错误返回数据：', data);
            setData(data);
          }}
        />
        <pre style={{ padding: 10, marginTop: 10 }}>
          {data ? JSON.stringify(data, null, 2) : '{正在获取}'}
        </pre>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

不使用组件

import ReactDOM from 'react-dom';
import React, { useEffect, useState, useRef } from 'react';
import { APILoader, Geolocation } from '@lbh7/react-amap';

const Example = () => {
  const [data, setData] = useState();
  useEffect(() => {
    AMap.plugin(['AMap.Geolocation'], () => {
      const instance = new AMap.Geolocation({});
      instance.getCityInfo((status, result) => {
        console.log('>>>>', status, result)
        if(status === 'complete'){
          setData(result);
        } else {
          setData(result);
        }
      });
    });
  }, []);
  return (
    <>
      <div style={{ width: '100%' }}>
        <pre style={{ padding: 10, marginTop: 10 }}>
          {data ? JSON.stringify(data, null, 2) : '{正在获取}'}
        </pre>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

Props

参数	说明	类型	默认值
type	获取 `position`: "获取用户的精确位置，有失败几率" 或 `cityInfo`: "根据用户 IP 获取用户所在城市信息"	`position\|cityInfo`	`position`

更多 API 参考

事件

参数	说明	类型
onComplete	数据请求完成时触发事件。	`(data: GeolocationLiveResult \| GeolocationForecastResult): void;`
onError	数据请求错误时触发事件。	`(err): void;`