google地图--自定义标记以及点击事件

之前做项目需要使用到地图，由于是做国外网站，所以考虑了几种地图之后，决定用谷歌地图。但是在完成某一需求时，碰到了问题：点击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="http://ditu.google.cn/maps/api/js?key=AIzaSyD4B4IuS7uIJvBMvgptrSBK_yaoF6rTJYE&language=EN"></script><!-- 中国版 --><!--正常版，需FQ  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp"></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 mapthis.setMap(map); //for google mapthis.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: "北京市天安门" }); //创建一个InfoWindowinfowindow.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="http://ditu.google.cn/maps/api/js?key=AIzaSyD4B4IuS7uIJvBMvgptrSBK_yaoF6rTJYE&language=EN"></script><!--正常版，需FQ  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp"></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 mapthis.prototype.setMap(map); //for google map// this.map = map,this.args = args; //自定义参数}HouseMarker.prototype = google.maps.OverlayView;</script>
</body></html>

注：google api key请自行申请

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

google地图--自定义标记以及点击事件相关推荐

高德地图单点、多点标记，轨迹绘制，自定义标记覆盖物,给标记添加点击事件，移除所有标记和轨迹，轨迹回放功能
文档地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注册到官网注册一下就可以了https://lbs.amap.com/并创 ...
百度地图点标记以及点击弹出对应信息窗口自定义样式--infoBox
百度地图提供的信息窗口风格与项目不符,UI设计出来的太高端. 效果图如下: var points=[{"lng":111.188261,"lat":34.791 ...
百度地图：为标记添加点击事件显示标注
之前写了百度地图的标注,原文链接:使用百度地图API实现地图生成.标记以及标注,但是因需求更改,标注的显示需要通过点击标记才能显示. 以下为更改内容: //给标记添加点击事件以及显示窗口信息var i ...
腾讯地图的使用，添加多个标记和点击事件
腾讯地图API官网:http://lbs.qq.com/javascript_v2/index.html 根据经纬度获取详细地址此示例可以将经纬度(如:39.908823,116.39747)转换为 ...
jbutton添加点击事件_electron-vue自定义边框后点击事件失效问题
问题描述:electron-vue自定义边框后点击事件失效(不单单点击事件,窗体内所有事件都失效) 解决方案:在需要事件处理的节点上添加样式-webkit-app-region:no-drag; sr ...
layui 按钮点击一次后失效_electron-vue自定义边框后点击事件失效问题
问题描述:electron-vue自定义边框后点击事件失效(不单单点击事件,窗体内所有事件都失效) 解决方案:在需要事件处理的节点上添加样式-webkit-app-region:no-drag; sr ...
【Echarts】echarts地图展示、自定义点位、地图及点位的点击事件
项目中用到地图,之前看到ecarts的地图功能觉得合适,先看看效果图: 1.首先在阿里数据可视化平台下载需要地区的JSON文件:数据可视化 2.下载安装echarts.vue.axios 数据格式(必 ...
ios点击大头针气泡不弹出_高德 ios 自定义气泡添加点击事件无效问题
在使用高德地图sdk开发的时候,需要自定义气泡吹出框,发现气泡添加的点击事件或者button都没响应. 原因:自定义的气泡是添加到大头针上的,而大头针的size只有下面很小一部分,所以calloutV ...
百度地图——点标记及点击弹窗显示
功能点自定义图片标记点,多个样式不同的lable 点击点展示弹窗,展示图片和录音播放暂停 let img = require('./img/num-bg.png') 若使用背景图需要这样引入,然后使 ...

google地图--自定义标记以及点击事件

google地图--自定义标记以及点击事件相关推荐

最新文章

热门文章