地图显示周边服务

<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" οnclick="mapSearch(this.innerHTML,this)">公交</a></span>
                          <span><a class="hos" οnclick="mapSearch(this.innerHTML,this)">医院</a></span>
                           <span><a class="cy" οnclick="mapSearch(this.innerHTML,this)">餐饮</a></span>
                           <span><a class="shop" οnclick="mapSearch(this.innerHTML,this)">购物</a></span>
                           <span><a class="bank" οnclick="mapSearch(this.innerHTML,this)">银行</a></span>
                           <span><a class="school" οnclick="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" οnchange="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>

样式不放了

转载于:https://my.oschina.net/u/3217862/blog/1057765