彩色谷歌地图[关闭]

Question

我正在修改一个在联系我们页面中使用谷歌地图的网站。当前地图中的主要颜色是蓝色，我需要将其更改为红色。我通过应用 background-color 属性尝试了 CSS 规则，但它不影响地图。我用谷歌搜索并发现 JSON 对象用于为地图着色。我已经从一个网站创建了一个颜色组合，下面给出了 JSON

[{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"weight":"1.06"},{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#baed7c"},{"visibility":"on"}]}]

这是我在网站上找到的获取地图的javascript代码，实际上这个方法是用来指向同一张地图中的两个位置。

var contact = {"lat":"latitude-1", "lon":"longitude-1"}; //Change a map coordinate here!
    var contact2 = {"lat":"latitude-2", "lon":"longitude-2"};


    try {

        var mapContainer = $('.map');
        mapContainer.gmap3({
            infowindow:{
                address:"http://goo.gl/maps/Mt7xc",
                options:{
                    content: "content to display on first location"
                },
                events:{
                    closeclick: function(infowindow){
                        alert("closing : " + infowindow.getContent());
                    }
                }
            },

            action: 'addMarker',
            marker:{
                options:{
                    icon : new google.maps.MarkerImage('images/marker.png')
                }
            },
            latLng: [contact.lat, contact.lon],
            map:{
                center: [contact.lat, contact.lon],
                zoom: 5,
                center:contact
                },
            },
            {action: 'setOptions', args:[{scrollwheel:false}]}
        );

        mapContainer.gmap3({
            infowindow:{
                address:"http://goo.gl/maps/Mt7xc",
                options:{
                    content: "content to display on second location"
                },
                events:{
                    closeclick: function(infowindow){
                        alert("closing : " + infowindow.getContent());
                    }
                }
            },
            action: 'addMarker',
            marker:{
                options:{
                    icon : new google.maps.MarkerImage('images/marker.png')
                }
            },
            latLng: [contact2.lat, contact2.lon],
            map:{
                zoom: 5,
                },
            },
            {action: 'setOptions', args:[{scrollwheel:false}]}
        );

    } catch(err) {
    console.log(err);
    }

现在我需要加入 json 变量和地图代码，这可能吗？还是我需要使用 Google Map API 创建新地图？任何帮助表示赞赏

Answer 1

我也会发表评论，但我仍在建立我的代表。

您是否考虑过不同的方法？使用 CSS，您可以简单地在地图 iframe 上使用色调旋转和饱和过滤器来设置主要颜色的样式以匹配/对比/赞美它所嵌入的网页，我已经制作了一个快速的 codepen 示例，说明我将如何去做：

iframe {
  filter:hue-rotate(160deg) saturate(3) brightness(0.9);
  -webkit-filter:hue-rotate(160deg) saturate(3) brightness(0.9);
}

http://codepen.io/anon/pen/QbboaW

我希望这会有所帮助！祝你好运。