自定义标记以及点击事件

文章正文

发布时间：2025-01-30 17:40

之前做项目需要使用到地图，由于是做国外网站，所以考虑了几种地图之后，决定用谷歌地图。但是在完成某一需求时，碰到了问题：点击marker标记，弹出设计图上的内容。谷歌地图默认的弹框和设计图不符合，所有我在网上查询和尝试最后终于实现了需求。记录一下：

1.谷歌地图的基本使用

实现效果

代码如下：

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>获取地图缩放级别</title> <style> body, html { height: 100%; width: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map" style="width:100%;height:100%"></div> // key需要自行申请 <script src="?key=AIzaSyD4B4IuS7uIJvBMvgptrSBK_yaoF6rTJYE&language=EN"></script>   <script> var mapType = google.maps.MapTypeId.ROADMAP; var lat = 39.915168, lng = 116.403875, zoom = 10; var mapOptions = { center: { lat: 52.38027, lng: -1.5637500000000273 }, zoom: 2, styles: [{ "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#000000" }, { "lightness": 40 }] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#000000" }, { "lightness": 16 }] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": 20 }] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2 }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 20 }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 21 }] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": 17 }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 29 }, { "weight": 0.2 }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 18 }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 16 }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 19 }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 17 }] }] }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); //创建谷歌地图 function HouseMarker(latlng, map, args) { this.latlng = latlng; //for google map this.setMap(map); //for google map this.args = args; //自定义参数 } HouseMarker.prototype = new google.maps.OverlayView(); HouseMarker.prototype.draw = function () { //创建一个div，把marker和详情框写在一起，方便后面的展示和隐藏 $div = $("<div class='marker-container'>" + 　　　　　　　　"　　<div class='marker'></div>" + 　　　　　　　　"　　<div class='detail-info'></div>" + 　　　　　　　　"</div>"); //将div添加到它的dom元素里面 var panes = this.getPanes(); var div = $div[0]; panes.overlayImage.appendChild(div); //根据经纬度计算div的像素位置 var point = this.getProjection().fromLatLngToDivPixel(this.latlng); div.style.left = (point.x - 20) + 'px'; //减掉marker宽度的一半，居中 div.style.top = (point.y - 20) + 'px'; //减掉marker高度的一半，居中 }; // var locationMarker = { // path: './img/green.svg' // } var marker = new google.maps.Marker({ map: map, // icon: './img/green.svg', position: new google.maps.LatLng(lat, lng) }); var infowindow = new google.maps.InfoWindow({ content: "北京市天安门" }); //创建一个InfoWindow infowindow.open(map, marker); //把这个infoWindow绑定在选定的marker上面 //使用谷歌地图定义的事件，给这个marker添加点击事件 google.maps.event.addListener(marker, "click", function () { infowindow.open(map, marker); }); </script> </body> </html>

2.谷歌地图自定义标记以及点击事件
实现效果：

多个标记的话，只展示一个，这时候我们要用数组储存起来，然后通过点击对象区分是谁，然后用我们存储的当前点击事件的索引来判断是否是我们现在点击对象。也即是说我们要存储起来三个值，marker标记，infowindow弹出框，还有存在当前弹框的对象索引值。

代码如下：

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>地图研究</title> <style> body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .gm-style div div div div div div:last-child { background-color: rgba(0, 0, 0, 0) !important; } .gm-style div div div div div div:nth-child(2) { background-color: rgba(0, 0, 0, 0) !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px !important; } .gm-style .gm-style-iw .marker-container { width: 200px; height: 250px; background-color: rgba(28, 40, 52, .6) !important; z-index: 1000000; color: #00a2ff; border: 1px solid rgba(255, 255, 255, .1); position: relative; } .gm-style-iw-d { overflow: hidden !important; } .gm-style-iw-t:after { background:none !important; } .marker { width: 90%; height: 45%; position: absolute; left: 50%; transform: translateX(-50%); top: 5%; /* background: url('./img/house.jpg'); */ background-color: blue; } .detail-info { width: 90%; position: absolute; left: 50%; transform: translateX(-50%); top: 55%; } .detail-info p { margin: 0; margin-bottom: 15px; } .detail-info span { display: block; } .statusAddress div { float: left; width: 50%; } .lastTime, .statusAddress { font-size: 10px; } .detail-info span:last-child { color: rgba(255, 255, 255, .5); } </style> </head> <body> <div id="map" style="width:70%;height:100%"></div>  <script src="?key=AIzaSyD4B4IuS7uIJvBMvgptrSBK_yaoF6rTJYE&language=EN"></script>  <script> var mapType = google.maps.MapTypeId.ROADMAP; var lat = 39.915168, lng = 116.403875, zoom = 10; var arr = []; var mapOptions = { center: { lat: 52.38027, lng: -1.5637500000000273 }, zoom: 2, // 地图的样式，按照需求改 styles: [{ "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#1F2B37" }, { "lightness": 1 } ] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#1F2B37" }, { "lightness": 20 }] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }, { "weight": 1.2 }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }, { "weight": 0.2 }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#1F2B37" }, { "lightness": 1 }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#131d27" }, { "lightness": 0 }] } ] } var map = new google.maps.Map(document.getElementById("map"), mapOptions); //创建谷歌地图 var arr = [1, 2]; var marker = []; var infowindow = []; var currentIndex = -1; arr.forEach(function (item, index) { marker[index] = new google.maps.Marker({ map: map, position: new google.maps.LatLng(lat + index * 10, lng - index * 50) }); //创建一个InfoWindow // infowindow.open(map, marker); //把这个infoWindow绑定在选定的marker上面 //使用谷歌地图定义的事件，给这个marker添加点击事件 infowindow[index] = new google.maps.InfoWindow({ content: "<div class='marker-container'>" + " <div class='marker'></div>" + " <div class='detail-info'><p class='deviceName'>heihei</p ><p class='lastTime'><span>_/_</span><span>last time</span></p ><div class='statusAddress'><div class='saLeft'><span>Alarm</span><span>status</span></div><div class='saRight'><span>120.123/30.123</span><span>address</span></div></div></div>" + "</div>" }); }) // 点击事件 arr.forEach(function(item,index){ google.maps.event.addListener(marker[index], "click", function () { var flag = currentIndex === index; if(!flag){ infowindow[index].open(map, marker[index]); if(currentIndex >= 0){ infowindow[currentIndex].close(map, marker[currentIndex]); } currentIndex = index; }else{ infowindow[currentIndex].close(map, marker[currentIndex]); currentIndex = -1 } }); }) function HouseMarker(latlng, map, args) { this.latlng = latlng; //for google map this.prototype.setMap(map); //for google map // this.map = map, this.args = args; //自定义参数 } HouseMarker.prototype = google.maps.OverlayView; </script> </body> </html>

注：google api key请自行申请

附：谷歌地图开发总结、谷歌地图常用API、谷歌地图添加标记

标签