百度地图周边点

点击交通,餐饮获取周边信息,并自定义图标

达到效果虽然有点蠢

后台:主要

//处理附近点
$juxingdian  = $this->returnSquarePoint($building_info['lng'],$building_info['lat'],1) ;
//获取大厦左下右上 - 矩形
$point_str = implode(',',$juxingdian['left-bottom']).','.implode(',',$juxingdian['right-top']);
//获取周边银行
$AroundTheBank = httpGetBUildInfo($point_str,'银行',$building_info);
$AroundTheRepast = httpGetBUildInfo($point_str,'餐饮',$building_info);
$AroundTheTraffic = httpGetBUildInfo($point_str,'公交站',$building_info);
$AroundTheHotel = httpGetBUildInfo($point_str,'酒店',$building_info);
$AroundTheMetro = httpGetBUildInfo($point_str,'地铁',$building_info);
$this->assign('AroundTheBank',$AroundTheBank);
$this->assign('AroundTheBank_json',json_encode($AroundTheBank));
$this->assign('AroundTheRepast',$AroundTheRepast);
$this->assign('AroundTheRepast_json',json_encode($AroundTheRepast));
$this->assign('AroundTheHotel',$AroundTheHotel);
$this->assign('AroundTheHotel_json',json_encode($AroundTheHotel));
$this->assign('AroundTheTraffic',$AroundTheTraffic);
$this->assign('AroundTheTrafficCount',count($AroundTheTraffic));
$this->assign('AroundTheMetro',$AroundTheMetro);
$this->assign('AroundTheTrafficlist_json',json_encode(array_merge($AroundTheTraffic,$AroundTheMetro)));
$this->assign('AroundTheMetroCount',count($AroundTheMetro));
/**
* 计算两点地理坐标之间的距离
* @param  Decimal $longitude1 起点经度
* @param  Decimal $latitude1  起点纬度
* @param  Decimal $longitude2 终点经度 
* @param  Decimal $latitude2  终点纬度
* @param  Int     $unit       单位 1:米 2:公里
* @param  Int     $decimal    精度 保留小数位数
* @return Decimal
*/
function getDistance($longitude1, $latitude1, $longitude2, $latitude2, $unit=2, $decimal=2){
$EARTH_RADIUS = 6370.996; // 地球半径系数
$PI = 3.1415926;
$radLat1 = $latitude1 * $PI / 180.0;
$radLat2 = $latitude2 * $PI / 180.0;
$radLng1 = $longitude1 * $PI / 180.0;
$radLng2 = $longitude2 * $PI /180.0;
$a = $radLat1 - $radLat2;
$b = $radLng1 - $radLng2;
$distance = 2 * asin(sqrt(pow(sin($a/2),2) + cos($radLat1) * cos($radLat2) * pow(sin($b/2),2)));
$distance = $distance * $EARTH_RADIUS * 1000;
if($unit==2){
$distance = $distance / 1000;
}
return round($distance, $decimal);
}
/**
* 处理周边大厦
* @param  [type] $url [description]
* @return [type]      [description]
*/
function httpGetBUildInfo($point_str,$type_name,$building_info)
{
$url = "http://api.map.baidu.com/place/v2/search?query=".$type_name."&bounds=".$point_str.'&output=json&page_size=20&scope=2&ak=Q3icMGOqknnwYMfwhC24OodtmMKQaqUp';
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);        // SSL证书认证
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);        // 严格认证
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);     // 显示输出结果
curl_setopt($ch, CURLOPT_HEADER, false);            // 过滤HTTP头
$content = curl_exec($ch);
curl_close($ch);
$content = json_decode($content,true);
if(!empty($content) && ($content['status']==0 || $content['message']=='ok' ) ){
foreach($content['results'] as $k => $v){
$content['results'][$k]['m'] = '距离'.getDistance($building_info['lng'],$building_info['lat'],$v['location']['lng'],$v['location']['lat'],2).'km';
}
return $content['results'];
}else{
return '';
}
}
protected function returnSquarePoint($lng, $lat,$distance = 1)
{
$earthRadius = 6378.138; //地球半径,单位KM
$dlng = 2 * asin(sin($distance / (2 * $earthRadius)) / cos(deg2rad($lat)));
$dlng = rad2deg($dlng);
$dlat = $distance / $earthRadius;
$dlat = rad2deg($dlat);
return array(
'left-top' => array('lat' => $lat + $dlat, 'lng' => $lng - $dlng),
'right-top' => array('lat' => $lat + $dlat, 'lng' => $lng + $dlng),
'left-bottom' => array('lat' => $lat - $dlat, 'lng' => $lng - $dlng),
'right-bottom' => array('lat' => $lat - $dlat, 'lng' => $lng + $dlng)
);
}
protected function getjw($city){
$key = "";
$url = "http://api.map.baidu.com/geocoder?address=$city&output=json&key=Q3icMGOqknnwYMfwhC24OodtmMKQaqUp";
$result = file_get_contents($url);
$json = json_decode($result,true);
$var = $json['result']['location'];
return $var;
}

