import React, { useEffect, useState } from 'react';
import { FloatingPanel, List } from 'antd-mobile';
import './App.css'
export default function Index() {
const [img, setImg] = useState('保定市莲池区南二环河北科技学院皇悦酒店')
const [tode, setTode] = useState()
useEffect(() => {
const map = new window.BMapGL.Map('index-top');
const point = new window.BMapGL.Point(113.67661912165312,34.75940256033543);
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom(true);
// var label = new window.BMapGL.Label('哈哈哈', { // 创建文本标注
// position: point, // 设置标注的地理位置
// offset: new window.BMapGL.Size(20, 30) // 设置标注的偏移量
// })
// map.addOverlay(label);
// 设置地图事件
map.addEventListener('click', function (e) {
console.log(e.latlng,'23');
});
var myGeo = new window.BMapGL.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint('保定市莲池区南二环河北科技学院皇悦酒店', function (point) {
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new window.BMapGL.Marker(point, { title: '保定市莲池区南二环河北科技学院皇悦酒店' }))
} else {
alert('您选择的地址没有解析到结果!');
}
}, '河南省')
}, [])
const dian = (value) => {
console.log(value);
const map = new window.BMapGL.Map('index-top');
map.enableScrollWheelZoom(true);
var myGeo = new window.BMapGL.Geocoder(value);
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(value, function (point) {
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new window.BMapGL.Marker(point, { title: value }))
} else {
alert('您选择的地址没有解析到结果!');
}
}, value)
}
const [list, setList] = useState([
{ id: Math.random(), name: '南京' },
{ id: Math.random(), name: '上海' },
{ id: Math.random(), name: '北京' },
{ id: Math.random(), name: '南erg京' },
{ id: Math.random(), name: '南tr京' },
])
const anchors = [100, 260];
const hh = (value, e) => {
if (e.keyCode === 13) {
// console.log(value,67);
dian(value)
}
}
return (
<div className='index'>
<div id="index-top">
</div>
<div >
<FloatingPanel anchors={anchors}>
<List>
{list.map(item => {
return (
<List.Item key={item.id} onClick={() => {
setImg(item.name)
dian(item.name)
}}>{item.name}</List.Item>
)
})}
</List>
</FloatingPanel>
<hr />
<input type="text" value={tode} onKeyDown={(e) => {
hh(e.target.value, e)
}} />
</div>
</div>
)
}
百度地图展示
于 2023-07-13 17:18:31 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)