循环向百度地图示例中添加标记点及提示信息(使用let解决)

<!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>

上一篇:vue 获取坐标 及 调用腾讯地图


下一篇:Django 从0开始创建一个项目