前台代码:

<!--地理位置-->
<div id="b_addr" class="b_addr">
<h3 class="houseAreaTit" style="margin-bottom: 20px;">地理位置</span></h3>
<div class="mapBox">
<div class="b_map" id="allmap" style="width:1170px;height: 500px;">
</div>
</div>
</div>
<div class="room_mapList">
<div class="maplist_nav">
<a class="act" data-show=".map_zb" href="javascript:;" onclick="zhoubian()">周边大厦</a>
<a data-show=".map_jt" href="javascript:;" onclick="jiaotong()">交通</a>
<a data-show=".map_cy" href="javascript:;" onclick="canyin()">餐饮</a>
<a data-show=".map_yh" href="javascript:;" onclick="yinhang()">银行</a>
<a data-show=".map_jd" href="javascript:;" onclick="jiudian()">酒店</a>
</div>
<div class="hidescroll">
<div class="maplist_item map_zb">
{foreach name='zhoubian' item='zhou3'}
<a class="mapitema act" href="{$zhou3.url}" target="_blank">
<h3>{$zhou3.name}</h3>
<p>共有{$zhou3.room_count}个户型在租</p>
<span><i class="iconfont iconnav"></i>距离{$zhou3.juli_info}</span>
</a>
{/foreach}
</div>
<div class="maplist_item map_jt">
<h3>地铁站{$AroundTheMetroCount}个</h3>
{foreach name='AroundTheMetro' item='Metrolist'}
<a class="mapitema act" href="javascript:;" >
<h3>{$Metrolist.name}</h3>
<p>{$Metrolist.address}</p>
<span><i class="iconfont iconnav"></i>距离{$Metrolist.m}</span>
</a>
{/foreach}
<h3>公交站{$AroundTheTrafficCount}个</h3>
{foreach name='AroundTheTraffic' item='TrafficList'}
<a class="mapitema act" href="javascript:;">
<h3>{$TrafficList.name}</h3>
<p>{$TrafficList.address}</p>
<span><i class="iconfont iconnav"></i>距离{$TrafficList.m}</span>
</a>
{/foreach}
</div>
<div class="maplist_item map_cy">
{foreach name='AroundTheRepast' item='Repastlist'}
<a class="mapitema act" href="{$Repastlist.detail_info.detail_url}" target="_blank">
<h3>{$Repastlist.name}</h3>
<p>{$Repastlist.address}</p>
<span><i class="iconfont iconnav"></i>{$Repastlist.m}</span>
</a>
{/foreach}
</div>
<div class="maplist_item map_yh">
{foreach name='AroundTheBank' item='banklist'}
<a class="mapitema act" href="{$banklist.detail_info.detail_url}" target="_blank">
<h3>{$banklist.name}</h3>
<p>{$banklist.address}</p>
<span><i class="iconfont iconnav"></i>{$banklist.m}</span>
</a>
{/foreach}
</div>
<div class="maplist_item map_jd">
{foreach name='AroundTheHotel' item='Hotellist'}
<a class="mapitema act" href="{$Hotellist.detail_info.detail_url}" target="_blank">
<h3>{$Hotellist.name}</h3>
<p>{$Hotellist.address}</p>
<span><i class="iconfont iconnav"></i>{$Hotellist.m}</span>
</a>
{/foreach}
</div>
</div>
</div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=123"></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script type="text/javascript">
var map = new BMap.Map("allmap");               // 创建Map实例
map.labelData=[];
var lng = "{$info.lng}";
var lat = "{$info.lat}";
var mPoint = new BMap.Point(lng, lat);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint,15);
zhoubian();
function inimap(){
var circle = new BMap.Circle(mPoint,1500,{fillColor:"rgba(64, 169, 255, 0.4)", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3,enableEditing:false});
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: true}});
var marker = new BMap.Marker(mPoint);
map.addOverlay(marker);
var myLabel = new BMap.Label("",{position: mPoint,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({
width: "12px",
height: "12px",
border: "0",
backgroundColor: "rgb(66, 133, 244)",
borderRadius: "50%",
cursor: "pointer",
background:"url(image/showbox.png) no-repeat"
});
var tpl="<div class='infoBox' style='width: 60px'>"+
"<div class='infoArea'><img src='"+"{$building_info.img}"+"' style='width: 180px;' alt=''><p class='name'>"+"{$building_info.name}"+"</p></div>" +
"{$building_info.area_min}"+'-'+"{$building.area_max}"+'元/㎡/月'+
"<br><i class='arrow'><i class='arrow-i'></i></i><a href='"+"{$building_url}"+"'>查看大厦详情</a></div>";
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
minHeight: "226px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
infoBox.open(mPoint);
}
function zhoubian() {
map.clearOverlays();
var labelData = [];
var labelListData ={$zhoubian4};
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.lng, data.lat);
var myLabel = new BMap.Label("",{position: point,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({width: "12px", height: "12px", border: "0", backgroundColor: "rgb(66, 133, 244)", borderRadius: "50%", cursor: "pointer", background:"url(/public/static/index/statics/img/traffic1.png) no-repeat"
});
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/building1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
labelData.push(myLabel);
var tpl="<div class='map_info' data-longitude='"+data.longitude+"' data-latitude='"+data.latitude+"' data-id='"+data.code+"'>" +
"<div class='map_info_img'><img src='"+data.img+"' " +
'" onerror="this.src=\'/public/static/index/statics/img/about.png\'" alt="" style="width:100%;">' +
"</div>"+
"<div class='map_info_msg'><h3 class='name'>"+data.name+"</h3><span> ¥"+floatval(data.price_min)+"元/㎡/月"+
" </span>" +
"<div class='map_info_btn'>" +
"<a class='btn_left' href='"+data.url+"' target='_blank'>大厦详情</a>" +
"</div></div>" +
"<div class='map_sc'></div></div>";
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var ci = 1;
myLabel.addEventListener("mouseover", function () {
if (window.lastInfoBox) {
window.lastInfoBox.close();
if(ci === 1 ){
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/building2.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
ci++;
}
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
myLabel.addEventListener("mouseout", function () {
map.removeOverlay(point);
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/building1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
ci=1;
});
});
addViewLabel(labelData);
}
function jiaotong() {
map.clearOverlays();
var labelData = [];
var labelListData ={$AroundTheTrafficlist_json};
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.location.lng, data.location.lat);
var myLabel = new BMap.Label("",{position: point,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({width: "12px", height: "12px", border: "0", backgroundColor: "rgb(66, 133, 244)", borderRadius: "50%", cursor: "pointer"
});
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/traffic1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
labelData.push(myLabel);
var tpl='<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;background-color:#FFF;color:#000width: 120px;height: 30px;display: block;border-radius: 4px;">'+data.name+'</sapn>';
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var ci = 1;
myLabel.addEventListener("mouseover", function () {
if (window.lastInfoBox) {
window.lastInfoBox.close();
if(ci === 1 ){
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/traffic2.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
ci++;
}
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
myLabel.addEventListener("mouseout", function () {
map.removeOverlay(point);
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/traffic1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
ci=1;
});
});
console.log(labelData)
addViewLabel(labelData);
}
function canyin() {
map.clearOverlays();
var labelData = [];
var labelListData ={$AroundTheRepast_json};
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.location.lng, data.location.lat);
var myLabel = new BMap.Label("",{position: point,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({width: "12px", height: "12px", border: "0", backgroundColor: "rgb(66, 133, 244)", borderRadius: "50%", cursor: "pointer", background:"url(image/showbox.png) no-repeat"
});
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/catering1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
labelData.push(myLabel);
var tpl='<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;background-color:#FFF;color:#000width: 120px;height: 30px;display: block;border-radius: 4px;">'+data.name+'</sapn>';
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var ci = 1;
myLabel.addEventListener("mouseover", function () {
if (window.lastInfoBox) {
window.lastInfoBox.close();
if(ci === 1 ){
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/catering2.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
ci++;
}
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
myLabel.addEventListener("mouseout", function () {
map.removeOverlay(point);
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/catering1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
ci=1;
});
});
addViewLabel(labelData);
}
function yinhang() {
map.clearOverlays();
var labelData = [];
var labelListData ={$AroundTheBank_json};
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.location.lng, data.location.lat);
var myLabel = new BMap.Label("",{position: point,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({width: "12px", height: "12px", border: "0", backgroundColor: "rgb(66, 133, 244)", borderRadius: "50%", cursor: "pointer", background:"url(image/showbox.png) no-repeat"
});
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/bank1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
labelData.push(myLabel);
var tpl='<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;background-color:#FFF;color:#000width: 120px;height: 30px;display: block;border-radius: 4px;">'+data.name+'</sapn>';
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var ci = 1;
myLabel.addEventListener("mouseover", function () {
if (window.lastInfoBox) {
window.lastInfoBox.close();
if(ci === 1 ){
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/bank2.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
ci++;
}
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
myLabel.addEventListener("mouseout", function () {
map.removeOverlay(point);
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/bank1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
ci=1;
});
});
addViewLabel(labelData);
}
function jiudian() {
map.clearOverlays();
var labelData = [];
var labelListData ={$AroundTheHotel_json};
$.each(labelListData,function (index,data) {
var point = new BMap.Point(data.location.lng, data.location.lat);
var myLabel = new BMap.Label("",{position: point,offset: new BMap.Size(-12, -15)});
myLabel.setStyle({width: "12px", height: "12px", border: "0", backgroundColor: "rgb(66, 133, 244)", borderRadius: "50%", cursor: "pointer", background:"url(image/showbox.png) no-repeat"
});
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/hotel1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
labelData.push(myLabel);
var tpl='<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;background-color:#FFF;color:#000width: 120px;height: 30px;display: block;border-radius: 4px;">'+data.name+'</sapn>';
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "180px",
marginBottom: "30px",
backgroundColor: "white"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var ci = 1;
myLabel.addEventListener("mouseover", function () {
if (window.lastInfoBox) {
window.lastInfoBox.close();
if(ci === 1 ){
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/hotel2.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
ci++;
}
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
myLabel.addEventListener("mouseout", function () {
map.removeOverlay(point);
var content = '<span style="color:#40A9FF;position: absolute;"><i class="fa fa-map-marker"></i></span>'
+ '<sapn  style="margin-top: 5px;cursor: pointer;position: relative;top: -10px;left: -10px;text-align:center;width: 20px;height: 20px;display: block;border-radius: 50%;">' +
'<img src="/public/static/index/statics/img/hotel1.png" style="width:20px;" ></sapn>';
myLabel.setContent(content)
myLabel.setPosition(point);
ci=1;
});
});
addViewLabel(labelData);
}
function addViewLabel(labels) {
map.clearOverlays();
for(var i = 0; i < labels.length; i ++){
var result = BMapLib.GeoUtils.isPointInRect(labels[i].point, map.getBounds());
if(result == true) {
map.addOverlay(labels[i])
} else{
map.removeOverlay(labels[i]);
}
}
inimap()
}
</script>
<script>
$(function () {
// 地图列表切换
$(document).on('click', '.maplist_nav>a', function () {
$(this).addClass('act').siblings().removeClass('act');
var id = $(this).attr('data-show');
$(id).show().siblings().hide();
})
$(".crumbs_fx_btn").mouseover(function () {
$(".linkCode").show();
});
$(".linkCode , .b_name").mouseout(function () {
$(".linkCode").hide();
});
$(".b_details .b_info_type li a").click(function (e) {
e.preventDefault;
var _scrollTop = $($(this).attr('href')).offset().top - 68;
var _index = $(this).parent().index();
$("html,body").animate({
scrollTop: _scrollTop,
}, 500);
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
$(".kpList li").eq(_index).addClass("active");
$(".kpList li").eq(_index).siblings().removeClass("active");
});
$(".kpList .b_info_type li a").click(function (e) {
e.preventDefault;
var _scrollTop = $($(this).attr('href')).offset().top - 68;
var _index = $(this).parent().index();
$("html,body").animate({
scrollTop: _scrollTop,
}, 500);
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
$(".b_details li").eq(_index).addClass("active");
$(".b_details li").eq(_index).siblings().removeClass("active");
});
})
</script>
点赞

发表评论