由于论文需要从百度地图上获取部分数据,所用用到百度地图JavaScript api 出现问题
问题:
在对兴趣点(根据给定经纬度生成)进行范围搜索时,所得到的结果与兴趣点并不匹配,百度到的结果说是由于百度地图是异步解析造成的。
本人现学现用js不是很熟悉,特此请教大神,谢谢。附代码(主要是测试用的)
<html>
<head>
<title>批量获取建成环境数量数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--让页面以正常比例显示并且禁止用户缩放页面的操作-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--调用百度API接口-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=LCvREYhTrmKYPPcjIx08XVqX" type="text/javascript"></script>
<!--设置页面的显示样式-->
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" value="搜索" onclick="xunhuan()" /></br>
搜索结果:<textarea id="result" cols=50 rows=10></textarea>
</div>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(121.480237,31.2363),15);
map.enableScrollWheelZoom(true);
//search 搜索函数,设定中心点坐标(mCenter),搜索内容(酒店),搜索半径(1000),通过百度地图JavaScript Api的类和方法,获取感兴趣内容的数量;
function search(lon,lat){
//经度lon,纬度lat,BMap.Point(百度地图定义)生成点
var mCenter = new BMap.Point(lon,lat); //BMap.LocalSearch(百度定义)生成一个实例local;
var local = new BMap.LocalSearch(mCenter,{renderOptions:{map:map,autoViewport: false},onSearchComplete:myFun});
//local实例调用searchNearby方法(百度定义)
local.searchNearby('酒店',mCenter,1000);
//函数myFun(),获取感兴趣对象的数量p
function myFun(){
//getResults().getNumPois()都是百度地图定义
var p = local.getResults().getNumPois();
document.getElementById("result").innerHTML += p+'\n';
//问题就在这,p无法return,所以我只能通过document.getElementById或者alert()呈现在页面上
console.log(p);
} }
//search函数在搜索一个点的时候,没问题
//但是当我想利用循环搜索多个点的时候,得到的结果和坐标不匹配,运行10次,得到10个不同的数列
var adds = [
{name: "莘庄",lon:121.391623,lat:31.116581},{name: "外环路",lon:121.399814,lat:31.126929},
{name: "莲花路",lon:121.409334,lat:31.136734},{name: "锦江乐园",lon:121.42068,lat:31.148312},
{name: "上海南站",lon:121.4367085,lat:31.1604175},{name: "漕宝路",lon:121.441499,lat:31.174518},
{name: "上海体育馆",lon:121.443408,lat:31.1888225},{name: "徐家汇",lon:121.4434557,lat:31.20076567},
{name: "衡山路",lon:121.45316,lat:31.211335},{name: "常熟路",lon:121.4566255,lat:31.219974}
];
function xunhuan(){
//数组adds中存放着10个点,包括名称、经度、纬度;
//利用循环对数组adds进行遍历,生成10个点,并调用search()函数对这个10个点搜索
for(i = 0;i<adds.length;i++){
var lon = Number(adds[i].lon);
var lat = Number(adds[i].lat);
search(lon,lat);
}
}</script>
</body>
</html>
问题:
在对兴趣点(根据给定经纬度生成)进行范围搜索时,所得到的结果与兴趣点并不匹配,百度到的结果说是由于百度地图是异步解析造成的。
本人现学现用js不是很熟悉,特此请教大神,谢谢。附代码(主要是测试用的)
<html>
<head>
<title>批量获取建成环境数量数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--让页面以正常比例显示并且禁止用户缩放页面的操作-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--调用百度API接口-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=LCvREYhTrmKYPPcjIx08XVqX" type="text/javascript"></script>
<!--设置页面的显示样式-->
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" value="搜索" onclick="xunhuan()" /></br>
搜索结果:<textarea id="result" cols=50 rows=10></textarea>
</div>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(121.480237,31.2363),15);
map.enableScrollWheelZoom(true);
//search 搜索函数,设定中心点坐标(mCenter),搜索内容(酒店),搜索半径(1000),通过百度地图JavaScript Api的类和方法,获取感兴趣内容的数量;
function search(lon,lat){
//经度lon,纬度lat,BMap.Point(百度地图定义)生成点
var mCenter = new BMap.Point(lon,lat); //BMap.LocalSearch(百度定义)生成一个实例local;
var local = new BMap.LocalSearch(mCenter,{renderOptions:{map:map,autoViewport: false},onSearchComplete:myFun});
//local实例调用searchNearby方法(百度定义)
local.searchNearby('酒店',mCenter,1000);
//函数myFun(),获取感兴趣对象的数量p
function myFun(){
//getResults().getNumPois()都是百度地图定义
var p = local.getResults().getNumPois();
document.getElementById("result").innerHTML += p+'\n';
//问题就在这,p无法return,所以我只能通过document.getElementById或者alert()呈现在页面上
console.log(p);
} }
//search函数在搜索一个点的时候,没问题
//但是当我想利用循环搜索多个点的时候,得到的结果和坐标不匹配,运行10次,得到10个不同的数列
var adds = [
{name: "莘庄",lon:121.391623,lat:31.116581},{name: "外环路",lon:121.399814,lat:31.126929},
{name: "莲花路",lon:121.409334,lat:31.136734},{name: "锦江乐园",lon:121.42068,lat:31.148312},
{name: "上海南站",lon:121.4367085,lat:31.1604175},{name: "漕宝路",lon:121.441499,lat:31.174518},
{name: "上海体育馆",lon:121.443408,lat:31.1888225},{name: "徐家汇",lon:121.4434557,lat:31.20076567},
{name: "衡山路",lon:121.45316,lat:31.211335},{name: "常熟路",lon:121.4566255,lat:31.219974}
];
function xunhuan(){
//数组adds中存放着10个点,包括名称、经度、纬度;
//利用循环对数组adds进行遍历,生成10个点,并调用search()函数对这个10个点搜索
for(i = 0;i<adds.length;i++){
var lon = Number(adds[i].lon);
var lat = Number(adds[i].lat);
search(lon,lat);
}
}</script>
</body>
</html>
function search(lon, lat,callback) {
var mCenter = new BMap.Point(lon, lat);
var local = new BMap.LocalSearch(mCenter, { renderOptions: { map: map, autoViewport: false }, onSearchComplete: myFun });
local.searchNearby('酒店', mCenter, 1000);
function myFun() {
var p = local.getResults().getNumPois();
callback(p)
} }
function xunhuan() {
for (i = 0; i < adds.length; i++) {
var lon = Number(adds[i].lon);
var lat = Number(adds[i].lat);
search(lon, lat, function (p) {
alert(JSON.stringify(p)) });
}
}Web开发学习资料推荐
JavaScript apply与call的用法意义及区别
javascript生成二维码