问题描述
我正在尝试添加带有控件的Google Maps Traffic Layer,因为我对此很陌生,所以无法弄清楚。我已经从互联网上得到了下面的脚本,并进行了一些微调,但我无法弄清楚如何将控制权导入地图。我只需要一种方法来为普通用户打开和关闭流量层,所以如果有更好的方法比将控制添加到地图上,我为任何事情做好准备。谢谢。
I am trying to add the Google Maps Traffic Layer with a control, and since I am so new with this, I cannot figure it out. I have gotten the below script from the internet with some fine tuning, but I cannot figure out how to get the control into the map. I just need a way to toggle the traffic layer on and off for the average user, so if there is a better way than to add the control to the map, I am up for anything. Thanks.
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);
推荐答案
首先,您的 addTrafficLayer 函数实际上初始化地图...两次。这个函数应该被命名为 init 或者类似的东西。下面是它的内容:
First of all, your addTrafficLayer function actually initializes the map... twice. This function should be named init or something similar instead. Here's what should go in it:
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 是非常简单:
The toggleTraffic is pretty simple:
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); } }
然后你只需要一些标记就可以了:
Then you just need some markup to get it going:
<div id="map"></div> <button id="trafficToggle">Toggle Traffic Layer</button>
请参阅此代码。
这篇关于将自定义控件添加到Google地图(添加交通图层切换)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!