小贝子编程

2 个脚本不能协同工作



我有一个脚本，在刷新页面时为我生成一个新图像。

现在我想添加一个自定义的谷歌地图。

但这两个并不协同工作，这取决于脚本的顺序。

https://paris.communauto.com/

感谢您的帮助

我需要你的帮助！

在我的主页上，我有

//For google map

var latitudeCenter = "";
var longitudeCenter = "";
var lastOpenedInfoWindow = "";
var mapsGenerated = "";
var infoMap = [];
var zoneCoords = [];
var miniZoneCoords = [];
var trou = new Array();
var comp = 0;
var comp2 = 0;
var mapStyles = [
{
"featureType": "poi",
"elementType": "labels",
"stylers": [{
visibility: "off"
}]
},
{
"elementType": "geometry.stroke",
"stylers": [{
"color": "#ffeb3b"
},
{
"saturation": -35
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.locality",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text",
"stylers": [{
"lightness": 35
}]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": -55
},
{
"weight": 0.5
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 30
}]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text",
"stylers": [{
"saturation": -90
},
{
"lightness": 50
},
{
"visibility": "on"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 30
}]
},
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -55
},
{
"lightness": 20
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -80
},
{
"lightness": 25
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 25
}]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -65
},
{
"lightness": 45
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 75
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": -25
},
{
"lightness": 35
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.local",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.local",
"elementType": "labels",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "transit.line",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -65
},
{
"lightness": 40
}
]
}
];
function initialize() {
for (var i = 0; i < mapsGenerated.length; i++) {

jQuery.ajax({
crossDomain: true,
ajaxI: i,
type: 'GET',
url: "https://restapifrontoffice.reservauto.net/api/v2/Branch/" + mapsGenerated[i][0] + "/AvailableCity?ReturnCitiesOfAssociatedBranches=true",
contentType: 'application/xml',
dataType: 'xml',
responseType: 'application/xml',
headers: {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'application/xml',
},
success: function(xml) {
i = this.ajaxI;
comp++;
jQuery(xml).find('BranchAvailableCityDTO').each(function() {
var branchIdXml = jQuery(this).find("BranchId").text();
var cityIdXml = jQuery(this).find("CityId").text();
if (mapsGenerated[i][1] == cityIdXml && mapsGenerated[i][0] == branchIdXml) {
latitudeCenter = parseFloat(jQuery(this).find("CityCenterLocation").children().eq(0).text());
longitudeCenter = parseFloat(jQuery(this).find("CityCenterLocation").children().eq(1).text());
infoMap.push({
id: i,
lat: latitudeCenter,
lng: longitudeCenter,
zoom: mapsGenerated[i][2],
branchId: mapsGenerated[i][0],
cityId: mapsGenerated[i][1]
});
}
});
if (comp == mapsGenerated.length) {
infoMap.sort(function(a, b) {
return (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0);
});
for (var i = 0; i < infoMap.length; i++) {
zoneCoords[i] = new Array();
jQuery.ajax({
ajaxI: i,
crossDomain: true,
type: 'GET',
url: "https://restapifrontoffice.reservauto.net/api/v2/Zone?ZoneTypeId=1&BranchId=" + infoMap[i].branchId + "&CityId=" + infoMap[i].cityId + "&IncludeAssociatedCities=false",
contentType: 'application/xml',
dataType: 'xml',
responseType: 'application/xml',
headers: {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'application/xml',
},
success: function(xml) {
i = this.ajaxI;
comp2++;

jQuery(xml).find('ZoneDetailDTO').each(function(index) {

zoneCoords[i][index] = new Array();

if ( !( infoMap[i].cityId == 105 && index <= 1)  )  { 
jQuery(this).find("Geometry").children("Coordinates").children("d4p1\:ArrayOfDouble").each(function() {
var latitude = parseFloat(jQuery(this).children().eq(1).text());
var longitude =  parseFloat(jQuery(this).children().eq(0).text());
zoneCoords[i][index].push({
index: index,
id: i,
city: infoMap[i].cityId,
lat: latitude,
lng: longitude
});
});
}
});

if (comp2 == infoMap.length) {

infoMap.sort(function(a, b) { return (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0); });

var maps = [];
var infowindow = "";
for (var i = 0; i < infoMap.length; i++) {
jQuery.ajax({
ajaxI: i,
crossDomain: true,
type: 'GET',
url: "https://restapifrontoffice.reservauto.net/api/v2/Station?" + infoMap[i].branchId + "&CityId=" + infoMap[i].cityId,
contentType: 'application/xml',
dataType: 'xml',
responseType: 'application/xml',
headers: {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'application/xml',
},
success: function(xml) {
comp2++;
i = this.ajaxI;

var point = infoMap[i];
var latlng = new google.maps.LatLng(point.lat, point.lng);

var mapOptions = {
center: latlng,
zoom: point.zoom,
minZoom: 8,
maxZoom: 16,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
styles: mapStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
maps[i] = new google.maps.Map(document.getElementById('map' + (i + 1)), mapOptions);

if (zoneCoords[i].length) {

for (var y = 0; y < zoneCoords[i].length; y++) {
miniZoneCoords[y] = new Array();
trou[y] = new Array();
for (var z = 0; z < zoneCoords[i][y].length; z++) { 
miniZoneCoords[y][z] = new google.maps.LatLng( zoneCoords[i][y][z].lat, zoneCoords[i][y][z].lng );
}
}

var Zones = new google.maps.Polygon({
paths: miniZoneCoords,
strokeColor: "#228BE6",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#228BE6",
fillOpacity: 0.15,
});

Zones.setMap(maps[i]);

}

jQuery(xml).find('StationDTO').each(function() {
var name = jQuery(this).find("StationName").text();
var stationNumber = jQuery(this).find("StationNb").text();
var latitude = parseFloat(jQuery(this).find("Location").children(":first").text());
var longitude = parseFloat(jQuery(this).find("Location").children().eq(1).text());

infowindow = new google.maps.InfoWindow();
marker = new google.maps.Marker({
position: {
lat: latitude,
lng: longitude
},
map: maps[i],
icon: "https://www.communauto.com/lib/img/MAP/icon_vert.png"
});
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
closeLastOpenedInfoWindow();
var nom = 'Station ' + stationNumber;
infowindow.setContent('<span style="color:#8dc63f; font-weight:bold;">' + nom + '</span><br><span style="color:#4A5866;">' + name + '</span>');
infowindow.open(maps[i], marker);
lastOpenedInfoWindow = infowindow;
}
})(marker, infowindow));
function closeLastOpenedInfoWindow() {
if (lastOpenedInfoWindow) {
lastOpenedInfoWindow.close();
}
}
var listener = google.maps.event.addListener(maps[i], "idle", function() {
google.maps.event.removeListener(listener);
});
});
maps[i].setCenter(mapOptions.center);
}
});
}
}
}
});
}
}
}
})
}
}

