文档章节

地图显示周边服务

 小琴子_小白
发布于 2017/06/28 14:55
字数 739
阅读 3
收藏 0

<script>
    var map;
    var round;
    function mapSearch(str,obj){
        round = $("#round").val();     //圆的范围
        var lng=$("#jd").val();            //经度
        var lat=$("#wd").val();            //纬度
        if(obj){
            obj.parentNode.setAttribute("class", "on");
            var p = obj.parentNode.parentNode.children;
            for(var i =0;i<p.length;i++) {
                if(p[i] != obj.parentNode) p[i].setAttribute("class", "");
            }
        }
        map = new BMap.Map("nearmap");
        if(lng>0&&lat>0){
            map.centerAndZoom(new BMap.Point(lng, lat), 15);//定位地图中心点
        }else{
            //创建地址解析器实例  
            var myGeo = new BMap.Geocoder();  
            myGeo.getPoint("六安",function(point){
                if (point) {
                    map.centerAndZoom(point, 16); 
                    map.addControl(new BMap.NavigationControl());  
                    map.addContextMenu(new BMap.ContextMenu());
                }
            },"六安市");
    }


    // map.enableScrollWheelZoom();//开启滚轮缩放
    map.addControl(new BMap.NavigationControl());//开启缩放图标  
    //指定圆形区域搜索 单位 米
    var circle = new BMap.Circle(new BMap.Point(lng, lat),round,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);
    var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, panel: "result", autoViewport: false}});  
    var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
    local.searchInBounds(str,bounds);  
            
    //var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(lng,lat),"");
    //map.addOverlay(myCompOverlay);
}    

function roundSearch(){
    var p = $(".nearnav span[class=on] a");
    var str = p.html();
    mapSearch(str,p.parentNode);
}

/**
* 得到圆的内接正方形bounds
* @param {Point} centerPoi 圆形范围的圆心
* @param {Number} r 圆形范围的半径
* @return 无返回值   
*/ 
function getSquareBounds(centerPoi,r){
  var a = Math.sqrt(2) * r; //正方形边长
  mPoi = getMecator(centerPoi);
  var x0 = mPoi.x, y0 = mPoi.y;
  var x1 = x0 + a / 2 , y1 = y0 + a / 2;//东北点
  var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南点
  
  var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
  return new BMap.Bounds(sw, ne);        
  
}
//根据球面坐标获得平面坐标。
function getMecator(poi){
  return map.getMapType().getProjection().lngLatToPoint(poi);
}
//根据平面坐标获得球面坐标。
function getPoi(mecator){
  return map.getMapType().getProjection().pointToLngLat(mecator);
}

function ComplexCustomOverlay(point, text){
     this._point = point;
     this._text = text;
     }
     ComplexCustomOverlay.prototype = new BMap.Overlay();
     ComplexCustomOverlay.prototype.initialize = function(map){
     this._map = map;
     var div = this._div = document.createElement("div");
     div.style.position = "absolute";
     div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
     div.style.backgroundColor = "#EE5D5B";
     div.style.border = "1px solid #BC3B3A";
     div.style.color = "white";
     div.style.height = "18px";
     div.style.padding = "2px";
     div.style.lineHeight = "18px";
     div.style.whiteSpace = "nowrap";
     div.style.MozUserSelect = "none";
     div.style.fontSize = "12px"
     div.appendChild(document.createTextNode(this._text));

     var arrow = this._arrow = document.createElement("div");
     arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
     arrow.style.position = "absolute";
     arrow.style.width = "11px";
     arrow.style.height = "10px";
     arrow.style.top = "22px";
     arrow.style.left = "10px";
     arrow.style.overflow = "hidden";
     div.appendChild(arrow);

     div.onmouseover = function(){
     this.style.backgroundColor = "#6BADCA";
     this.style.borderColor = "#0000ff";
     arrow.style.backgroundPosition = "0px -20px";
     }

     div.onmouseout = function(){
     this.style.backgroundColor = "#EE5D5B";
     this.style.borderColor = "#BC3B3A";
     arrow.style.backgroundPosition = "0px 0px";
     }
       div.style.cursor="pointer";
     
     map.getPanes().labelPane.appendChild(div);
     return div;
     }
     ComplexCustomOverlay.prototype.draw = function(){
     var map = this._map;
     var pixel = map.pointToOverlayPixel(this._point);
     this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
     this._div.style.top = pixel.y - 30 + "px";
     }
</script>

