Welke hulpmiddelen raadt u aan voor dit soort webkaarten?

Ik heb één toeristenkaart (skigebied) met gebouwen en wegen in .jpg-indeling. Het is een probleem omdat het noorden naar beneden is en het zuiden omhoog is (het is zo'n soort getekende kaart met een getekende berg op de kaart waar het eigenlijk zuiden is).

Ik moet het op de website zetten en er ook wat spelden op doen.

Welke tools en manieren raad jij mij aan? Het moet snel worden gedaan, dus geef me alsjeblieft een paar eenvoudige oplossingen.

7
Ik moet pinnen toevoegen zoals ik zei, maar met informatievensters. En later om een ​​optie te hebben om die pinnen te groeperen, zodat ik bijvoorbeeld restaurants kan selecteren en alleen die pinnen kan tonen die restaurants zullen laten zien.
toegevoegd de auteur Qmechanic, de bron
Gimp? Of heeft u andere vereisten die u ons niet hebt verteld?
toegevoegd de auteur mgkrebbs, de bron

3 antwoord

Met OpenLayers kun je overal op je website een kaart plaatsen met alleen je jpg-kaart (geen basislagen). De afbeelding moet een zo groot mogelijke resolutie hebben als je maar kunt krijgen! Zo niet, dan ondervindt u problemen bij het inzoomen zonder een vreselijk korrelig beeld te krijgen.

Hier is de voorbeeldcode waarmee u uw kaart kunt bouwen. Je zult ook de voorbeelden van de OpenLayers Markers moeten bekijken om te zien hoe je pins op je kaart kunt integreren;) Documentatie op die hier .

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ski Map</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">

<script src="../OpenLayers.js"></script>
<script type="text/javascript">
        var map;
        function init(){
            map = new OpenLayers.Map('map');

            var graphic = new OpenLayers.Layer.Image(
                'Ski Map',  //layer alias
                'http://link.to.ski.map.jpg',  //link to your ski map image
                new OpenLayers.Bounds(-180, -88.759, 180, 88.759), //global bounds, dont change this
                new OpenLayers.Size(resolutionX,resolutionY)  //resolution of your image in X,Y pixel size
            );
            map.addLayer(graphic);  //add image layer to map
            map.addControl(new OpenLayers.Control.LayerSwitcher());  //add some map controls
            map.zoomToMaxExtent();  //zoom out to ski maps extent
        }
</script> 
</head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>
11
toegevoegd

U kunt ook een eenvoudige imagemap gebruiken. Het vereist minder codering (eigenlijk is het zero code, alleen opmaak), het nadeel is dat de imagemaps niet inzoombaar zijn.

There are also web-based tools (search Google for others) to edit the image map, thus relieving you from the pain of hand typing the areas.

8
toegevoegd

Als het mogelijk is om de JPG naar vectoren te converteren, kunt u een klikbare SVG-afbeelding gebruiken.

Het gebruik van OpenLayers of iets dergelijks kan overkill zijn, tenzij u dynamisch moet kunnen scrollen, zoomen of punten moet toevoegen.

5
toegevoegd