前言准备:
首先去百度地图开放平台创建应用获取账号ak,引入脚本加载sdk
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的ak"></script>
一.生成地图
export default function Map() {
useEffect(() => {
// 使用浏览器的h5定位api获取经纬度然后用百度地图创建地图
window.navigator.geolocation.getCurrentPosition(position => {
const { longitude, latitude } = position.coords;
const map = new window.BMapGL.Map("container");
const point = new window.BMapGL.Point(longitude, latitude);
map.centerAndZoom(point, 15);
})
}, [])
return (
<div className="map">
<div id="container"></div>
</div>
)
}
二.定位获取当前城市名字
const myCity = new window.BMapGL.LocalCity();
myCity.get(result => {
this.setState(() => {
return {
city: result.name
}
})
})