地图页面
演示图如下：
代码里有些CSS和JS文件没有用，自己测试吧
代码如下：
<!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<base href="https://dt.sofang.com/" />
<script src="/js2.0/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css" />
<title>睿和锦城_大同睿和锦城楼盘_房价走势_大同搜房网</title>
<meta name="keywords" content="睿和锦城|大同新盘,大同新楼盘,搜房网,搜房-搜房网"/>
<meta name="description" content="搜房网,大同新房为您提供睿和锦城详情、睿和锦城相册、睿和锦城户型、睿和锦城价格,大同新盘,让您更全面的了解新楼盘,为您创造最佳新房购房体验！"/>
<link rel="stylesheet" href="/css20/list.css?v=1650155485">
<link rel="stylesheet" href="/css20/community/detail.css?v=1650155485">
<link rel="stylesheet" href="/css2.0/articleIndex.css?v=1650155485">
<script src="/js/chart/Chart.js"></script>
<script src="/js2.0/jquery.qrcode.min.js"></script>
<script src="/js/point_interest.js?v=1.5.9"></script>
<script src="/js2.0/userFollow.js?v=1.5.9"></script>
<link rel="stylesheet" href="/css20/component/popup_window.css?v=1.5.9">
<link rel="stylesheet" type="text/css" href="/css20/discount_component.css?t=1650155485" />
<script>
var con = '[]';
</script>
</head>
<body>
<div id="map" style="padding-top: 32px;float: left;">
<div class="map" style="position: relative;">
<div class="map-title">
位置周边
</div>
<div class="" style="margin-top: 12px;">
位置 ：城区西京街北侧 永安路西侧地块
</div>
<div class="" style="height: 50px;">
<ul class="map-ul" style="margin-top: 12px;">
<li class="click curpos">楼盘位置</li>
<li class="chechData" attr="公交" title="周边公交">公交</li>
<li class="chechData" attr="地铁" title="周边地铁">地铁</li>
<li class="chechData" attr="教育" title="周边教育">教育</li>
<li class="chechData" attr="医院" title="周边医院">医院</li>
<li class="chechData" attr="银行" title="周边银行">银行</li>
<li class="chechData" attr="购物" title="周边购物">购物</li>
<li class="chechData" attr="餐饮" title="周边餐饮">餐饮</li>
<li class="chechData" attr="健身" title="周边健身">健身</li>
</ul>
</div>
<div id="container" style="width: 1200px;height: 530px;margin-top: 8px;float: left;"></div>
<div class="assort_nav" style="background-color:white;width: 330px;height: 533px;border: 1px solid rgba(219,222,226,1);position: absolute;right: 0px;top:103px;">
<div id="zk" class="zk"></div>
<h2 id="soukey" style="margin-left:16px;background-color:white;height:57px;width: 298px;border-bottom:1px solid rgba(219,222,226,1);font-size:16px;font-family:MicrosoftYaHei;color:rgba(48,49,51,1);line-height:57px;"></h2>
<div id="r-result" style="height: 478px;overflow-y: auto;"></div>
</div>
</div>
</div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Y1kG709UBP4L0ac6SvTjxnm7"></script>
<script type="text/javascript">
$(document).ready(function () {
//经纬度
var longitude = "0";
var latitude = "0";
if ((longitude == 0) && (longitude == 0)) {
longitude = 113.366546;
latitude = 40.087993;
}
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(longitude, latitude); // 创建点坐标
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
// 默认标记
function curpos() {
map.clearOverlays();
//当前楼盘地址
var marker2 = new BMap.Marker(point); // 创建标注
map.addOverlay(marker2);
var opts = {
position: point, // 指定文本标注所在的地理位置
offset: new BMap.Size(-45, -50) //设置文本偏移量
}
var label = new BMap.Label(" 当前楼盘位置 ", opts); // 创建文本标注对象
label.setStyle({
color: "red",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑"
});
map.addOverlay(label);
}
//周边点击
$('.chechData').bind('click', function (e) {
e.stopPropagation();
e.preventDefault();
var data1 = $(this).attr('attr');
var data2 = $(this).text();
chechData(data1, data2);
$(this).addClass("click");
$(this).siblings().removeClass("click")
});
function chechData(data1, data2) {
$('#soukey').text(data2);
$('.periphery_nav').hide();
$('.periphery_build').show();
curpos();
$('.assort_nav').show();
$('soukey').html('<i></i>' + data2);
var circle = new BMap.Circle(point, 1000, {
fillColor: "blue",
strokeWeight: 1,
fillOpacity: 0.3,
strokeOpacity: 0.3
});
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result", autoViewport: false},
// renderOptions: {map: map},
pageCapacity: 6,
onSearchComplete: function (results) {
console.log(results)
}
});
local.searchNearby(data1, point, 1000);
}
$('.curpos').click(function (e) {
e.stopPropagation();
e.preventDefault();
var c_name = "地址名称";
var c_address = "城区街北侧 永路西侧地块";
$(this).siblings().removeClass("click");
$(this).addClass("click");
map.clearOverlays();
//当前楼盘地址
var marker2 = new BMap.Marker(point); // 创建标注
map.addOverlay(marker2);
var opts = {
width: 100, // 信息窗口宽度
height: 70, // 信息窗口高度
title: "楼盘名：" + c_name, // 信息窗口标题
offset: new BMap.Size(-5, -20) //设置文本偏移量
}
var infoWindow = new BMap.InfoWindow("地址：" + c_address, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
$('.assort_nav').hide();
}).trigger('click');
});
</script></body>
</html>
里面的经纬度和文字修改下就可以用了。如果帮到你请点赞。如果有错误请见谅
1483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