正文
        <div class="main" style="height:auto;">
            <h1 style="margin-top: 10px;color: #000000;"><span style='font-weight: bold;'>&nbsp;位置及周边设施</span></h1>
            <div class="lp-detail mgt20" style="margin-top: 0px;">
                  <div class="pro_top">
                    <!-- 地图交通 -->
                    <div class="nearnav" style="margin-left:0px;">
                           <span style="width:54px;" class="on"><a class="bus" onclick="mapSearch(this.innerHTML,this)">公交</a></span>
                          <span><a class="hos" onclick="mapSearch(this.innerHTML,this)">医院</a></span>
                           <span><a class="cy" onclick="mapSearch(this.innerHTML,this)">餐饮</a></span>
                           <span><a class="shop" onclick="mapSearch(this.innerHTML,this)">购物</a></span>
                           <span><a class="bank" onclick="mapSearch(this.innerHTML,this)">银行</a></span>
                           <span><a class="school" onclick="mapSearch(this.innerHTML,this)">学校</a></span>
                    </div>
                    <div class="nearcon clearfix">
                        <div class="fleft" id="map" style="width:100%">
                            <input type="hidden" id="jd" value="0"/>
                            <input type="hidden" id="wd" value="0"/>
                            <div id="nearmap" style="margin-left:-17px;margin-top:0px;width:114%;height:350px;"></div>
                            <div style="width:78%;"> 
                            <font style="color: red;width:100%;">
                            <!--<select id="round" onchange="roundSearch()" width="10px">
                                 <option value="1000" selected>1公里</option>
                                 <option value="1500">1.5公里</option>
                                 <option value="2000">2公里</option>
                            </select>-->
                            <input id="round"  name="round" type="hidden" value="1000" />
                            <div style="margin-top:10px;"><span style="font-size: 14px;"><b>地点搜索结果...</b></span></div>
                            </font>
                            <div id="result" style="margin-left:0px;width:100%;height:auto;font-size:18px"> </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>    
            </div>

样式不放了

© 著作权归作者所有

粉丝 0
博文 13
码字总数 5035
作品 0
苏州
私信 提问
android 地理位置共享服务

最近公司项目需要做一个。地理位置共享服务功能! 需求大意就是:打开程序,定位自己所在地理位置,然后去匹配当前自己所在位置周边1公里内的各种服务! 上网了解了些一些资料,大概的实现过...

小冰说
2012/05/29
0
2
酸奶小妹GIS/mapTool

应用的名称 公众号地图工具 应用说明及使用场景 现在越来越多的商户都有自己的实体店,比如连锁超市(家乐福,沃尔玛),连锁餐饮(KFC,麦当劳),连锁酒店(7天,汉庭,全季,如家),菜鸟...

酸奶小妹GIS
2014/07/30
0
0
交付版本计划

根据系统结构图中关于搜索和地图相关用例,每1周左右为一个交付周期,每次交付版本所包含的用例如下: 交付版本0.1:包括搜索全美在售房产和地图结果(不包括:显示非在售房源和周边信息);...

zxssehlo
2015/08/11
1
1
BMap:WEB 服务API

ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的检索数据。用户可以基于此开发JavaScrip...

吞吞吐吐的
2017/11/07
0
0
每天导航超4亿公里,百度地图整合AI功能

9月19日,百度地图召开“AI出行更简单 百度地图十一全民畅行节”发布会上。百度地图在AI技术平台体系(AIG)内,越来越深度地与AI结合,更加顺畅地为百度地图进行定制化AI,同时各方资源得到...

AI科技大本营
2018/09/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
2
0
高德API入门教程

项目需求 1、实现打开地图就能定位到中心显示标注点 2、点击标注显示保利可爱岛的详细信息 3、实现导航功能 <!doctype html><html><head> <meta charset="utf-8"> <meta http-......

我叫小糖主
昨天
7
0
聊聊Elasticsearch的MonitorService

序 本文主要研究一下Elasticsearch的MonitorService MonitorService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/MonitorService.java public class MonitorServic......

go4it
昨天
3
0
二、Docker

1、Docker - The TLDR(Too Long,Don't Read,Linxu 终端工具 ) Docker是在Linux和Windows上运行的软件。它创建、管理和编排容器。该软件以开源方式开发,在Github上作为Moby开源项目的一部分。...

倪伟伟
昨天
3
0
Python猫荐书系列之七:Python入门书籍有哪些?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/ArN-6mLPzPT8Zoq0Na_tsg 最近,猫哥的 Python 技术学习群里进来了几位比较特殊的同学:一...

豌豆花下猫
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部