Gmap3样式默认为

时间:2015-11-13 13:39:08

标签: javascript jquery jquery-gmap3

您好我使用gmap3(jquery插件)来显示谷歌地图。 这是指向页面的链接:website 这是js代码:

                $("#mapa").gmap3({
                    defaults:{ 
                        classes:{
                          Marker:MarkerWithLabel
                        }
                    },                        
                    map:{
                        options:{
                            zoom: 16,
                            center: new google.maps.LatLng(54.81592345170086,17.954444355125368),
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControlOptions: {
                                mapTypeIds: [google.maps.MapTypeId.ROADMAP, "style1"]
                            },
                            icon: new google.maps.MarkerImage("assets/gfx/itmarker_01.png", new google.maps.Size(64, 60, "px", "px")),
                            streetViewControl: false,
                            draggable: true,
                        }
                    }
                    ,
                    styledmaptype:{
                        id: "style1",
                        options:{
                          name: "Style 1"
                        },
                        styles: [
                          {
                            featureType: "landscape",
                            stylers: [
                              { hue: "#013e53" },
                              { saturation: 0 },
                              { lightness: 0 }
                            ]
                          }
                        ]
                    }             
                    ,
                    marker:{
                        latLng:[54.81558744636294,17.954398119049074],
                        options:{
                            icon: new google.maps.MarkerImage("assets/gfx/itmarker_01.png", new google.maps.Size(64, 60, "px", "px")),
                            labelContent: "$425K",
                            labelAnchor: new google.maps.Point(160, 110),
                            labelClass: "labels",
                            labelStyle: {opacity: 0.9},
                            labelContent: "PROMYK<br/>ul. Lubiatowska 4/3, 84-113 Białogóra",
                        }
                    }

                });
                function toggleStreetView(){
                    var promyk = {lat: 54.81557641505586, lng: 17.954616016502314};
                    var map = $("#mapa").gmap3("get"),
                        panorama = map.getStreetView();
                    if (panorama.getVisible()){
                        panorama.setVisible(false);
                    } else {
                        //panorama.setPosition(map.getCenter());
                        panorama.setPosition(promyk);
                        panorama.setPov({
                            heading: 320,
                            zoom:1,
                            pitch:5
                        });
                        panorama.setVisible(true);
                    }
                }

它的工作正常。我正在寻找一些方法来设置我的&#34; Style 1&#34;是没有控件来更改卫星或路线图的此地图的默认样式。我的风格只改变颜色和色调效果。

1 个答案:

答案 0 :(得分:1)

确定找到了

                    $("#mapa").gmap3({
                    defaults:{ 
                        classes:{
                          Marker:MarkerWithLabel
                        }
                    },                        
                    map:{
                        options:{
                            zoom: 16,
                            center: new google.maps.LatLng(54.81592345170086,17.954444355125368),
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControlOptions: {
                                mapTypeIds: [google.maps.MapTypeId.ROADMAP, "style1"]
                            },
                            styles: [
                                {
                                  featureType: "landscape",
                                  stylers: [
                                    { hue: "#013e53" },
                                    { saturation: 0 },
                                    { lightness: 0 }
                                  ]
                                }
                              ],
                            icon: new google.maps.MarkerImage("assets/gfx/itmarker_01.png", new google.maps.Size(64, 60, "px", "px")),
                            streetViewControl: false,
                            draggable: true,
                        }
                    }            
                    ,
                    marker:{
                        latLng:[54.81558744636294,17.954398119049074],
                        options:{
                            icon: new google.maps.MarkerImage("assets/gfx/itmarker_01.png", new google.maps.Size(64, 60, "px", "px")),
                            labelContent: "$425K",
                            labelAnchor: new google.maps.Point(160, 110),
                            labelClass: "labels",
                            labelStyle: {opacity: 0.9},
                            labelContent: "PROMYK<br/>ul. Lubiatowska 4/3, 84-113 Białogóra",
                        }
                    }

                });
                function toggleStreetView(){
                    var promyk = {lat: 54.81557641505586, lng: 17.954616016502314};
                    var map = $("#mapa").gmap3("get"),
                        panorama = map.getStreetView();
                    if (panorama.getVisible()){
                        panorama.setVisible(false);
                    } else {
                        //panorama.setPosition(map.getCenter());
                        panorama.setPosition(promyk);
                        panorama.setPov({
                            heading: 320,
                            zoom:1,
                            pitch:5
                        });
                        panorama.setVisible(true);
                    }
                }