我们在js中调用百度地图的时候或许会遇到一个问题,设置的变量在myGeo.getPoint()这个方法中会出现取不到值的情况,究其原因,调用百度地图使用的是异步刷新,但是无论是在js文件里还是在html页面写的脚本,都不会停下来等待异步刷新结束再执行后面的代码,这样就会造成一个问题,在myGeo.getPoint()这个方法中获取到了经纬度信息,但是后面渲染到页面的时候会出现没有赋值的情况,解决方法也很简单,其一是把异步请求改为同步请求,但是百度地图不适用这种方法,那么久有了第二中方法,适用定时器来进行刷新,具体解决方案:
<script type="text/javascript">
//所有的功能代码都是从这里开始
var map = new BMapGL.Map("myMap");
map.centerAndZoom(地图中心点, 15);
//声明四个变量,保存出发点和结束点的经纬度信息,直接使用两个变量保存点也可以
var slng = 0, slat = 0, elng = 0, elat = 0;
var myGeo = new BMapGL.Geocoder();
myGeo.getPoint(
startAddress,
function (point) {
//在方法中给变量赋值
slng = point.lng;
slat = point.lat;
map.addOverlay(new BMapGL.Marker(point));
map.centerAndZoom(point, 15);
},
map
);
myGeo.getPoint(
endAddress,
function (point) {
elng = point.lng;
elat = point.lat;
map.addOverlay(new BMapGL.Marker(point));
map.centerAndZoom(point, 15);
},
map
);
//驾车导航
function creatLine() {
//在此处判断是否赋值,如果赋值成功,异步刷新回调,那么四个值均不为初始值,若有值没有赋值成功则使用定时器重复刷新此函数
if (slng != 0 && slat != 0 && elng != 0 && elat != 0) {
//创建开始点和结束点,如果在前面不是获取经纬度,而是直接获取点,那么可以省略这一步
var start = new BMapGL.Point(slng, slat), end = new BMapGL.Point(elng, elat);
//渲染驾车路线
var driving = new BMapGL.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true
}
});
driving.search(start, end);
} else {
//如果没有赋值,则重复刷新此函数代码,直到赋值成功完成渲染
setTimeout("creatLine()", 100);
}
}
creatLine();
</script>
使用次方法可以解决百度地图调用时刷新参数取值问题。