sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

搜索联想

Browse Source
This commit is contained in:
SmileXin 2025-02-11 00:49:29 +08:00
parent 71fcf04ff3
commit 054e8b629a
1 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/pages/BaseMap/index.js
View File

@ -84,6 +84,7 @@ class BaseMap extends React.Component {
deletePointId: '',
pop: null,
removeMarker: null,
autoComplete: null, // 地图搜索提示
}
}
startLoading = () => {
@ -110,6 +111,7 @@ class BaseMap extends React.Component {
style: 'light',
center: [118.405285, 39.904989],
zoom: 3,
plugin: ['AMap.AutoComplete','AMap.PlaceSearch'],
})
});
@ -128,38 +130,55 @@ class BaseMap extends React.Component {
}
let can = document.getElementsByClassName('amap-layer')[0];
can.addEventListener('mousedown', (e) => {
console.log('mousedown',can);
console.log('mousedown', can);
// can.className = 'amap-layer cursor-grab';
can.className = can.className.replace("amap-layer","amap-layer cursor-grab");
can.className = can.className.replace("amap-layer", "amap-layer cursor-grab");
can.addEventListener('mouseup', (e) => {
can.className = can.className.replace("cursor-grab"," ");
can.className = can.className.replace("cursor-grab", " ");
// console.log('mouseup',can.className.replace("cursor-grab"," "));
});
})
});
// 地图搜索提示功能
// scene.on('loaded', () => {
// // AutoComplete 插件
// window.AMap.plugin(['AMap.Autocomplete'], () => {
// // Autocomplete 实例配置
// const autoOptions = {
// city: '全国', //城市，默认全国
// input: 'tipinput' //使用联想输入的input的id
// };
// // 创建Autocomplete对象
// const autoComplete = new AMap.AutoComplete(autoOptions);
// });
scene.on('loaded', () => {
// // scene.map.plugin(['AMap.Autocomplete'], () => {
// // // Autocomplete 实例配置
// // const autoOptions = {
// // city: '全国', //城市，默认全国
// // input: 'tipinput' //使用联想输入的input的id
// // };
// // // 创建Autocomplete对象
// // const autoComplete = new AMap.autoComplete(autoOptions);
// // });
// })
// AutoComplete 插件
window.AMap.plugin(['AMap.AutoComplete','AMap.PlaceSearch'], () => {
// Autocomplete 实例配置
const autoOptions = {
city: '全国', //城市，默认全国
input: "tipinput", //使用联想输入的input的id
};
// 创建Autocomplete对象
const autoComplete = new AMap.AutoComplete(autoOptions);
// 监听输入框的focus事件，否则总是不触发提示
document.getElementById('tipinput').addEventListener('focus', (e) => {
autoComplete.search(e.target.value, (status, result) => {
// 搜索成功时，result即是对应的匹配数据
// console.log('result', result);
});
});
this.state.autoComplete = autoComplete;
// 监听选中事件，将选中的地址信息显示在输入框中
autoComplete.on('select', (e) => {
console.log('select', e);
this.setState({
inputContent: e.poi.name,
})
})
});
// scene.map.plugin(['AMap.Autocomplete'], () => {
// // Autocomplete 实例配置
// const autoOptions = {
// city: '全国', //城市，默认全国
// input: 'tipinput' //使用联想输入的input的id
// };
// // 创建Autocomplete对象
// const autoComplete = new AMap.autoComplete(autoOptions);
// });
})
}
//设置地图省份级别位置
@ -625,6 +644,7 @@ class BaseMap extends React.Component {
return false
}
return getDistrictByCityApi({ cityAdcode: cityAdcode }).then((e) => {
console.log("cityadcode", e.data)
let districtData = e.data;
let districtList = [];
for (var i in districtData) {
@ -1090,6 +1110,7 @@ class BaseMap extends React.Component {
placeholder={this.state.inputExplainValue}
value={this.state.inputContent}
onChange={(e) => {
// console.log("input", e.target.value)
this.setState({
inputContent: e.target.value
})