Nawab Ahmad Ответов: 1

Пытаясь переместить центральную позицию карты со смещением pixcel, но получая ошибку! !


Trying to move the the center position of map with pixcel offset but getting error!!


Ошибка Excat ниже:

Uncaught TypeError: Cannot read property 'fromLatLngToPoint' of undefined


Что я уже пробовал:

<pre lang="HTML"><pre><!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% ;
      background-image: ellipse at top right,rgba(255,255,255,.2) 67%,#e7e7e7);
      }
    </style>
    <script type="text/javascript" src="  https://maps.googleapis.com/maps/api/js?"></script>
    <script type="text/javascript">
      var map;
      var grayStyles = 
  
[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5",
        
         
          
      }
    ]
  },
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#c0c0c0"
      },
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    
    "stylers": [
      { "visibility": "off" }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "stylers": [
      { "visibility": "off" }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#9e9e9e"
      },
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      },
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
];
      var mapOptions = {
        center: new google.maps.LatLng(41.327670, 19.8029607),
        zoom: 18,
        styles: grayStyles,
        mapTypeControl: false,
      disableDefaultUI: true,
       
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      
        var cityCircle = new google.maps.Circle({
            strokeColor: '#000000',
            strokeOpacity: 0.0,
            strokeWeight: 10,
            fillColor: '#000000',
            fillOpacity: 0.9 ,
            map: map,
            center: new google.maps.LatLng(41.327670, 19.8029607),
            radius: 1
          });
        var cityCircle = new google.maps.Circle({
            strokeColor: '#bfbfbf',
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: '#bfbfbf',
            fillOpacity: 0.20,
            map: map,
            center: new google.maps.LatLng(41.327670, 19.8029607),
            radius: 10
          });
        var cityCircle = new google.maps.Circle({
            strokeColor: '#bfbfbf',
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: '#bfbfbf',
            fillOpacity: 0.20,
            map: map,
            center: new google.maps.LatLng(41.327670, 19.8029607),
            radius: 20
          });
        var cityCircle = new google.maps.Circle({
            strokeColor: '#bfbfbf',
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: '#bfbfbf',
            fillOpacity: 0.20,
            map: map,
            center: new google.maps.LatLng(41.327670, 19.8029607),
            radius: 30
          });
          updatemarkerposition(new google.maps.LatLng(41.327670, 19.8029607),225,1117);
      }

    function updatemarkerposition (latlng, offsetx, offsety) {
                    
                   
                    var scale = Math.pow(2, 16);
                    //var nw = new google.maps.LatLng(
                    //    map.getBounds().getNorthEast().lat(),
                    //    map.getBounds().getSouthWest().lng());
                    var worldCoordinateCenter = map
                        .getProjection()
                        .fromLatLngToPoint(marker.getPosition());
                    var pixelOffset = new google.maps.Point(
                        offsetx / scale || 0,
                        offsety / scale || 0
                    );

                    var worldCoordinateNewCenter = new google.maps.Point(
                        worldCoordinateCenter.x - pixelOffset.x,
                        worldCoordinateCenter.y + pixelOffset.y
                    );

                    var newCenter = map
                        .getProjection()
                        .fromPointToLatLng(worldCoordinateNewCenter);
                    console.log(newCenter);
                    $.productmap.map.setCenter(newCenter);
                }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    
    <div id="map_canvas" >
      <p>heloo</p>
    </div>
    
  </body>
</html>

Richard MacCutchan

Переменная с именем map не был инициализирован.

Nawab Ahmad

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

1 Ответов

Рейтинг:
12

Bryian Tan

Попробуйте обновить код, чтобы вызвать updatemarkerposition функция путем прослушивания projection_changed событие для обеспечения того, чтобы карта не была null / инициализирована.

google.maps.event.addListenerOnce(map,"projection_changed", function() {
  updatemarkerposition(new google.maps.LatLng(41.327670, 19.8029607),225,1117);
 });

Кроме того, эта строка немного странная, возможно, вы не вставили весь код. Я не вижу объекта маркера, определенного в опубликованном коде.
.fromLatLngToPoint(marker.getPosition());


Ресурсы: Карты  |  Maps JavaScript API  |  Разработчики Google[^]


Nawab Ahmad

Спасибо за обновление, выше код-это рабочий код, пожалуйста, скопируйте и вставьте в кодовое перо, оно будет работать ..

Bryian Tan

Вот пример использования опубликованного кода и приведенного выше фрагмента кода, чтобы избавиться от ошибки "Uncaught TypeError: Cannot read property 'fromLatLngToPoint' of undefined"

пример jQuery addClass - JSFiddle[^]