Google地图切换按钮 [英] Google Maps toggle button
问题描述
这是您可以看到的页面的链接。地图上方的按钮正在工作，我将删除它们。地图上的按钮不起作用，我试图去工作。
这是代码。 var radarButton和var satButton是新的。下面的那个是当前按钮。
jQuery（document）.ready（function（$）{
var mapTypeId = wundermap.getMapTypeId（hyb ）;
var googlemap = new google.maps.Map（$（＃map）[0]，{
center：new google.maps.LatLng（32.782878，-96.609862），
panControl：false，
zoom：6，
mapTypeId：mapTypeId，
mapTypeControl：true，
mapTypeControlOptions：{
style：google.maps.MapTypeControlStyle.DROPDOWN_MENU
}，
zoomControl：true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL，
position：google.maps.ControlPosition.RIGHT_TOP $ b $
var radarOptions = {
gmap：googlemap，
name：'Radar'，
position：google.maps。 ControlPosition.TOP_RIGHT，
action：function（）{
if（wundermap.map.overlayMa pTypes.length == 0）{
wundermap.map.overlayMapTypes.push（null）; //创建空覆盖条目
wundermap.map.overlayMapTypes.setAt（1，Radar）;
}
else {
wundermap.map.overlayMapTypes.clear（）;
}
}
}
var radarButton = new buttonControl（radarOptions）;
var satOptions = {
gmap：googlemap，
名称：'Satellite'，
位置：google.maps.ControlPosition.TOP_RIGHT，
操作： function（）{
if（wundermap.map.overlayMapTypes.length == 0）{
wundermap.map.overlayMapTypes.push（null）; //创建空覆盖条目
wundermap.map.overlayMapTypes.setAt（1，Satellite）;
}
else {
wundermap.map.overlayMapTypes.clear（）;
}
}
}
var satButton = new buttonControl（satOptions）;
wundermap.setOptions（{
map：googlemap，
refreshPeriod：60000，
units：english，
debug：0，
源：wxmap，
StreetsOverlay：true，
图层：[
{
图层：Radar，
active：on，
不透明度：70，
类型：N0R，
type2：，
动画：{
num：6，
最多10，
延迟：25
}，
stormtracks：off，
smooth：on，
子域：radblast-aws
}，
{
图层：Satellite，
defaultUI：0，
不透明度：85，
来源：，
active：off，
动画：{
num：1，
max：8，
延迟：25
}
}，
]，
}）;
wundermap.initialize（）;
}）;
以下是实际图层代码的链接。该代码需要很长时间才能发布，但叠加层称为雷达。
开始的地方是JavaScript控制台。首先，当页面被加载时，你在wxgr3radar.php的第286行有一个错误：
< body onload =initialize（）>
您的 initialize（）函数在哪里定义？然后，当我点击Satellite按钮时，它停在imap.js的第41行，因为 map .overlayMapTypes 未定义：
if（map.overlayMapTypes.length == 0）{
这里您期望 map 是一个地图API对象，但 map 不是您认为的那样。在调试器中查看它。它是一个DOM元素，而不是Maps API地图。您的Maps API地图位于名为 googlemap 的变量中，您可以在imap.js的第3行中创建它。
I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
jQuery(document).ready(function($) {
var mapTypeId = wundermap.getMapTypeId("hyb");
var googlemap = new google.maps.Map($("#map")[0], {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 6,
mapTypeId: mapTypeId,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
var radarOptions = {
gmap: googlemap,
name: 'Radar',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Radar);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var radarButton = new buttonControl(radarOptions);
var satOptions = {
gmap: googlemap,
name: 'Satellite',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Satellite);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var satButton = new buttonControl(satOptions);
wundermap.setOptions({
map: googlemap,
refreshPeriod: 60000,
units: "english",
debug: 0,
source: "wxmap",
StreetsOverlay: true,
layers: [
{
layer: "Radar",
active: "on",
opacity: 70,
type: "N0R",
type2: "",
animation: {
num: 6,
max: 10,
delay: 25
},
stormtracks: "off",
smooth: "on",
subdomain: "radblast-aws"
},
{
layer: "Satellite",
defaultUI: 0,
opacity: "85",
source: "",
active: "off",
animation: {
num: 1,
max: 8,
delay: 25
}
},
],
});
wundermap.initialize();
});
Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar.
The place to start is the JavaScript console. The error messages there tell you what the problems are.
First, when the page is loaded you have an error on line 286 of wxgr3radar.php:
<body onload="initialize()">
Where is your initialize() function defined? I don't see it in your code.
Then, when I click the Satellite button it stops on line 41 of imap.js because map.overlayMapTypes is undefined:
if (map.overlayMapTypes.length==0) {
Here you're expecting map to be a Maps API object, but map is not what you think it is. Look at it in the debugger. It's a DOM element, not a Maps API map. Your Maps API map is in a variable called googlemap, which you create in line 3 of imap.js.
这篇关于Google地图切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
