提交 6ff85709 authored 作者: 钟是志's avatar 钟是志

百度地图api的使用

上级 8672b2fe
import React, { useState, useEffect } from 'react';
import getLocation from '@/H5Public/utils/handleLocation';
export default function Test() {
const [location, setLocation] = useState({});
const setInfo = (location) => {
setLocation(location);
};
useEffect(()=>{
getLocation(setInfo)
},[])
return (
<div id={'baiduMap'}>
{JSON.stringify(location)}
</div>
);
}
/** /**
* 使用百度地图api 获取当前用户的位置 * 使用百度地图api 获取当前用户的位置
* */ * */
export default function getLocation(){ export default function getLocation(callBack = () => {}){
if(typeof BMap == 'undefined'){ if(typeof BMap == 'undefined'){
console.log('请先加载百度api js 文件: http://api.map.baidu.com/api?v=2.0&ak=qWnwdKnruRGnojAtsZ7Cfb2g'); console.log('请先加载百度api js 文件: http://api.map.baidu.com/api?v=2.0&ak=qWnwdKnruRGnojAtsZ7Cfb2g');
return false; return false;
} }
const map = new BMap.Map('map'); const map = new BMap.Map('baiduMap');
map.centerAndZoom(new BMap.Point(121.491, 31.223), 11); const point = new BMap.Point(107.303748,34.346725);
map.centerAndZoom(point, 11);
const geolocation = new BMap.Geolocation(); const geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){ geolocation.getCurrentPosition(function(r){
if(this.getStatus() === 0) { if(this.getStatus() === 0) {
getAddress(r.point); let address = getAddress(r.point);
let mk = new BMap.Marker(r.point); let mk = new BMap.Marker(r.point);
map.addOverlay(mk); map.addOverlay(mk);
map.panTo(r.point); map.panTo(r.point);
return address;
}else{ }else{
alert('发生错误!'); console.log('发生错误!');
return false;
} }
},{enableHighAccuracy: true}); },{enableHighAccuracy: true});
...@@ -58,7 +62,7 @@ export default function getLocation(){ ...@@ -58,7 +62,7 @@ export default function getLocation(){
formValues.address = res.address; formValues.address = res.address;
formValues.lng = lng; formValues.lng = lng;
formValues.lat = lat; formValues.lat = lat;
return formValues; callBack(formValues);
}); });
} }
} }
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论