百度地图api杂记

前言准备:

首先去百度地图开放平台创建应用获取账号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
                }
            })
        })