彩色Google地图

时间:2015-04-27 10:46:37

标签: javascript css json google-maps google-maps-api-3

我正在联系我们页面修改使用谷歌地图的网站。当前地图中的主要颜色是蓝色,我需要将其更改为红色。我通过应用background-color属性尝试了 CSS 规则,但它不会影响地图。我用google搜索,发现 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创建新地图?任何帮助表示赞赏

0 个答案:

没有答案