Встраивание OpenStreetMap в пользовательский плагин WordPress - PullRequest
Новая
       14

Встраивание OpenStreetMap в пользовательский плагин WordPress

0 голосов
/ 22 мая 2019

Я создаю плагин для WordPress, который включает использование карт и пользовательских маркеров.Я хочу отделить карту от маркера, чтобы пользователь мог создавать собственные маркеры для кроссплатформенной платформы и сохранять данные маркера на своей странице WordPress.

Я установил сервер разработки на Raspberry Pi 3 B, сжесткий диск 2 терабайта, с которого он загружается.Я настроил сервер плиток OpenStreetMap в Северной Америке для практики и получил его через мой HTML-файл в / var / www / html, который проходит через сервер LAMP, который также включает мой веб-сервер разработки WordPress. 

    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title>Public Transport Lines - &Ouml;V-Linien - openptmap.org</title>
    <link rel="shortcut icon" href="favicon_pt.png">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style>  /* avoid empty tiles */ .olImageLoadError {display: none;} 
    </style>
    <script src="OpenLayers.js" type="text/javascript"></script>
    <script src="OpenStreetMap.js" type="text/javascript"></script>
    <script type="text/javascript">
    var map;
    function init() {
    // The overlay layer for our marker, with a simple diamond as symbol
    var overlay = new OpenLayers.Layer.Vector('Overlay', {
    styleMap: new OpenLayers.StyleMap({
        externalGraphic: '../img/marker.png',
        graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
        title: '${tooltip}'
    })
    });

    // The location of our marker and popup. We usually think in geographic
    // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point(10.2, 48.9)
    .transform('EPSG:4326', 'EPSG:3857');
   // We add the marker with a tooltip text to the overlay
overlay.addFeatures([
    new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
    ]);
   // A popup with some information about our location
   var popup = new OpenLayers.Popup.FramedCloud("Popup", 
    myLocation.getBounds().getCenterLonLat(), null,
    '<a target="_blank" href="http://openlayers.org/">We</a> ' +
    'could be here.<br>Or elsewhere.', null,
    true // <-- true if we want a close (X) button, false otherwise
);

// Finally we create the map
map = new OpenLayers.Map({
    div: "map", projection: "EPSG:3857",
    layers: [new OpenLayers.Layer.OSM(), overlay],
    center: myLocation.getBounds().getCenterLonLat(), zoom: 15
});
// and add the popup to it.
map.addPopup(popup);
}
</script>
</head>
<body onload="init();">
<div style="width:100%; height:100%;" id="map"></div><br></body>
    </html>

Это пример созданного мной примера маркера, с помощью которого я могу использовать короткий код для ссылки в своем плагине, но я не могу заставить скрипты запускаться в самом плагине с результатами на карте.

Например, когда я запускаю этот скрипт в своем плагине, прикрепленном к простому iframe map.html, он ничего не делает.

...