Question

我的PHP文件带有以下要点：

{
  "Markers": [{
    "id": 0,
    "Marker": "greenIcon",
    "Name": "Name 01",
    "lat": "9.9834210",
    "lng": "13.643200",
    "photo": "http://www.mydomain.xyz/images/logo.jpg",
    "url": "http://www.mydomain.xyz/pages/1"
  }, {
    "id": 1,
    "Marker": "greenIcon",
    "Name": "Name 02",
    "lat": "9.423300",
    "lng": "43.134600",
    "photo": "http://www.mydomain.xyz/images/logo1.jpg",
    "url": "http://www.mydomain.xyz/pages/2"
  }, {
    "id": 21,
    "Marker": "redIcon",
    "Name": "Name 03",
    "lat": "9.939383",
    "lng": "23.63214",
    "photo": "http://www.mydomain.xyz/images/logo2.jpg",
    "url": "http://www.mydomain.xyz/pages/3"
  }, {
    "id": 53,
    "Marker": "redIcon",
    "Name": "Name 04",
    "lat": "9.51249",
    "lng": "11.623367",
    "photo": "http://www.mydomain.xyz/images/logo3.jpg",
    "url": "http://www.mydomain.xyz/pages/4"
  }, {
    "id": 3,
    "Marker": "redIcon",
    "Name": "Name 05",
    "lat": "9.983300",
    "lng": "34.9812735",
    "photo": "http://www.mydomain.xyz/images/logo4.jpg",
    "url": "http://www.mydomain.xyz/pages/5"
  }, {
    "id": 15,
    "Marker": "orangeIcon",
    "Name": "Name 06",
    "lat": "5.983300",
    "lng": "36.616600",
    "photo": "http://www.mydomain.xyz/images/logo5.jpg",
    "url": "http://www.mydomain.xyz/pages/6"
  }, {
    "id": 120,
    "Marker": "orangeIcon",
    "Name": "Name 07",
    "lat": "9.283300",
    "lng": "16.616600",
    "photo": "http://www.mydomain.xyz/images/logo6.jpg",
    "url": "http://www.mydomain.xyz/pages/7"
  }]
}

我也有运行良好的地图代码：

<div id="mapdiv"></div>
<p id="demo"></p>

function onLocationFound(e) {
  var radius = e.accuracy / 2;
  lat = e.latlng.lat;
  lng = e.latlng.lng;
  console.log(e.latlng);

  L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!");
  //L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
  //alert(e.message);
  console.log(e.message);
}

var map = L.map('mapdiv', {
  editable: true,
  fadeAnimation: false
}).setView([54.35070881441067, 18.641191756395074], 15);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 30,
  zoomControl: true,
  detectRetina: true
}).addTo(map);

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({
  setView: true,
  maxZoom: 16
});

let myFilter = ['grayscale:100%'];
let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
  attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
  filter: myFilter,
}).addTo(map);

lc = L.control.locate({
  strings: {
    title: "Show me where I am, yo!"
  }
}).addTo(map);

var LeafIcon = L.Icon.extend({
  options: {
    shadowUrl: 'leaf-shadow.png',
    iconSize: [38, 95],
    shadowSize: [50, 64],
    iconAnchor: [22, 94],
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76]
  }
});

var greenIcon = new LeafIcon({
  iconUrl: 'leaf-green.png'
}),
redIcon = new LeafIcon({
  iconUrl: 'leaf-red.png'
}),
orangeIcon = new LeafIcon({
  iconUrl: 'leaf-orange.png'
});

L.icon = function(options) {
  return new L.Icon(options);
};

L.marker([54.582801100000000, 18.373373800000000], {
  icon: greenIcon
}).addTo(map).bindPopup('<img src="https://ocdn.eu/pulscms-transforms/1/y-1k9kqTURBXy8wMDdiMWZiYWVhOWIwMDk0NjM5ZjU3ZDQ5NTAzMDgwZC5qcGVnkpUDAMyfzRO6zQsYkwXNAxTNAbyBoTAF">.<br> Easily customizable.');

