我很感激帮助在一个页面上设置两个Google地图(API 3)。他们有一些共享风格。我可以一个人跑,但不能一个人跑。
这是脚本......
<script type="text/javascript">
function initialize() {
var styles = [
....
];
var hulloptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.7413176, -0.3353987),
zoom: 15,
mapTypeId: 'StyledHull'
};
var leedsoptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.796177,-1.541862),
zoom: 15,
mapTypeId: 'StyledLeeds'
};
maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
var rfdMarkerHull = new google.maps.Marker({
position: HullLatLng,
map: maphull,
icon: image
});
var rfdMarkerLeeds = new google.maps.Marker({
position: LeedsLatLng,
map: leedshull,
icon: image
});
var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
答案 0 :(得分:0)
这两行看起来不正确:
var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
您是否在JavaScript控制台上遇到错误?
我认为你的意思是:
var styledMapTypeHull = new google.maps.StyledMapType( styles, {
name: 'RFD Hull'
});
var styledMapTypeLeeds = new google.maps.StyledMapType( styles, {
name: 'RFD Leeds'
});
(对于较短的线条也略微重新格式化)
这里有一些more information and a working example。
现在,我在Chrome中打开开发者工具后尝试了第二张地图,我发现在它到达目前为止还有其他错误。
首先警告:
Warning: you have included the Google Maps API multiple times
on this page. This may cause unexpected errors.
然后在lazyload
plugins.js
$(".lazy").lazyload({
effect: "fadeIn",
effectspeed: 600,
failure_limit: 10
});
然后在一些Maps API压缩代码中出现了一个神秘的错误,但如果你看一下调用堆栈,你会在堆栈中看到你的initialize
函数,如果你点击它就会转到这一行:
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
将其粘贴到JavaScript控制台中,您将看到错误:
document.getElementById("map-leeds")
之后出现更多错误,甚至在查看代码时遇到的问题。
所以你要做一些调试。您熟悉Chrome或其他浏览器中的开发者工具吗?如果没有,现在是时候了!这是great introduction to the Chrome DevTools。
答案 1 :(得分:0)
您的问题是(您需要使用调试器运行代码):
拼写错误(map: mapleeds,
不是map: leedshull,
订购,您无法在初始化之前使用变量
这些无效:google.maps.StyledMapTypeHull
,google.maps.StyledMapTypeLeeds
(可能是搜索和替换出错了。应该是google.maps.StyledMapType
<script type="text/javascript">
var maphull = null;
var mapleeds = null;
function initialize() {
var styles = [
{
stylers: [
{ saturation: -100 }
]
},{
featureType: 'water',
elementType: 'all',
stylers: [
{ lightness: -74 },
{ visibility: 'on' }
]
},{
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ lightness: -26 },
{ visibility: 'simplified' }
]
},{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ hue: '#efefef' },
{ lightness: 83 },
{ visibility: 'simplified' }
]
},{
featureType: 'poi',
elementType: 'all',
stylers: [
{ hue: '#999999' },
{ saturation: -100 },
{ lightness: -23 },
{ visibility: 'on' }
]
},{
featureType: 'road',
elementType: 'labels',
stylers: [
{ saturation: -100 },
{ visibility: 'on' }
]
}
];
var hulloptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.7413176, -0.3353987),
zoom: 15,
mapTypeId: 'StyledHull'
};
var leedsoptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.796177,-1.541862),
zoom: 15,
mapTypeId: 'StyledLeeds'
};
var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
var styledMapTypeHull = new google.maps.StyledMapType(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapType(styles, { name: 'RFD Leeds' });
maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
var rfdMarkerHull = new google.maps.Marker({
position: HullLatLng,
map: maphull,
icon: image
});
var rfdMarkerLeeds = new google.maps.Marker({
position: LeedsLatLng,
map: mapleeds,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>