Карты Open Street Map в обработке

1. PitMal 10 13.01.25 10:39 Сейчас в теме
Перестали работать карты в макете html после переноса конфигурации на новое рабочее место ОС Windows 7 1C 8.3.25 пробовал обновить до 8.3.26 изменений нет. На старом рабочем месте была установлена Windows 10. Построение маршрута работает, построение трека работает, вместо карты квадратики... грусть печаль.
На Widows 10 (в другой сети все работает отлично), на домашней машине с OS Windows 10, отображает только часть плиток, если открываю текст html в браузере, то все работает.
<!DO CTYPE HTML>
<ht ml lang="en">
  <head>
    <met a charset="utf-8" />
    <met a name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
[*]
<sc ript src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></sc ript>

    <st yle>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <sc ript>
      // initialize Leaflet
      var map = L.map('map').setView({lon: 0, lat: 0}, 2);

      // add the OpenStreetMap tiles
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      // show the scale bar on the lower left corner
      L.control.scale().addTo(map);

      // show a marker on the map
     // L.marker({lon: 0, lat: 0}).bindPopup('The center of the world').addTo(map);
    </sc ript>
  </body>
</html>
Показать
Прикрепленные файлы:
По теме из базы знаний
Найденные решения
4. PitMal 10 27.03.25 08:06 Сейчас в теме
Остальные ответы
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
2. bekish_sergey 25.03.25 20:20 Сейчас в теме
Добрый день решили проблему?
3. PitMal 10 27.03.25 06:49 Сейчас в теме
4. PitMal 10 27.03.25 08:06 Сейчас в теме
5. PitMal 10 27.03.25 08:23 Сейчас в теме
Рабочий вариант кода, внимание на стили
<!DO CTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><ht ml><head>
<met a charset="UTF-8" http-equiv="content-type" content="text/html;charset=utf-8">
<met a name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenStreetMap</title>
[*]
[*]
<sc ript src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></sc ript>
<sc ript src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.js" integrity="sha512-FW2A4pYfHjQKc2ATccIPeCaQpgSQE1pMrEsZqfHNohWKqooGsMYCo3WOJ9Zt­ZRzikxtMAJft+Kz0Lybli0cbxQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></sc ript>
<st yle>
      #map {
        height: 100%;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .marker {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        font-size: medium;
        font-weight: 700;
        border-radius: 50%;
        background-color: #fff;
        border: solid 3px;
        border-color: #5158bb;
        color: #5158bb;
      }
    </style><ba se href="/redirect.php?url=djhjb25maWc6Ly9hOGMwN2Q0Yy0xMDAyLTQwOWQtOTA5My02MDI1YTA3ODFhYWEvbWRvYmplY3QvaWRiYTlmMWE0Zi1iNzg0LTQzNjMtOTY1Ni04MjcxZTEwNzYyNGYvOGViNGZhZDEtMWZhNi00MDNlLTk3MGYtMmMxMmRiYjQzZTIz"></head>
<body>
    
<div id="map" class="leaflet-container leaflet-fade-anim leaflet-grab leaflet-touch-drag" tabindex="0" style="position: relative;">
<sc ript>
      // Map initialization
      //!!! Warning! if this make "attributionControl: true" all see ukrain flag !!!!
      const map = L.map("map", { attributionControl: false }).setView(
        [56.5718, 104.1292],
        13
      );
		
	  
      
      const tiles = L.tileLayer(
        "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          maxZoom: 19,
        }
      ).addTo(map);

      // Markers
      let routingControl;
      let markers = [];
      let distance = 0;
      let time = 0;
      let instructions;
      let LatLngRouter;
	 
	 osrmv1 = L.Routing.osrmv1();	 
 	 function getLatLngRouter(LatLngRouter){
     LatLngRouter=osrmv1.route([{latLng: L.latLng(57.74, 11.94)}, { latLng: L.latLng(57.6792, 11.949)}], (err, route) => console.log(route[0].coordinates));
 }
	 
      const markerIcon = new L.DivIcon({
        className: "marker",
        
        iconSize: [35, 35],
      });

      function onMapClick(e) {
        addMarker(e.latlng);
      }

      function addMarker(latlng) {
        if (routingControl) return;
        const marker = L.marker(latlng, { icon: markerIcon }).addTo(map);
        map.panTo(marker.getLatLng());
        markers.push(marker);
      }

      map.on("click", onMapClick);

      function buildRoute() {
        routingControl = L.Routing.control({
          waypoints: markers.map((marker) => marker.getLatLng()),
          routeWhileDragging: true,
          //showAlternatives:true,
          
          //
          createMarker: function () {
            return null;
          },
          language: "ru",
          lineOptions: {
            styles: [{ color: "#5158bb", opacity: 1, weight: 5 }],
          },
        }).addTo(map);

        routingControl.on("routesfound", function (e) {
          distance = e.routes[0].summary.totalDistance;
          time = e.routes[0].summary.totalTime;
          instructions = e.routes[0].instructions;
        });
      }

      function getLastMarkerLocation() {
        if (markers.length === 0) return null;
        const latlng = markers[markers.length - 1].getLatLng();
        return [latlng.lat, latlng.lng];
      }

      function getRouteInfo() {
        return JSON.stringify({
          distance,
          time,
          instructions,
        });
      }

      function removeRouting() {
        if (routingControl) {
          map.removeControl(routingControl);
          routingControl = undefined;
          distance = 0;
          time = 0;
          instructions = undefined;
        }
      }

      function removeAllMarkers() {
        for (i = 0; i < markers.length; i++) {
          map.removeLayer(markers[i]);
        }
        markers = [];
      }
    </sc ript></body></html>
Показать
Оставьте свое сообщение

Для получения уведомлений об ответах подключите телеграм бот:
Инфостарт бот