function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
// id de la branche
// id de la ville
// zoom voulu
mapsGenerated = [
[4, 96, 12]
];
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=geometry,drawing&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;

//for random image background
window.onload = function () {
var header = document.getElementById('header');
var pictures = new Array('https://paris.communauto.com/wp-content/uploads/2021/12/accueil-paris-3.webp','https://paris.communauto.com/wp-content/uploads/2021/12/accueil-paris-2.webp','https://paris.communauto.com/wp-content/uploads/2021/12/accueil-paris-4.webp','https://paris.communauto.com/wp-content/uploads/2021/12/accueil-communauto-paris.webp');
var numPics = pictures.length;
if (document.images) {
var chosenPic = Math.floor((Math.random() * numPics));
header.style.background = 'url(' + pictures[chosenPic] + ')';
}
}
[id^=map] {
border: 1px solid #dcdcdc;
height:500px;
margin: 0 0 1em; 
width:100%; 
} 
[id^=map] a { 
text-decoration:none;
}
/* Create four equal columns that floats next to each other */
.column-legend-map {
float: left;
width: 33%;
text-align: center!important;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.img-legend{
margin-left: auto;
margin-right: auto;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column-legend-map {
width: 100%;
}
}
<div style="width:100%; height: 500px; display: inline-block; overflow: hidden;">
<div id="map1"></div>
</div>

您的代码：var header = document.getElementById('header');

但没有元素id＝header

//For google map

var latitudeCenter = "";
var longitudeCenter = "";
var lastOpenedInfoWindow = "";
var mapsGenerated = "";
var infoMap = [];
var zoneCoords = [];
var miniZoneCoords = [];
var trou = new Array();
var comp = 0;
var comp2 = 0;
var mapStyles = [
{
"featureType": "poi",
"elementType": "labels",
"stylers": [{
visibility: "off"
}]
},
{
"elementType": "geometry.stroke",
"stylers": [{
"color": "#ffeb3b"
},
{
"saturation": -35
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.locality",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text",
"stylers": [{
"lightness": 35
}]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": -55
},
{
"weight": 0.5
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 30
}]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text",
"stylers": [{
"saturation": -90
},
{
"lightness": 50
},
{
"visibility": "on"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 30
}]
},
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -55
},
{
"lightness": 20
}
]
},
{
"featureType": "landscape.natural.landcover",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -80
},
{
"lightness": 25
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 25
}]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -65
},
{
"lightness": 45
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"lightness": 75
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"saturation": -25
},
{
"lightness": 35
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.highway",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.local",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "road.local",
"elementType": "labels",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "transit.line",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"saturation": -65
},
{
"lightness": 40
}
]
}
];
function initialize() {
for (var i = 0; i < mapsGenerated.length; i++) {

jQuery.ajax({
crossDomain: true,
ajaxI: i,
type: 'GET',
url: "https://restapifrontoffice.reservauto.net/api/v2/Branch/" + mapsGenerated[i][0] + "/AvailableCity?ReturnCitiesOfAssociatedBranches=true",
contentType: 'application/xml',
dataType: 'xml',
responseType: 'application/xml',
headers: {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'application/xml',
},
success: function(xml) {
i = this.ajaxI;
comp++;
jQuery(xml).find('BranchAvailableCityDTO').each(function() {
var branchIdXml = jQuery(this).find("BranchId").text();
var cityIdXml = jQuery(this).find("CityId").text();
if (mapsGenerated[i][1] == cityIdXml && mapsGenerated[i][0] == branchIdXml) {
latitudeCenter = parseFloat(jQuery(this).find("CityCenterLocation").children().eq(0).text());
longitudeCenter = parseFloat(jQuery(this).find("CityCenterLocation").children().eq(1).text());
infoMap.push({
id: i,
lat: latitudeCenter,
lng: longitudeCenter,
zoom: mapsGenerated[i][2],
branchId: mapsGenerated[i][0],
cityId: mapsGenerated[i][1]
});
}
});
if (comp == mapsGenerated.length) {
infoMap.sort(function(a, b) {
return (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0);
});
for (var i = 0; i < infoMap.length; i++) {
zoneCoords[i] = new Array();
jQuery.ajax({
ajaxI: i,
crossDomain: true,
type: 'GET',
url: "https://restapifrontoffice.reservauto.net/api/v2/Zone?ZoneTypeId=1&BranchId=" + infoMap[i].branchId + "&CityId=" + infoMap[i].cityId + "&IncludeAssociatedCities=false",
contentType: 'application/xml',
dataType: 'xml',
responseType: 'application/xml',
headers: {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'application/xml',
},
success: function(xml) {
i = this.ajaxI;
comp2++;

jQuery(xml).find('ZoneDetailDTO').each(function(index) {

zoneCoords[i][index] = new Array();

if ( !( infoMap[i].cityId == 105 && index <= 1)  )  { 
jQuery(this).find("Geometry").children("Coordinates").children("d4p1\:ArrayOfDouble").each(function() {
var latitude = parseFloat(jQuery(this).children().eq(1).text());
var longitude =  parseFloat(jQuery(this).children().eq(0).text());
zoneCoords[i][index].push({
index: index,
id: i,
city: infoMap[i].cityId,
lat: latitude,
lng: longitude
});
});
}
});

if (comp2 == infoMap.length) {

infoMap.sort(function(a, b) { return (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0); });

var maps = [];
var infowindow = "";
for (var i = 0; i < infoMap.length; i++) {
jQuery.ajax({
ajaxI: i,
crossDomain: true,
type: 'GET',
url: "https://restapifrontoffice.reservauto.net/api/v2/Station?" + infoMap[i].branchId + "&CityId=" + infoMap[i].cityId,
contentType: 'application/xml',
dataType: 'xml',
responseType: 'application/xml',
headers: {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'application/xml',
},
success: function(xml) {
comp2++;
i = this.ajaxI;

var point = infoMap[i];
var latlng = new google.maps.LatLng(point.lat, point.lng);

var mapOptions = {
center: latlng,
zoom: point.zoom,
minZoom: 8,
maxZoom: 16,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
styles: mapStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
maps[i] = new google.maps.Map(document.getElementById('map' + (i + 1)), mapOptions);

if (zoneCoords[i].length) {

for (var y = 0; y < zoneCoords[i].length; y++) {
miniZoneCoords[y] = new Array();
trou[y] = new Array();
for (var z = 0; z < zoneCoords[i][y].length; z++) { 
miniZoneCoords[y][z] = new google.maps.LatLng( zoneCoords[i][y][z].lat, zoneCoords[i][y][z].lng );
}
}

var Zones = new google.maps.Polygon({
paths: miniZoneCoords,
strokeColor: "#228BE6",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#228BE6",
fillOpacity: 0.15,
});

Zones.setMap(maps[i]);

}

jQuery(xml).find('StationDTO').each(function() {
var name = jQuery(this).find("StationName").text();
var stationNumber = jQuery(this).find("StationNb").text();
var latitude = parseFloat(jQuery(this).find("Location").children(":first").text());
var longitude = parseFloat(jQuery(this).find("Location").children().eq(1).text());

infowindow = new google.maps.InfoWindow();
marker = new google.maps.Marker({
position: {
lat: latitude,
lng: longitude
},
map: maps[i],
icon: "https://www.communauto.com/lib/img/MAP/icon_vert.png"
});
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
closeLastOpenedInfoWindow();
var nom = 'Station ' + stationNumber;
infowindow.setContent('<span style="color:#8dc63f; font-weight:bold;">' + nom + '</span><br><span style="color:#4A5866;">' + name + '</span>');
infowindow.open(maps[i], marker);
lastOpenedInfoWindow = infowindow;
}
})(marker, infowindow));
function closeLastOpenedInfoWindow() {
if (lastOpenedInfoWindow) {
lastOpenedInfoWindow.close();
}
}
var listener = google.maps.event.addListener(maps[i], "idle", function() {
google.maps.event.removeListener(listener);
});
});
maps[i].setCenter(mapOptions.center);
}
});
}
}
}
});
}
}
}
})
}
}

