私はOpenStreetMapを初めて使用し、wikiとネットを閲覧していて、どこにもチュートリアルが見つからないようですが、ネットで例を見てきました。
基本的に、MySQLデータベースから緯度と経度を取得してマップにプロットする独自のOpenStreetmapとプロットマーカーを生成したいと思います。ユーザーがマークをクリックすると、ポップアップが表示されます。基本的に私はこのhttp://code.google.com/apis/maps/articles/phpsqlajax.htmlが欲しいのですが、GoogleマップではなくOpenStreetMap用です。
マップのレンダリングにopenLayerを使用しているようです。ここにいくつかの例とAPIドキュメントがあります。
これを実現するには、「スリッピーマップ」インターフェイスにマーカーを表示するためのJavaScriptを理解する必要があります。
OpenLayersは、人気のあるjavascriptライブラリの名前です。これは無料でオープンソースです。これは、OpenStreetMap.orgホームページ、およびWeb上の他のさまざまなサイトに滑りやすい地図を表示するために使用されます。OpenStreetMap自体と混同されることがよくあります。または、サイトにOpenStreetMapマップを埋め込みたい場合は、OpenLayersを使用する必要があるという印象を誤って受けます。違います。滑りやすい地図を表示するための代替JavaScriptライブラリがたくさんあります
...グーグルマップAPIを含む！グーグルマップの表示を設定できますが、グーグルタイルの代わりにOpenStreetMapの「タイル」画像を表示します。Googleマップの例を参照してください。これには、コードの互換性という利点があります。つまり、そこにリンクしたGoogleマップのチュートリアルをたどることができますが、ちょっとしたコードをドロップして、OpenStreetMapをタイルレイヤーとして指定できます。
これには、大きな邪悪なグーグルのロゴを表示し、さらに邪悪なグーグルマップのAPIキーを必要とするという欠点があるため、すべてのクールな子供たちはOpenLayersを使用しています。
OpenStreetMapwikiでOpenLayersを使用するさまざまな例があります。「OpenLayersDynamicPOI」の例は、マーカー用のデータベースの使用を示しています（ただし、この例は少し複雑です）。 私のサイトの別のポップアップの例
お役に立てば幸い
// Sample code by August Li
// Modified by Tom Moore to work with SQL
var zoom, center, currentPopup, map, lyrMarkers;
var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
"autoSize": true,
"minSize": new OpenLayers.Size(300, 50),
"maxSize": new OpenLayers.Size(500, 300),
"keepInMap": true
});
var bounds = new OpenLayers.Bounds();
var lat=36.287179515680556;
var lon=-96.69170379638672;
var zoom=11;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(
new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
// begin addMarker function
// info1 I was going to use to add a tooltip. Haven't figured out
// how to do that in OpenLayers yet :( Someone who knows share that with us
// iconurl is the url to the png file that you want to use for the icon.
// you MUST call addMarker at least once to initialize the map
function addMarker(lat, lng, info, info1, iconurl) {
// First check to see if the map has been initialized. If not, do that now ...
if (map == null) {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 19,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
};
map = new OpenLayers.Map("map", options);
map.addControl(new OpenLayers.Control.PanZoomBar());
var lyrOsm = new OpenLayers.Layer.OSM();
map.addLayer(lyrOsm);
lyrMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(lyrMarkers);
//add marker on given coordinates
map.setCenter(lonLat, zoom);
zoom = map.getZoom();
}
var iconSize = new OpenLayers.Size(36, 36);
var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
var icon = new OpenLayers.Icon(iconurl, iconSize, iconOffset);
var pt = new OpenLayers.LonLat(lng, lat).transform(
new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
bounds.extend(pt);
var feature = new OpenLayers.Feature(lyrMarkers, pt);
feature.closeBox = true;
feature.popupClass = popupClass;
feature.data.popupContentHTML = info;
feature.data.overflow = "auto";
var marker = new OpenLayers.Marker(pt, icon.clone());
var markerClick = function(evt) {
if (currentPopup != null && currentPopup.visible()) {
currentPopup.hide();
}
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);
lyrMarkers.addMarker(marker);
}
// end addMarker function
よろしくお願いします！これが機能するためにこれを必要とする誰かに役立つことを願っています...