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 {
}
}
changePos = (obj) => {
console.log(obj);
if (!('value' in this.props)) {
this.setState({ ...obj });
}
......
one_stop_public/location/components.jsx
浏览文件 @ d63b9291
//@ts-nocheck
import React, { Component } from 'react';
import styles from './styles.less';
import UUID from 'react-native-uuid';
const AMap = window.AMap;
const AMapUI = window.AMapUI;
import { message } from 'antd';
import AMapJS from 'amap-js';
//思路进入页面时先定位
//可以通过搜索选址
//可以通过拖拽微调选址
class GetLocation extends Component {
constructor(props) {
super(props);
this.mapId = UUID.v4();
this.state = {
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);
}
}
}
constructor(props) {
super(props);
this.state = {
selectionCenter: [],
};
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;
}
//加载地图，调用浏览器定位服务
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视图
});
componentWillMount() {
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);
geolocation.getCurrentPosition();
// /**
// * 只查询到城市
// */
// geolocation.getCityInfo((status, result) => {
// console.log(result)
// })
AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
let poi = data.position.toString().split(',');
// 需要通过改变this指向
this.dragSiteSelection(15, poi);
}
//解析定位错误信息
function onError(data) {
var str = '定位失败,';
str += '错误信息：';
switch (data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
console.log(str);
}
componentDidMount = () => {
console.log(123);
this.loader = new AMapJS.AMapLoader({
key: 'a8d312e3cc24b4fd12bad99780c2182a', // 公司账号配置的应用的key
// https://console.amap.com/dev/key/app
version: '1.4.8',
plugins: ['AMap.Geolocation'],
security: {
securityJsCode: 'f4a5344f0117dc8b32ee216d2311fc1a' // 公司账号配置的应用的 安全key
},
});
console.log(window.AMap);
if(!window.AMap){
this.loader.load().then(() => {
// 加载完成
console.log('Amap地图加载完成');
this.getLocation();
if(this.props.showMap){
this.searchSiteSelection();
}
})
.catch(e => {
console.log('-------88--99--11--12');
console.log(e);
message.error('未配置地图厂家');
return;
});
}
AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {
//缩放控件
this.map.addControl(
new BasicControl.Zoom({
position: 'lt', //left top，左上角
showZoomNum: true, //显示zoom值
}),
);
};
// 12,[116.171731,40.06682]
//获取当前定位
getLocation = () => {
/***************************************
由于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,
});
//图层切换控件
this.map.addControl(
new BasicControl.LayerSwitcher({
position: 'rt', //right top，右上角
}),
);
});
};
//通过搜索来获取定位信息
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);
});
});
};
map.addControl(geolocation);
geolocation.getCurrentPosition();
// /**
// * 只查询到城市
// */
// geolocation.getCityInfo((status, result) => {
// })
AMap.event.addListener(geolocation, 'complete', onComplete.bind(this)); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//拖拽位置选择
dragSiteSelection = (zoom, center) => {
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() {
const { json } = this.props;
return (
<div id="GetLocation" style={{ display: this.props.showMap ? 'block' : 'none' }}>
<input
id="pickerInput"
className={styles.top}
style={{ width: 200 }}
placeholder="输入关键字选取地点"
/>
<div
id={this.mapId}
className={styles.map}
style={{ width: json.width, height: json.height }}
/>
</div>
);
}
//解析定位结果
function onComplete(data) {
console.log(data);
if(!this.props.showMap){
let locationMsg = {
lng: data.position.lng, // 经度
lat: data.position.lat, // 维度
address: data.formattedAddress, // 详细地址
addressComponent: data.addressComponent,
// nearestJunction: positionResult.nearestJunction, // 最近的路口
// nearestRoad: positionResult.nearestRoad, // 最近的路
// nearestPOI: positionResult.nearestPOI, // 最近的POI
};
this.props.getLocationMsg(locationMsg);
}else{
let poi = data.position.toString().split(',');
// 需要通过改变this指向
this.dragSiteSelection(15, poi);
}
}
//解析定位错误信息
function onError(data) {
console.log('error', data);
var str = '定位失败,';
str += '错误信息：';
switch (data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
alert(
'定位失败,请在设置==》应用==》权限管理==》位置信息权限==>打开应用定位权限',
);
}
};
//通过搜索来获取定位信息
searchSiteSelection = () => {
const AMapUI = window.AMapUI;
if (!AMapUI) {
return false;
}
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;
one_stop_public/location/index.jsx
浏览文件 @ d63b9291
......@@ -28,10 +28,10 @@ export default class location extends Component {
//在组件从 DOM 中移除的时候立刻被调用。
componentWillUnmount = () => {};
getLocationMsg = locationMsg => {
console.log(locationMsg);
//如果不为空的话显示提示
this.setState({ loading: true }, () => {
if (Object.keys(locationMsg).length !== 0) {
this.props.onChange(locationMsg);
this.setState({
locationMsg: locationMsg,
loading: false,
......@@ -101,9 +101,9 @@ export default class location extends Component {
showMap={this.props.showMap}
params={params}
/>
<div style={{ display: showLocation ? 'block' : 'none' }}>
{' '}
<Popconfirm
<div style={{ display: 'block'}}>
{locationMsg?.address || ''}
{/* <Popconfirm
title={btn ? '正在定位中' : locationMsg.address}
onConfirm={this.confirm}
okText="提交"
......@@ -118,7 +118,7 @@ export default class location extends Component {
>
{this.props.btnName}
</Button>
</Popconfirm>
</Popconfirm>*/}
</div>
</div>
);
......
one_stop_public/tableCompon/index.jsx
浏览文件 @ d63b9291
......@@ -2511,8 +2511,8 @@ export default class tableCom extends Component {
<span>
<LocationCom
get={get}
btnName={json.btnName}
btnSucName={json.btnSucName}
btnName={json.btnName || '定位'}
btnSucName={json.btnSucName || '定位成功'}
width={json.width}
json={json}
showMap={json.showMap}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论