function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
// id de la branche
// id de la ville
// zoom voulu
mapsGenerated = [
[4, 96, 12]
];
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAt4c6dmsaJ9pPJi_xPk4qw_7BdHgV2YTE&v=3.exp&libraries=geometry,drawing&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;

//for random image background
window.onload = function () {
var header = document.getElementById('header');
var pictures = new Array('https://paris.communauto.com/wp-content/uploads/2021/12/accueil-paris-3.webp','https://paris.communauto.com/wp-content/uploads/2021/12/accueil-paris-2.webp','https://paris.communauto.com/wp-content/uploads/2021/12/accueil-paris-4.webp','https://paris.communauto.com/wp-content/uploads/2021/12/accueil-communauto-paris.webp');
var numPics = pictures.length;
if (document.images) {
var chosenPic = Math.floor((Math.random() * numPics));
header.style.background = 'url(' + pictures[chosenPic] + ')';
}
}
[id^=map] {
border: 1px solid #dcdcdc;
height:500px;
margin: 0 0 1em; 
width:100%; 
} 
[id^=map] a { 
text-decoration:none;
}
/* Create four equal columns that floats next to each other */
.column-legend-map {
float: left;
width: 33%;
text-align: center!important;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.img-legend{
margin-left: auto;
margin-right: auto;
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column-legend-map {
width: 100%;
}
}
<div id="header" style="width:100%; height: 500px; display: inline-block; overflow: hidden;">
<div id="map1"></div>
</div>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium