<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>循环标记地点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO"></script>
</head>
<body>
<div class="info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
<div id="container"></div>
</body>
</html>
<script>
var obj = [{
"title": "白马寺",
"detailedAddress": "途径公交车： 56 路;58 路;87 路;801 路",
"longitude": 112.608909,
"latitude": 34.726391
}, {
"title": "龙门石窟",
"detailedAddress": "途径公交车：53路; 60路; 71路; 81路; 99路; 167路; v9路; 白园专线; 文旅专线",
"longitude": 112.483216,
"latitude": 34.575677
}, {
"title": "龙潭大峡谷-票务中心",
"detailedAddress": "地址：洛阳市新安县石井乡龙潭沟村龙潭大峡谷景区内",
"longitude": 112.022698,
"latitude": 34.980483
}, {
"title": "洛阳国花园",
"detailedAddress": "地址：机场路39号",
"longitude": 112.43235,
"latitude": 34.73023
}, {
"title": "洛阳博物馆",
"detailedAddress": "途径公交车：1路; 77路; 986路; 景区1号专线",
"longitude": 112.456703,
"latitude": 34.648035
}, {
"title": "隋唐城遗址植物园-南2门",
"detailedAddress": "地址：洛阳市洛龙区古城路与市府西街交叉口东150米",
"longitude": 112.459026,
"latitude": 34.635941
}, {
"title": "老君山",
"detailedAddress": "地址：河南省洛阳市栾川县鸾州大道中国伏牛山世界地质公园",
"longitude": 111.659569,
"latitude": 33.779134
}, {
"title": "洛浦公园",
"detailedAddress": "地址：河南省洛阳市西工区美术馆路",
"longitude": 112.461283,
"latitude": 34.66838
}, {
"title": "河南林业职业学院-北门",
"detailedAddress": "地址：熙春西路9号",
"longitude": 112.505414,
"latitude": 34.696896
}]
// 白马寺 途径公交车： 56 路;58 路;87 路;801 路 坐标： 112.608909, 34.726391
// 龙门石窟 途径公交车：53路; 60路; 71路; 81路; 99路; 167路; v9路; 白园专线; 文旅专线 坐标：112.483216,34.575677
// 龙潭大峡谷-票务中心 地址：洛阳市新安县石井乡龙潭沟村龙潭大峡谷景区内 坐标：112.022698,34.980483
// 洛阳国花园 地址：机场路39号 坐标：112.43235,34.73023
// 洛阳博物馆 途径公交车：1路; 77路; 986路; 景区1号专线 坐标：112.456703,34.648035
// 隋唐城遗址植物园-南2门 地址：洛阳市洛龙区古城路与市府西街交叉口东150米 坐标：112.459026,34.635941
// 老君山景区-票务中心 地址：河南省洛阳市栾川县鸾州大道中国伏牛山世界地质公园 坐标：111.659569,33.779134
// 洛浦公园 地址：河南省洛阳市西工区美术馆路 电话：(0379)63238855,(0379)63256760 坐标：112.461283,34.66838
// 河南林业职业学院-北门 地址：熙春西路9号 坐标：112.505414,34.696896
/* 这下面三个数组是我尝试使用动态变量名的方式将数据一次添加到map的实例中去*/
// var names = ["point1", "point2", "point3", "point4", "point5", "point6"];
// var marker = ["marker1", "marker2", "marker3", "marker4", "marker5", "marker6"];
// var info = ["infoWindow1", "infoWindow2", "infoWindow3", "infoWindow4", "infoWindow5", "infoWindow6"];
// 创建Map实例（实例只需创建一个，所以提取为全局变量）
var map = new BMapGL.Map('container');
// 创建函数接收四个参数（提示信息的标题，详细地址，经度，纬度），并向map实例中添加一系列对象
function addMessage(title, detailedAddress, longitude, latitude) {
// 这里的let关键词是必须的，let声明是局部变量，且无变量提升，用完就会回收
let point = new BMapGL.Point(longitude, latitude);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 16);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建点标记
let marker = new BMapGL.Marker(point);
// 在地图上添加点标记
map.addOverlay(marker);
// 创建窗口提升信息对象
let opts = {
width: 200,
height: 100,
title: title
};
let infoWindow = new BMapGL.InfoWindow(detailedAddress, opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
}
// 循环调用函数，给map实例添加对象
for (let index = 0; index < obj.length; index++) {
let objindex = obj[index];
addMessage(objindex.title, objindex.detailedAddress, objindex.longitude, objindex.latitude);
}
</script>