Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
Pages: 1
- Sujet précédent - [openLayers][GeoExt] Problème avec la fonction addmarker dans firefox - Sujet suivant
#1 Sun 21 October 2012 23:02
- julien38
- Participant occasionnel
- Date d'inscription: 18 Oct 2008
- Messages: 30
[openLayers][GeoExt] Problème avec la fonction addmarker dans firefox
Bonjour,
Je rencontre un problème dans la conception de mon application carto. En effet, la page contenant mon application carto ne s'affiche pas dans firefox alors quelle fonctionne bien dans IE, Chrome et Safari. En passant la page avec Firebug Il semblerai que cela bloque au niveau de addmarker() lors de la création de mes marqueurs.
ReferenceError: addMarker is not defined
addMarker(longlat, popupClass, popupContentHTML);
Lorsque j'enlève la ligne
Code:
addMarker(longlat, popupClass, popupContentHTML);
la carte s'affiche du coup mais sans les markeurs.
Voici le code creant mes markeurs recuperer dans un BDD via Json (un markeur par layer) :
Code:
//creation marqueurs
AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, { 'autoSize': true});
var longlat, popupClass, currentPopup, popupContentHTML;
for (i = 0; i < coordx.length; i++)
{
nom_couche[i] = new OpenLayers.Layer.Markers();
map.addLayer(nom_couche[i]);
longlat = new OpenLayers.LonLat(coordx[i], coordy[i]).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
popupClass = AutoSizeAnchored;
popupContentHTML = description[i];
addMarker(longlat, popupClass, popupContentHTML);
function addMarker(longlat , popupClass, popupContentHTML, closeBox, overflow) {
var feature = new OpenLayers.Feature(nom_couche[i], longlat);
feature.closeBox = true;
feature.popupClass = popupClass;
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = "auto";
feature.data.icon = new OpenLayers.Icon(icones[i]);
var marker = feature.createMarker();
var markerClick = function (evt) {
if (currentPopup != null && currentPopup.visible()) {
currentPopup.hide();
}
map.setCenter (this.lonlat, map.zoom);
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
nom_couche[i].addMarker(marker);
}et le code complet de la page :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Cartographie</title>
<script src="lib/extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="lib/extjs/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css"/>
<script src="lib/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="lib/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="lib/GeoExt/resources/geoext-all-debug.css"/>
<script type="text/javascript" src="mediaplayer/jwplayer.js"></script>
<script type="text/javascript">
<?php
mysql_connect('xxx', 'xx', 'xxx') OR die('Erreur de connexion à la base');
mysql_select_db(xxx') OR die('Erreur de sélection de la base');
$requete = mysql_query('SELECT * FROM marqueurs') OR die('Erreur de la requête MySQL');
mysql_close();
/**
* On récupère les données
* Tant qu'une ligne sera présente, la boucle continuera
*/
while($row=mysql_fetch_array($requete)) {
$return[] = $row;
}
?>
var coordx = new Array;
var coordy = new Array;
var description = new Array;
var nom_couche = new Array;
var icones = new Array;
var lat=45.717556;
var lon=4.835064;
var zoom=15;
var map;
var map=null;
function onLoad() {
var obj = <?php print json_encode($return);?>;
for (i in obj) {
coordx[i] = obj[i].x;
coordy[i] = obj[i].y;
description[i] = obj[i].contenu;
icones[i] = obj[i].icon;
}
}
function cliqueDessus(evt) {
popup.toggle();
}
var rowCliked = false;
Ext.QuickTips.init();
Ext.onReady(function() {
onLoad();
//MapPanel
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution()],
maxResolution: 156543.0399,
numZoomLevels: 15,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat(4.835064, 45.717556).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
map.setCenter (lonLat, 15);
var mapPanel = new GeoExt.MapPanel({
map : map,
zoom: 15,
region : 'center'
,title : 'Carte interactive'
});
var control = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
eventListeners: {
measure: function(evt) {
alert("The measurement was " + evt.measure + evt.units);
}
}
});
//creation marqueurs
AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, { 'autoSize': true});
var longlat, popupClass, currentPopup, popupContentHTML;
for (i = 0; i < coordx.length; i++)
{
nom_couche[i] = new OpenLayers.Layer.Markers();
map.addLayer(nom_couche[i]);
longlat = new OpenLayers.LonLat(coordx[i], coordy[i]).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
popupClass = AutoSizeAnchored;
popupContentHTML = description[i];
addMarker(longlat, popupClass, popupContentHTML);
function addMarker(longlat , popupClass, popupContentHTML, closeBox, overflow) {
var feature = new OpenLayers.Feature(nom_couche[i], longlat);
feature.closeBox = true;
feature.popupClass = popupClass;
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = "auto";
feature.data.icon = new OpenLayers.Icon(icones[i]);
var marker = feature.createMarker();
var markerClick = function (evt) {
if (currentPopup != null && currentPopup.visible()) {
currentPopup.hide();
}
map.setCenter (this.lonlat, map.zoom);
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
nom_couche[i].addMarker(marker);
}
}
tree = new Ext.tree.TreePanel({
useArrows: true,
animate: true,
title: "Couches",
enableDD: true,
loader: new Ext.tree.TreeLoader(),
root: {
nodeType: "async",
expanded : true,
children: [{
text: 'Les installations',
checked: true,
draggable: false,
leaf: false,
expanded: true,
singleClickExpand: true,
children: [{
text: 'Les installations',
draggable: true,
checked: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
nom_couche[0].setVisibility(checked);// monMarker est une couche de type Markers
}
}
}]
,listeners:{
'checkchange': function(node, checked){
node.eachChild(function(n) {
n.getUI().toggleCheck(checked);
});
}
}
},
{
text: 'Les Metiers',
checked: true,
draggable: false,
leaf: false,
expanded: true,
singleClickExpand: true,
children: [{
text: 'Marinier',
draggable: true,
checked: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
nom_couche[1].setVisibility(checked);// monMarker est une couche de type Markers
}
}
}]
,listeners:{
'checkchange': function(node, checked){
node.eachChild(function(n) {
n.getUI().toggleCheck(checked);
});
}
}
}]
},
border: true,
height: 300,
autoScroll: true,
containerScroll: true,
rootVisible: false,
lines: false
});
//Data Panel
var accordion = new Ext.Panel({
margins : '5 0 5 5'
,split : true
,width : 360
,layout :'accordion'
,items : [tree]
});
var dataPanel = new Ext.Panel({
title : 'Légende'
,region : 'west'
,layout : 'fit'
,width : 260
,items : [accordion]
});
//Final User Interface
new Ext.Viewport({
layout: "border"
,items: [ mapPanel,dataPanel ]
});
});
</script>
</head>
<body>
<div id='layerlist'></div>
<div id="gxmap" style="width: 1000px; height: 700px"></div>
</body>
</html>Merci d'avance.
Dernière modification par julien38 (Tue 30 October 2012 12:42)
Hors ligne
Pages: 1
- Sujet précédent - [openLayers][GeoExt] Problème avec la fonction addmarker dans firefox - Sujet suivant
