当前位置：网站首页>山东大学项目实训（四）多个点标记添加点击事件

山东大学项目实训（四）多个点标记添加点击事件

2022-04-21 19:01:00 【MeditationRain】

文章目录

- 一、GL地图和异步加载地图
- 二、多个点标记添加点击事件

一、GL地图和异步加载地图

GL地图和异步加载地图是百度地图提供的两种加载地图的方法。

GL地图相关方法：

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
<script> var map = new BMapGL.Map('container'); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 </script>

异步加载地图相关方法：

function loadJScript() {
    
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥&callback=init';
    document.body.appendChild(script);
}
function init() {
    
    var map = new BMapGL.Map('container'); // 创建Map实例
    var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom(); // 启用滚轮放大缩小
}
window.onload = loadJScript; // 异步加载地图

二、多个点标记添加点击事件

<!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: "微软雅黑"; } </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的秘钥"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script> var markerArr = [ {
       title : "山东大学（中心校区）", point : "117.066638,36.681366", address : "济南市历城区山大南路27号", }, {
       title : "山东大学（洪家楼校区）", point : "117.075068,36.693073", address : "济南市历城区洪家楼5号", }, {
       title : "山东大学（千佛山校区）", point : "117.034848,36.656719", address : "济南市历下区经十路17923号", }, {
       title : "山东大学（软件园校区）", point : "117.145921,36.673615", address : "舜华路中段1500号", }, {
       title : "山东大学（趵突泉校区）", point : "117.024525,36.658812", address : "山东省济南市文化西路44号", }, {
       title : "山东大学（兴隆山校区）", point : "117.058082,36.606124", address : "山东省济南市市中区二环南路12550号", }, ]; // 创建map实例 var map = new BMapGL.Map('container'); // 地图中心点，济南市 //var point = new BMapGL.Point(117.126541,36.6584);  //map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。 map.centerAndZoom("济南市", 13); // 开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); // 创建信息窗口 var point = new Array(); //存放标注点经纬信息的数组 var marker = new Array(); //存放标注点对象的数组 var infoWindow = new Array(); for (var i = 0; i < markerArr.length; i++) {
       var opts = {
       width: 200, height: 100, title: markerArr[i].title, }; var p0 = markerArr[i].point.split(",")[0]; // var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来 point[i] = new window.BMapGL.Point(p0, p1); //循环生成新的地图点 marker[i] = new window.BMapGL.Marker(point[i]); //按照地图点坐标生成标记 map.addOverlay(marker[i]); infoWindow[i] = new BMapGL.InfoWindow(markerArr[i].address,opts); //console.log(infoWindow); // 点标记添加点击事件 marker[i].addEventListener("click", (function(k) {
       // js 闭包 return function() {
       //将被点击marker置为中心 map.centerAndZoom(point[k], 15); //在marker上打开检索信息窗口 map.openInfoWindow(infoWindow[k], point[k]); } })(i)); } </script>

打开网页后显示结果：

在这里插入图片描述

点击红色标记，地图中心点改变，地图放大，显示地点相关信息：

在这里插入图片描述

关键代码分析：

markerArr是一个存取山东大学各个校区信息的数组，总共包含6个校区，包括每个校区的名称title，经纬度point，详细地址描述address。通过for循环对每一个数组进行处理。
初始化地图,设置地图级别以及将济南市设为地图中心点时有两种方法，centerAndZoom(center: Point , zoom: Number)

1.直接把城市名称赋给Point

2.获得经纬度赋给Point

如果center类型为Point时，zoom必须赋值，范围3-19级。如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据center适配最佳zoom级别

获得给定数组里对应点的经纬度坐标，并生成新的地图点，在地图中进行标记：

//按照原数组的point格式将地图点坐标的经纬度分别提出来
var p0 = markerArr[i].point.split(",")[0]; 
var p1 = markerArr[i].point.split(",")[1]; 
//循环生成新的地图点
point[i] = new window.BMapGL.Point(p0, p1); 
map.addOverlay(marker[i]);

点击事件监听：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。