国际会议网站建设,网线水晶头排线图片,整站策划营销型网站建设网站优化,网络投票怎么做地名检索移动到指定坐标
需求
在输入框中搜索#xff0c;在下拉列表中浮动#xff0c;右侧出现高亮的列表集。选中之后移动到指定坐标。 技术点
官网地址#xff1a; JavaScript API - 快速入门 | 百度地图API SDK
开发文档#xff1a;百度地图JSAPI 3.0类参考
实现
…地名检索移动到指定坐标
需求
在输入框中搜索在下拉列表中浮动右侧出现高亮的列表集。选中之后移动到指定坐标。 技术点
官网地址 JavaScript API - 快速入门 | 百度地图API SDK
开发文档百度地图JSAPI 3.0类参考
实现
第一步在public的index.html中引入
script srchttp://api.map.baidu.com/api?v3.0akak值 typetext/javascript/script
第二步组件中使用
templatediv styledisplay: flexdiv!-- 地图 --div idmap/div!-- 搜索框 --div idr-result请输入:input typetext idsuggestId size20 value百度 stylewidth:150px; //div/div!-- 右侧高亮值列表 --ul classlistli v-for(item,index) in list :keyindexp{{ item.index }}: {{ item.val }}/p/li/ul/div
/templatescript
export default {data() {return {map: null,point: null,list: []};},mounted() {let that thisthis.map new BMap.Map(map);this.point new BMap.Point(116.8414, 39.925)this.map.centerAndZoom(this.point, 17);this.map.enableScrollWheelZoom();//建立一个自动完成的对象var ac new BMap.Autocomplete({ input : suggestId,location : this.map});//鼠标hover下拉列表ac.addEventListener(onhighlight, function(e) { let val e.toitem.valuethat.list.push({index: e.toitem.index,val: val.province val.city val.district val.street val.business})});// 鼠标点击下拉列表ac.addEventListener(onconfirm, function(e) { var v e.item.value;var keyword v.province v.city v.district v.street v.business;//清除地图上所有覆盖物that.map.clearOverlays(); //智能搜索var local new BMap.LocalSearch(that.map, { onSearchComplete: function (){var p local.getResults().getPoi(0).point; //获取第一个智能搜索的结果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p)); //添加标注}});local.search(keyword);});},
};
/scriptstyle
#map {width: 300px;height: 300px;
}
/style
解析
设置一个自动完成类
input typetext idsuggestId value百度//div
//建立一个自动完成的对象
var ac new BMap.Autocomplete({ input : suggestId,location : this.map
}); 下拉列表展示悬浮后右侧展示高亮值的列表
//鼠标hover下拉列表
ac.addEventListener(onhighlight, function(e) { let val e.toitem.valuethat.list.push({index: e.toitem.index,val: val.province val.city val.district val.street val.business})
}); onhighlight事件的返回值e 下拉列表显示后点击某一项进行智能搜索
// 鼠标点击下拉列表
ac.addEventListener(onconfirm, function(e) { var v e.item.value;var keyword v.province v.city v.district v.street v.business;//清除地图上所有覆盖物that.map.clearOverlays(); //智能搜索var local new BMap.LocalSearch(that.map, { onSearchComplete: function (){var p local.getResults().getPoi(0).point; //获取第一个智能搜索的结果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p)); //添加标注}});local.search(keyword);
}); 圆形区域内检索
需求
在圆形区域内检索每页5条搜索结果。遍历所有结果后得到全部结果然后添加所有的marker点。 技术点
官网地址 JavaScript API - 快速入门 | 百度地图API SDK
开发文档百度地图JSAPI 3.0类参考
实现
第一步在public的index.html中引入
script srchttp://api.map.baidu.com/api?v3.0akak值 typetext/javascript/script
第二步组件中使用
templatedivdiv idmap/divp{{ info }}/p/div
/templatescript
export default {data() {return {map: null,point: null,info: };},mounted() {let that thisthis.map new BMap.Map(map);this.point new BMap.Point(116.331398,39.897445)this.map.centerAndZoom(this.point, 17);this.map.enableScrollWheelZoom();// 范围var circle new BMap.Circle(this.point, 1000, {fillColor:blue, strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});that.map.addOverlay(circle);circle.disableMassClear();// 检索点var ResultArray [];var local new BMap.LocalSearch(that.map,{renderOptions : { map : that.map,},pageCapacity : 5,onMarkersSet:function (array) { console.log(标注添加完成后,array);},onInfoHtmlSet:function (LocalResultPoi) { console.log(标注气泡内容创建后,LocalResultPoi);},onResultsHtmlSet:function (element) {console.log(结果列表添加完成后,element);},onSearchComplete : function(results) {console.log(检索完成后,results)// 获取当前搜索总共有多少条结果var totalPages results.getNumPages();//总页数var currPage results.getPageIndex();// 当前第几页if (currPage totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage 1); } else {// 已经到达最后一页结果ResultArray.push(...local.getResults().Ir);that.map.clearOverlays();for (var store of ResultArray){var marker new BMap.Marker(store.point);that.map.addOverlay(marker);}that.info 全部结果有 ResultArray.length ------原本搜索结果有 results.getNumPois() ------最近检索poi条数 results.getCurrentNumPois()}},});local.searchNearby(餐饮,that.point,1000);},
};
/script
style
#map {width: 1300px;height: 1300px;
}
/style
解析
在地图中先绘制圆形区域 circle.disableMassClear(); 保留这块覆盖物不被删除 // 范围
var circle new BMap.Circle(this.point, 1000, {fillColor:blue, strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3
});
that.map.addOverlay(circle);
circle.disableMassClear();
onMarkersSet 检索完成后 onInfoHtmlSet 标注气泡内容创建后 onMarkersSet 标注添加完成后 获取当前搜索总共有多少条结果 pageCapacity : 5, 每页展示条数 // 获取当前搜索总共有多少条结果
var totalPages results.getNumPages();//总页数
var currPage results.getPageIndex();// 当前第几页
if (currPage totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage 1);
} else {// 已经到达最后一页结果ResultArray.push(...local.getResults().Ir);that.map.clearOverlays();for (var store of ResultArray){var marker new BMap.Marker(store.point);that.map.addOverlay(marker);}that.info 全部结果有 ResultArray.length ------原本搜索结果有 results.getNumPois() ------最近检索poi条数 results.getCurrentNumPois()
}
