谷歌地图开发 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); 
// marker
        function 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 move
        function 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");
            });

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