Skip to content

W
WebPublic
提交 d63b9291 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

定位组件修改.

上级 118fa6c0
隐藏空白字符变更
内嵌 并排
正在显示 包含 200 行增加 和 188 行删除
one_stop_public/libs/LocationCom.js
浏览文件 @ d63b9291
...@@ -31,6 +31,7 @@ export default class LocationCom extends React.Component { ...@@ -31,6 +31,7 @@ export default class LocationCom extends React.Component {
} }
} }
changePos = (obj) => { changePos = (obj) => {
console.log(obj);
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({ ...obj }); this.setState({ ...obj });
} }
......
one_stop_public/location/components.jsx
浏览文件 @ d63b9291
//@ts-nocheck
import React, { Component } from 'react'; import React, { Component } from 'react';
import styles from './styles.less'; import styles from './styles.less';
import UUID from 'react-native-uuid'; import { message } from 'antd';
const AMap = window.AMap; import AMapJS from 'amap-js';
const AMapUI = window.AMapUI;
//思路进入页面时先定位 //思路进入页面时先定位
//可以通过搜索选址 //可以通过搜索选址
//可以通过拖拽微调选址 //可以通过拖拽微调选址
class GetLocation extends Component { class GetLocation extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.mapId = UUID.v4(); this.state = {
this.state = { selectionCenter: [],
selectionCenter: [], };
};
}
map;
valueString;
componentWillReceiveProps(nextProps) {
const { lng, lat, params } = nextProps;
const vs = JSON.stringify({ lng, lat, params });
if (vs != this.valueString) {
this.valueString = vs;
if (params.setMap) {
params.setMap(this.map, AMap);
}
}
}
componentWillMount() {} }
componentDidMount = () => {
this.getLocation();
this.searchSiteSelection();
const { lng, lat, params } = this.props;
if (params.setMap) {
params.setMap(this.map, AMap);
}
};
// 12,[116.171731,40.06682]
//获取当前定位
getLocation = () => {
/***************************************
由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
***************************************/
let geolocation;
const { lng, lat, params, json } = this.props;
//加载地图，调用浏览器定位服务 componentWillMount() {
this.map = new AMap.Map(this.mapId, {
resizeEnable: true,
zoom: json.zoom || 14, //级别
center: [lng ? lng : 116.397428, lat ? lat : 39.90923], //中心点坐标
viewMode: '3D', //使用3D视图
});
var layer1 = new AMap.TileLayer.Satellite(); }
var layer2 = new AMap.TileLayer.RoadNet();
var layers = [layer1, layer2];
this.map.setLayers(layers);
this.map.plugin('AMap.Geolocation', () => {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 1000000, //超过10秒后停止定位，默认：无穷大
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
buttonPosition: 'RB',
GeoLocationFirst: true,
});
this.map.addControl(geolocation); componentDidMount = () => {
geolocation.getCurrentPosition(); console.log(123);
// /** this.loader = new AMapJS.AMapLoader({
// * 只查询到城市 key: 'a8d312e3cc24b4fd12bad99780c2182a', // 公司账号配置的应用的key
// */ // https://console.amap.com/dev/key/app
// geolocation.getCityInfo((status, result) => { version: '1.4.8',
// console.log(result) plugins: ['AMap.Geolocation'],
// }) security: {
AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)); //返回定位信息 securityJsCode: 'f4a5344f0117dc8b32ee216d2311fc1a' // 公司账号配置的应用的 安全key
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 },
}); });
//解析定位结果 console.log(window.AMap);
function onComplete(data) { if(!window.AMap){
let poi = data.position.toString().split(','); this.loader.load().then(() => {
// 需要通过改变this指向 // 加载完成
this.dragSiteSelection(15, poi); console.log('Amap地图加载完成');
} this.getLocation();
//解析定位错误信息 if(this.props.showMap){
function onError(data) { this.searchSiteSelection();
var str = '定位失败,'; }
str += '错误信息：'; })
switch (data.info) { .catch(e => {
case 'PERMISSION_DENIED': console.log('-------88--99--11--12');
str += '浏览器阻止了定位操作'; console.log(e);
break; message.error('未配置地图厂家');
case 'POSITION_UNAVAILBLE': return;
str += '无法获得当前位置'; });
break; }
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
console.log(str);
}
AMapUI.loadUI(['control/BasicControl'], (BasicControl) => { };
//缩放控件 // 12,[116.171731,40.06682]
this.map.addControl( //获取当前定位
new BasicControl.Zoom({ getLocation = () => {
position: 'lt', //left top，左上角 /***************************************
showZoomNum: true, //显示zoom值 由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
}), ***************************************/
); const AMap = window.AMap;
let map, geolocation;
//加载地图，调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true,
});
map.plugin('AMap.Geolocation', () => {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 1000000, //超过10秒后停止定位，默认：无穷大
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
buttonPosition: 'RB',
GeoLocationFirst: true,
});
//图层切换控件 map.addControl(geolocation);
this.map.addControl( geolocation.getCurrentPosition();
new BasicControl.LayerSwitcher({ // /**
position: 'rt', //right top，右上角 // * 只查询到城市
}), // */
); // geolocation.getCityInfo((status, result) => {
}); // })
}; AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)); //返回定位信息
//通过搜索来获取定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
searchSiteSelection = () => { });
AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
let poiPicker = new PoiPicker({
input: 'pickerInput',
});
//初始化poiPicker
window.poiPicker = poiPicker;
//选取了某个POI
poiPicker.on('poiPicked', (poiResult) => {
let poi = poiResult.item.location.toString().split(',');
this.dragSiteSelection(15, poi);
});
});
};
//拖拽位置选择 //解析定位结果
dragSiteSelection = (zoom, center) => { function onComplete(data) {
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => { console.log(data);
let map = new AMap.Map('map', { if(!this.props.showMap){
zoom: zoom, let locationMsg = {
resizeEnable: true, lng: data.position.lng, // 经度
center: center, lat: data.position.lat, // 维度
}); address: data.formattedAddress, // 详细地址
let positionPicker = new PositionPicker({ addressComponent: data.addressComponent,
mode: 'dragMap', //设定为拖拽地图模式，可选'dragMap[拖拽地图]'、'dragMarker[拖拽点]'，默认为'dragMap' // nearestJunction: positionResult.nearestJunction, // 最近的路口
map: map, // nearestRoad: positionResult.nearestRoad, // 最近的路
// iconStyle: { //自定义图标外观 // nearestPOI: positionResult.nearestPOI, // 最近的POI
// url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png', //图片地址 };
// ancher: [24, 40], //要显示的点大小，将缩放图片 this.props.getLocationMsg(locationMsg);
// size: [48, 48] //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置 }else{
// } let poi = data.position.toString().split(',');
}); // 需要通过改变this指向
positionPicker.on('success', (positionResult) => { this.dragSiteSelection(15, poi);
let locationMsg = { }
lng: positionResult.position.lng, // 经度
lat: positionResult.position.lat, // 维度 }
address: positionResult.address, // 详细地址
nearestJunction: positionResult.nearestJunction, // 最近的路口 //解析定位错误信息
nearestRoad: positionResult.nearestRoad, // 最近的路 function onError(data) {
nearestPOI: positionResult.nearestPOI, // 最近的POI console.log('error', data);
}; var str = '定位失败,';
//将数据抛出 str += '错误信息：';
this.props.getLocationMsg(locationMsg); switch (data.info) {
}); case 'PERMISSION_DENIED':
positionPicker.on('fail', (positionResult) => { str += '浏览器阻止了定位操作';
// 海上或海外无法获得地址信息 break;
alert('选址失败请稍后重试'); case 'POSITION_UNAVAILBLE':
}); str += '无法获得当前位置';
positionPicker.start(); break;
}); case 'TIMEOUT':
}; str += '定位超时';
render() { break;
const { json } = this.props; default:
return ( str += '未知错误';
<div id="GetLocation" style={{ display: this.props.showMap ? 'block' : 'none' }}> break;
<input }
id="pickerInput" alert(
className={styles.top} '定位失败,请在设置==》应用==》权限管理==》位置信息权限==>打开应用定位权限',
style={{ width: 200 }} );
placeholder="输入关键字选取地点" }
/> };
<div //通过搜索来获取定位信息
id={this.mapId} searchSiteSelection = () => {
className={styles.map} const AMapUI = window.AMapUI;
style={{ width: json.width, height: json.height }} if (!AMapUI) {
/> return false;
</div> }
); AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {
} let poiPicker = new PoiPicker({
input: 'pickerInput',
});
//初始化poiPicker
window.poiPicker = poiPicker;
//选取了某个POI
poiPicker.on('poiPicked', (poiResult) => {
let poi = poiResult.item.location.toString().split(',');
this.dragSiteSelection(15, poi);
});
});
};
//拖拽位置选择
dragSiteSelection = (zoom, center) => {
const AMapUI = window.AMapUI;
if (!AMapUI) {
return false;
}
AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
let map = new AMap.Map('map', {
zoom: zoom,
resizeEnable: true,
center: center,
});
let positionPicker = new PositionPicker({
mode: 'dragMap', //设定为拖拽地图模式，可选'dragMap[拖拽地图]'、'dragMarker[拖拽点]'，默认为'dragMap'
map: map,
// iconStyle: { //自定义图标外观
// url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png', //图片地址
// ancher: [24, 40], //要显示的点大小，将缩放图片
// size: [48, 48] //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
// }
});
positionPicker.on('success', (positionResult) => {
let locationMsg = {
lng: positionResult.position.lng, // 经度
lat: positionResult.position.lat, // 维度
address: positionResult.address, // 详细地址
nearestJunction: positionResult.nearestJunction, // 最近的路口
nearestRoad: positionResult.nearestRoad, // 最近的路
nearestPOI: positionResult.nearestPOI, // 最近的POI
};
//将数据抛出
this.props.getLocationMsg(locationMsg);
});
positionPicker.on('fail', (positionResult) => {
// 海上或海外无法获得地址信息
alert('选址失败请稍后重试');
});
positionPicker.start();
});
};
render() {
return (
<div
id='GetLocation'
style={{ display: this.props.showMap ? 'block' : 'none' }}>
<input
id='pickerInput'
className={styles.top}
placeholder='输入关键字选取地点'
/>
<div id='map' className={styles.map}></div>
</div>
);
}
} }
export default GetLocation; export default GetLocation;
one_stop_public/location/index.jsx
浏览文件 @ d63b9291
...@@ -28,10 +28,10 @@ export default class location extends Component { ...@@ -28,10 +28,10 @@ export default class location extends Component {
//在组件从 DOM 中移除的时候立刻被调用。 //在组件从 DOM 中移除的时候立刻被调用。
componentWillUnmount = () => {}; componentWillUnmount = () => {};
getLocationMsg = locationMsg => { getLocationMsg = locationMsg => {
console.log(locationMsg);
//如果不为空的话显示提示 //如果不为空的话显示提示
this.setState({ loading: true }, () => { this.setState({ loading: true }, () => {
if (Object.keys(locationMsg).length !== 0) { if (Object.keys(locationMsg).length !== 0) {
this.props.onChange(locationMsg);
this.setState({ this.setState({
locationMsg: locationMsg, locationMsg: locationMsg,
loading: false, loading: false,
...@@ -101,9 +101,9 @@ export default class location extends Component { ...@@ -101,9 +101,9 @@ export default class location extends Component {
showMap={this.props.showMap} showMap={this.props.showMap}
params={params} params={params}
/> />
<div style={{ display: showLocation ? 'block' : 'none' }}> <div style={{ display: 'block'}}>
{' '} {locationMsg?.address || ''}
<Popconfirm {/* <Popconfirm
title={btn ? '正在定位中' : locationMsg.address} title={btn ? '正在定位中' : locationMsg.address}
onConfirm={this.confirm} onConfirm={this.confirm}
okText="提交" okText="提交"
...@@ -118,7 +118,7 @@ export default class location extends Component { ...@@ -118,7 +118,7 @@ export default class location extends Component {
> >
{this.props.btnName} {this.props.btnName}
</Button> </Button>
</Popconfirm> </Popconfirm>*/}
</div> </div>
</div> </div>
); );
......
one_stop_public/tableCompon/index.jsx
浏览文件 @ d63b9291
...@@ -2511,8 +2511,8 @@ export default class tableCom extends Component { ...@@ -2511,8 +2511,8 @@ export default class tableCom extends Component {
<span> <span>
<LocationCom <LocationCom
get={get} get={get}
btnName={json.btnName} btnName={json.btnName || '定位'}
btnSucName={json.btnSucName} btnSucName={json.btnSucName || '定位成功'}
width={json.width} width={json.width}
json={json} json={json}
showMap={json.showMap} showMap={json.showMap}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论