<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#allmap {
width: 600px;
height: 560px;
float: left;
}
ul {
width: 500px;
height: auto;
float: right;
}
li {
width: 100%;
height: auto;
line-height: 20px;
}
</style>
</head>
<body>
<div class="sale_map" id="allmap"></div>
<ul class="sale_mapcon">
<li>A点</li>
<li>B点</li>
<li>C点</li>
<li>D点</li>
</ul>
</body>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Cu63HGWRYkNRRPmy3SurQmOO"></script>
<script type="text/javascript">
// //销售网点地图信息,
var jdata = {
"map": [{
"x": 121.24621,
"y": 31.379862,
"info": "<div class='clearfix infocon'><div class='infof'><h2>A点</h2><h3>地址：A点地址</h3><h4>服务电话：<span>A点电话</span></h4></div></div>"
}, {
"x": 121.442113,
"y": 31.183306,
"info": "<div class='clearfix infocon'><div class='infof'><h2>B点</h2><h3>地址：B点地址</h3><h4>服务电话：<span>B点电话</span></h4></div></div>"
}, {
"x": 121.558102,
"y": 31.221761,
"info": "<div class='clearfix infocon'><div class='infof'><h2>C点</h2><h3>地址：C点地址</h3><h4>服务电话：<span>C点电话</span></h4></div></div>"
}, {
"x": 121.20496,
"y": 31.040158,
"info": "<div class='clearfix infocon'><div class='infof'><h2>D点</h2><h3>地址：D点地址</h3><h4>服务电话：<span>D点电话</span></h4></div></div>"
}]
};
allmap(jdata);
console.log(this.jdata.map)
function allmap(jdata) {
// 百度地图API功能
var data = [];
for(i = 0; i < jdata["map"].length; i++) {
var da = [jdata["map"][i].x, jdata["map"][i].y, jdata["map"][i].info];
data.push(da);
}
var x = jdata["map"][0].x;
var y = jdata["map"][0].y;
map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(x, y), 10);
var data_info = data;
var opts = {
width: 360, // 信息窗口宽度
height: 90, // 信息窗口高度
title: "", // 信息窗口标题
enableMessage: true //设置允许信息窗发送短息
};
for(var i = 0; i < data_info.length; i++) {
var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1])); // 创建标注
var content = data_info[i][2];
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content, marker, i);
}
map.enableScrollWheelZoom(true);
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
function addClickHandler(content, marker, abc) {
//1. 坐标点鼠标移入移除效果
marker.addEventListener("mouseover", function(e) {
var label = new BMap.Label(abc, {
offset: new BMap.Size(25, -5)
});
label.setStyle({
width: "60px",
color: '#fff',
background: '#c0191f',
border: '1px solid "#c0191f"',
borderRadius: "5px",
textAlign: "center",
height: "26px",
lineHeight: "26px"
});
marker.setLabel(label);
});
marker.addEventListener("mouseout", function(e) {
var label = this.getLabel();
label.setContent(""); //设置标签内容为空
label.setStyle({
border: "none",
width: "0px",
padding: "0px"
}); //设置标签边框宽度为0
});
//2.坐标点点击效果
marker.addEventListener("click", function(e) {
openInfo(content, e);
//获取marker的位置
var p = marker.getPosition();
map.centerAndZoom(new BMap.Point(p.lng, p.lat), 16);
for(j = 0; j < data.length; j++) {
if(data[j][0] == p.lng) {
$('.sale_mapcon li').eq(j).addClass("on").siblings().removeClass("on");
}
}
});
}
//导航点击效果
$('.sale_mapcon li').on('click', function(e) {
var cindex = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
var x = data[cindex][0]; //x
var y = data[cindex][1]; //y
var point = new BMap.Point(x, y);
map.centerAndZoom(new BMap.Point(x, y), 16);
var infoWindow = new BMap.InfoWindow(data[cindex][2], opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
}
</script>
</html>
浙公网安备 33010602011771号