L.marker([54.45070881441067, 18.541191756395074], {
  icon: greenIcon
}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');
L.marker([54.35070881441367, 18.641191756395774], {
  icon: redIcon
}).addTo(map).bindPopup('xxxxxxx.<br> Easily customizable.').openPopup();

L.marker([54.58273849989086, 18.373226338357547], {
  icon: greenIcon
}).addTo(map).bindPopup('yyyyyy.<br> Easily customizable.');

L.EditControl = L.Control.extend({
  options: {
    position: 'topleft',
    callback: null,
    kind: '',
    html: ''
  },
  onAdd: function(map) {
    var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
      link = L.DomUtil.create('a', '', container);

    link.href = '#';
    link.title = 'Create a new ' + this.options.kind;
    link.innerHTML = this.options.html;
    L.DomEvent.on(link, 'click', L.DomEvent.stop)
      .on(link, 'click', function() {
        window.LAYER = this.options.callback.call(map.editTools);
      }, this);
    return container;
  }
});

如何将标记从PHP文件加载到地图上？例如，PHP的路径为：www.mydomain.xyz/poi.php

我希望将这些点直接从PHP而不是目前在地图代码级别上加载到地图上。请帮助我。

Answer 1

要实现此目的，您可以向poi.php发出AJAX请求并循环遍历结果数组，为其中包含的每个对象调用L.marker()，如下所示：

$.ajax({
  url: 'path/to/poi.php',
  method: 'get',
  success: function(data) {
    data.Markers.forEach(function(poi) {
      L.marker([poi.lat, poi.lng], {icon: poi.Marker }).addTo(map);
    });
  }
});

Answer 2

除了AJAX之外，另一种方法是直接echo将数组从php转换为HTML。

例如：

<?php
/*
 * This is actually hardcoded.
 * If your datas are stored in DB, make sure to build your coordinate array and json_encode it
 */
$MyCoordinates = '{"Markers":[{"id":0,"Marker":"greenIcon","Name":"Name 01","lat":"9.9834210","lng":"13.643200","photo":"http://www.mydomain.xyz/images/logo.jpg","url":"http://www.mydomain.xyz/pages/1"},{"id":1,"Marker":"greenIcon","Name":"Name 02","lat":"9.423300","lng":"43.134600","photo":"http://www.mydomain.xyz/images/logo1.jpg","url":"http://www.mydomain.xyz/pages/2"},{"id":21,"Marker":"redIcon","Name":"Name 03","lat":"9.939383","lng":"23.63214","photo":"http://www.mydomain.xyz/images/logo2.jpg","url":"http://www.mydomain.xyz/pages/3"},{"id":53,"Marker":"redIcon","Name":"Name 04","lat":"9.51249","lng":"11.623367","photo":"http://www.mydomain.xyz/images/logo3.jpg","url":"http://www.mydomain.xyz/pages/4"},{"id":3,"Marker":"redIcon","Name":"Name 05","lat":"9.983300","lng":"34.9812735","photo":"http://www.mydomain.xyz/images/logo4.jpg","url":"http://www.mydomain.xyz/pages/5"},{"id":15,"Marker":"orangeIcon","Name":"Name 06","lat":"5.983300","lng":"36.616600","photo":"http://www.mydomain.xyz/images/logo5.jpg","url":"http://www.mydomain.xyz/pages/6"},{"id":120,"Marker":"orangeIcon","Name":"Name 07","lat":"9.283300","lng":"16.616600","photo":"http://www.mydomain.xyz/images/logo6.jpg","url":"http://www.mydomain.xyz/pages/7"}]}';
?>
<!-- your HTML code -->
<script type="text/javascript">
  var MyCoordinates = <?php echo $MyCoordinates; ?>
  function onLocationFound(e) {
  // The remain of your code

从php向地图添加标记

2 个答案: