利用百度地图api，在地图上设置一个标记点，以标记点为圆心，搜索不同半径范围内的覆盖物 |
您所在的位置：网站首页 › 百度地图标记功能 › 利用百度地图api，在地图上设置一个标记点，以标记点为圆心，搜索不同半径范围内的覆盖物 |
利用百度地图api，在地图上设置一个标记点，以标记点为圆心，搜索不同半径范围内的覆盖物
|
利用百度地图api，通过在输入框（带自动填充）输入标记点，然后给标记点设置了一个信息窗口，信息窗口中可以选择搜索的半径范围，分别为1，2，3，5，10km。通过下拉框选择好半径范围后，自动画出一个对应半径的圆，并显示出在范围内的覆盖物（覆盖物是随机生成的，如有需要可以通过后台返回自己的数据并生成对应的覆盖物），点击覆盖物弹出自定义的覆盖物信息窗口。效果图如下：
相关实现如下： 1.引入相关的csscss文件下载：https://download.csdn.net/download/qq_27387133/12111065 2.相关的js代码mybaidu.js var map = new BMap.Map("allmap",{minZoom:4,maxZoom:18}); var point = new BMap.Point(113.089729,23.015756); var startPoint,endPoint,pp,pp2,lastPoint,lastPoint2; var ppMarker,ppMarker2; map.enableScrollWheelZoom(true); map.centerAndZoom(point, 16); var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例 map.addTileLayer(traffic); function G(id) { return document.getElementById(id); } var ac = new BMap.Autocomplete( //建立一个自动完成的对象 {"input" : "suggestId" ,"location" : map }); ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItemindex = " + e.fromitem.index + "value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "ToItemindex = " + e.toitem.index + "value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirmindex = " + e.item.index + "myValue = " + myValue; setPlace(); }); window.circleArr = []; window.potentialPointArr = []; function setPlace(){ var opts = { width : 400, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 }; var content = "" content +="请选择搜索半径;;请选择1km2km3km" + "5km10km" content +=""; content +=""; lastPoint = pp; function myFun(){ myRemoveOverlay(lastPoint); pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 16); ppMarker =new BMap.Marker(pp); var infoWindow = new BMap.InfoWindow(content,opts); ppMarker.addEventListener("click", function(){ map.openInfoWindow(infoWindow,pp); //开启信息窗口 setTimeout(() => { $(document).on("change","#area_select",function () { for(var i=0;i |
【本文地址】
今日新闻 |
推荐新闻 |