<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图-多个坐标点一起显示</title>
<style type="text/css">
.view {
margin: 0;
position: fixed;
top: 99px;
bottom: 0;
left: 0;
overflow: hidden;
}
#allmap {
width: 70%;
float: left;
height: 100%;
font-family: "微软雅黑";
}
.sitemap {
float: right;
width: 30%;
height: 100%;
background-color: #fff;
padding: 36px 0;
}
.sitestore {
width: 192px;
height: 23px;
margin-bottom: 5px;
padding-left: 36px;
}
.sitestore img {
width: 100%;
}
.sitemap a {
display: block;
width: 300px;
padding-top: 12px;
padding-left: 52px;
}
.sitemap a b {
display: block;
}
.sitemap a small {
color: #333;
}
.border {
width: 100%;
height: 1px;
background-color: #dedede;
margin: 43px 0;
padding-left: 52px;
}
</style>
</head>
<body>
<div class="box">
<div class="view">
<div id="allmap"></div>
<div class="sitemap">
<p class="sitestore">
<img src="./images/titlestore.png" alt="">
</p>
<a href="javascript:void(0)" onclick="to(121.452865,31.232001)">
<b>上海店</b>
<small>上海市愚园路68号晶品中心</small>
</a>
<a href="javascript:void(0)" onclick="to(120.615877,31.315715)">
<b>苏州景德路店</b>
<small>苏州市姑苏区景德路店155号</small>
</a>
<a href="javascript:void(0)" onclick="to(120.625185,31.312388)">
<b>苏州干将路店</b>
<small>苏州市姑苏区干将西路120号</small>
</a>
<a href="javascript:void(0)" onclick="to(120.311601,31.577638)">
<b>无锡店</b>
<small>无锡市崇安区新生路104号</small>
</a>
<a href="javascript:void(0)" onclick="to(120.964234,31.410824)">
<b>昆山店</b>
<small>昆山市紫竹路699号皇冠假日酒店</small>
</a>
<a href="javascript:void(0)" onclick="to(120.645927,31.152898)">
<b>吴江店</b>
<small>吴江市松陵镇鲈乡南路1690号</small>
</a>
<a href="javascript:void(0)" onclick="to(119.92584,32.478288)">
<b>泰州店</b>
<small>泰州市海陵区海陵南路405号</small>
</a>
<a href="javascript:void(0)" onclick="to(120.783221,31.661744)">
<b>常熟店</b>
<small>常熟市开元大道6号皇冠假日酒店</small>
</a>
<a href="javascript:void(0)" onclick="to(121.150571,31.468668)">
<b>太仓店</b>
<small>娄东街道上海东路288号宝龙福朋喜来登酒店</small>
</a>
<p class="border"></p>
<p class="sitestore">
<img src="./images/titlebase.png" alt="">
</p>
<a href="javascript:void(0)" onclick="to(121.427083,31.080866)">
<b>上海拍摄基地</b>
</a>
<a href="javascript:void(0)" onclick="to(120.563412,31.206891)">
<b>苏州旺山拍摄基地</b>
</a>
<a href="javascript:void(0)" onclick="to(120.615877,31.315715)">
<b>苏州景德路拍摄基地</b>
</a>
<a href="javascript:void(0)" onclick="to(120.248596,31.558476)">
<b>无锡拍摄基地</b>
</a>
<a href="javascript:void(0)" onclick="to(120.613502,31.233115)">
<b>不思议花园拍摄基地</b>
</a>
<a href="javascript:void(0)" onclick="to(121.139761,30.612276)">
<b>威廉北域拍摄基地</b>
</a>
</div>
</div>
</div>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=SyRux96r0i0Xue1Qqp0ZPb4uCc8BC6Aw"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);//默认中心点
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableKeyboard();//启用键盘上下左右键移动地图
var myIcon = new BMap.Icon("./images/marker.png", new BMap.Size(200, 110));//自定义图标
var json_data = [
[121.452865, 31.232001, '上海店<br />地址：上海市愚园路68号晶品中心'],
[120.615877,31.315715, '苏州景德路店<br />地址：苏州市姑苏区景德路店155号'],
[120.625185, 31.312388, '苏州干将路店<br />地址：苏州市姑苏区干将西路120号'],
[120.311601,31.577638, '无锡店<br />地址：无锡市崇安区新生路104号'],
[120.964234,31.410824, '昆山店<br />地址：昆山市紫竹路699号皇冠假日酒店'],
[120.645927,31.152898, '吴江店<br />地址：吴江市松陵镇鲈乡南路1690号'],
[119.92584,32.478288, '泰州店<br />地址：泰州市海陵区海陵南路405号'],
[120.783221,31.661744, '常熟店<br />地址：常熟市开元大道6号皇冠假日酒店'],
[121.150571,31.468668, '太仓店<br />地址：娄东街道上海东路288号宝龙福朋喜来登酒店']
];
var pointArray = new Array();
var opts = {
width: 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title: "", // 信息窗口标题
enableMessage: true//设置允许信息窗发送短息
};
for (var i = 0; i < json_data.length; i++) {
var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1]), { icon: myIcon }); // 创建点
map.addOverlay(marker); //增加点
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.setOffset(new BMap.Size(0, 0));
pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
var content = json_data[i][2];
addClickHandler(content, marker);
}
//让所有点在视野范围内
map.setViewport(pointArray);
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
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 to(x, y) {
map.panTo(new BMap.Point(x, y));
}
</script>
</body>
</html>
投递中国科学技术大学等公司7个岗位