谷歌地图开发 Maps JavaScript API # 自定义标志物

电商开发，客户要求结合线下实体店，给顾客提供实体店的信息。点击地图实体店标志，找到面板弹出实体店的具体信息，或者点击左侧面板，相对应的实体店标志移动到地图中间，改变图片

获取 获取api key

1.在进行地图操作前，必须初始化

 var map = new google.maps.Map(document.getElementById('map-layout'), {zoom: 10,mapTypeControl: false,streetViewControl:false,gestureHandling: 'cooperative',center: {lat: 22.545459, lng: 114.11728}});

2.自定义标志物

自定义标志物通过 闭包抛出，为后面的面板操作提供可行性

虽然自定义标志物可以直接点击触发一些函数，但是有时候需要点击面板去触发，这就需要去找到相关的自定义标志物的闭包去执行相关业函数。

 allTags = renderMakers(map,icon,selected_icon); 
// markerfunction renderMakers(map,klasseicon,selectedicon) {var tagContainer = {},klasse_icon = klasseicon,selected_klasse_icon = selectedicon;for(store in allStores){for(var i=0;i<allStores[store].length;i++){var Tag = new google.maps.Marker({position: {lat: Number(allStores[store][i].latitude),lng:Number(allStores[store][i].longitude)},map: map,icon: icon,info:{}});tagContainer[allStores[store][i].identifier] = Tag;Tag.setTitle(allStores[store][i].name);//点击标志物，可以执行一些函数，如移到中间，手机的话，改变视图大小（css）Tag.addListener('click', function() {map.setZoom(12);map.panTo(this.getPosition());if(!window.activeIdentify=="" ){allTags[window.activeIdentify].setIcon(icon);}window.activeIdentify  = this.info.identifier;this.setIcon(selected_icon);this.setAnimation(google.maps.Animation.BOUNCE);var markerSelf = this;$(".map-wrapper").addClass("active");setTimeout(function () {markerSelf.setAnimation(null);},2000);});}}return tagContainer;}

下面通过 自定义标志物 的identify ，区闭包里寻找到 标志物， 让他们显示和隐藏，在视图范围的标志物内显示，不在的隐藏

 allTags[tag].setVisible(true);allTags[tag].setVisible(false);

 map.addListener("bounds_changed",function () {mapMove(allTags,map);});// map movefunction mapMove(allTags,map){if(!window.nearby){return;}var bs = map.getBounds();   //获取可视区域var lats = bs.na;// var lngs = bs.ia;var lngs = bs.ga;var swLng = lngs.j ,//西南swLat = lats.j ,neLng = lngs.l ,//东北neLat = lats.l;var storeList='';for(tag in allTags){var lng = allTags[tag].info.lng,lat =  allTags[tag].info.lat;if(lng>swLng && lng<neLng && lat>swLat && lat<neLat){allTags[tag].setVisible(true);}else{allTags[tag].setVisible(false);}}if(window.activeIdentify!=""){$("li[data-idenify='"+window.activeIdentify+"']").addClass("active");}}

地图视图发送改变，判断哪些标志物还在视图范围

map.addListener("bounds_changed",function () {mapMove(allTags,map);});

移动端拖拽事件，改变地图大小

 google.maps.event.addListener(map,"dragstart",function(event){$(".map-wrapper").removeClass(" active");});

我不确定通过闭包操作标志物的方式是否完美，毕竟是我第一次做谷歌地图，如果大家发现更好的方式，可以留言告诉我，感激不尽！