向谷歌地图添加自定义控件（为交通层添加切换）

Question

我正在尝试添加带有控件的 Google Maps Traffic Layer，由于我对此很陌生，因此无法弄清楚。我已经通过一些微调从互联网上获得了以下脚本，但我无法弄清楚如何将控件放入地图。我只需要一种方法来为普通用户打开和关闭交通层，所以如果有比将控件添加到地图更好的方法，我愿意做任何事情。谢谢。

var map;
var chicago = new google.maps.LatLngBounds();

function HomeControl(controlDiv, map) {
    controlDiv.style.padding = '5px';

    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '2px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to set the map to Home';
    controlDiv.appendChild(conrolUI);

    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial.sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = '<b>Home</b>';
    controlUI.appendChild(controlText);


    googlemaps.event.addDomListener(controlUI, 'click', function() {
        map.setCenter(chicago)
    });

}

function addtrafficlayer() {
    var myLatlng = new google.maps.LatLngBounds();
    var mapDiv = document.getElementById('map');
    var mapOptions = {
        zoom: 13,
        maxWidth: 60,

    }

    map = new google.maps.Map(mapDiv, mapOptions);

    var homeControlDiv = document.createElement('div');
    var homeControl = newHomeControl(homeControlDiv, map);

    homeControlDiv.index = 1;
    map.controls(google.maps.ControlPosition.TOP_RIGHT).push(homeControlDiv);

    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', addtrafficlayer);

Answer 1

首先，你的addTrafficLayer函数实际上初始化了地图......两次。这个函数应该被命名init或类似的东西。这是它应该包含的内容：

function init() {
    var options = {
        zoom: 16,
        center: new google.maps.LatLng(40.747688, -74.004142),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), options);
    trafficLayer = new google.maps.TrafficLayer();
    google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic);
}

该toggleTraffic很简单：

function toggleTraffic(){
    if(trafficLayer.getMap() == null){
        //traffic layer is disabled.. enable it
        trafficLayer.setMap(map);
    } else {
        //traffic layer is enabled.. disable it
        trafficLayer.setMap(null);             
    }
}

然后你只需要一些标记来让它运行：

<div id="map"></div>
<button id="trafficToggle">Toggle Traffic Layer</button>

在此处查看此代码的实际运行情况。