react調用百度api獲取地理位置和導航

第一步
先引入百度api

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=81wpaEGlBjPM4KBAER0jkpg6QlIMupWu" ></script>

第二部
掛載到組件

componentDidMount() {
        const _this=this;
        var BMap = window.BMap;
        var geoc = new BMap.Geocoder();
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            geoc.getLocation(r.point, function (rs) {
                console.log(rs)   //具體信息可以打印出來看一下，根據需求取值     經緯度，城市，街道等等
                var addComp = rs.addressComponents;
                let cityName = addComp.city;
                _this.setState({
                    cityName:cityName,  //城市名
                })
            });
        });
    }  

導航
點擊跳轉到百度頁面
window.location.href = “http://api.map.baidu.com/marker?location=” + lat + “,” + lng + “&title=” + titleName + “&content=” +content+ “&output=html”
lat:緯度座標 //用戶起始位置
lng:經度座標 //用戶起始位置
titleName:定位位置顯示的標題，一般爲定位地點的名稱 //用戶目標位置
content:內容介紹，可寫地點地址或者簡介等。 //用戶目標位置