使用本地存储数据时出现Google Maps API V2打开信息窗口错误

omhiaaxx  于 2022-09-19  发布在  Go
关注(0)|答案(1)|浏览(236)

我正在将本地存储集成到GeoDirectory for WordPress的Map功能中。该功能将Map标记和WordPress帖子数据存储在存储中，然后在用户查看列表后重新访问Map页面时加载。可以查看现场示例here。

我已经使用storeUserMarker函数成功地将Map标记和WordPress数据存储在存储中，并且可以使用loadUserMarker在页面加载时检索它。我已经在下面包括了这两个函数。

function storeUserMarker(item, map_canvas) {
  let markerId, markerTitle, markerContent, markerIcon, markerAnchor, markerPosition;
  markerId = item.id;
  markerTitle = item.title;
  markerContent = html;
  markerIcon = item.icon = {
    url: item.icon,
    origin: new google.maps.Point(0, 0),
    anchor: item.anchorPoint
  };
  markerAnchor = item.anchorPoint;
  markerPosition = item.position;
  localStorage.setItem( 'id', markerId );
  localStorage.setItem( 'title', markerTitle );
  localStorage.setItem( 'content', markerContent );
  localStorage.setItem( 'icon', JSON.stringify(markerIcon) );
  localStorage.setItem( 'anchor', JSON.stringify(markerAnchor) );
  localStorage.setItem( 'position', JSON.stringify(markerPosition) );
}

function loadUserMarker(item, map_canvas) {
  let markerId = localStorage.getItem( 'id' );
  let markerTitle = localStorage.getItem( 'title' );
  let markerContent = localStorage.getItem( 'content' );
  let markerIcon = JSON.parse(localStorage.getItem( 'icon' ));
  let markerAnchor = JSON.parse(localStorage.getItem( 'anchor' ));
  let markerPosition = JSON.parse(localStorage.getItem( 'position' ));
  let marker = {
    id: markerId,
    title: markerTitle,
    icon: markerIcon,
    anchorPoint: markerAnchor,
    position: markerPosition,
    visible: true,
    clickable: true
  };
  // console.log(marker);
  // console.log(markerContent);
  // const infowindow = new google.maps.InfoWindow({
  //   content: markerContent,
  // });
  // console.log(infowindow);
  let loading = '<div id="map_loading"></div>';
  gd_infowindow.open(jQuery.goMap.map, marker);
  gd_infowindow.setContent(loading);
  setTimeout(function() {
    jQuery(document.body).trigger('geodir_map_infowindow_open', [{
      map: 'google',
      canvas: map_canvas,
      content: markerContent
    }]);
  }, 100);
}

页面加载时，本地存储项从marker和markerContent加载，但控制台中显示以下错误：Uncaught TypeError: a.get is not a function。它似乎是由gd_infowindow对象方法触发的。当我将其注解掉时，没有显示任何错误，尽管代码不起作用。

该问题似乎与从https://maps.googleapis.com/maps/api/js?key=hidden&libraries=places&language=en&ver=2.2.9:300加载的Google Maps JS文件冲突。我已将假定的冲突代码包括在下面。

_.Gg.prototype.open=function(a,b){var c=b;b={};"object"!==typeof a||!a||a instanceof _.zg||a instanceof _.lf?(b.map=a,b.anchor=c):(b.map=a.map,b.shouldFocus=a.shouldFocus,b.anchor=c||a.anchor);a=(a=Bg(b.anchor))&&a.get("map");a=a instanceof _.lf||a instanceof _.zg;b.map||a||console.warn("InfoWindow.open() was called without an associated Map or StreetViewPanorama instance.");var d=_.u(Object,"assign").call(Object,{},b);a=d.map;b=d.anchor;c=this.set;var e=d.map;var f=d.shouldFocus;e="boolean"===typeof f?

我对使用谷歌Map和这个WordPress插件还很陌生，所以我不确定为什么Infowindow不能正确执行。当通过create_marker函数运行时，它在loadUserMarker函数之外工作。下面包括完整的create_marker函数。

function create_marker(item, map_canvas) {
  if (window.gdMaps == 'osm') {
    return create_marker_osm(item, map_canvas);
  }
  var map_options = eval(map_canvas);
  jQuery("#" + map_canvas).goMap();
  gd_infowindow = (typeof google !== 'undefined' && typeof google.maps !== 'undefined') ? new google.maps.InfoWindow({
    maxWidth: 200
  }) : null;
  if (item.lt && item.ln) {
    var marker_id, title, icon, cs;
    marker_id = item['m'];
    title = geodir_htmlEscape(item['t']);
    cs = item['cs'];
    icon = item['icon'] ? item['icon'] : geodir_params.default_marker_icon;
    iconW = item['w'] ? parseFloat(item['w']) : 0;
    iconH = item['h'] ? parseFloat(item['h']) : 0;
    iconMW = geodir_params.marker_max_width ? parseFloat(geodir_params.marker_max_width) : 0;
    iconMH = geodir_params.marker_max_height ? parseFloat(geodir_params.marker_max_height) : 0;
    /* Some svg files has dimensions with different unit */
    if (geodir_params.resize_marker && ( iconW < iconMW || iconH < iconMH ) && icon.substr((icon.lastIndexOf('.')+1)).toLowerCase() == 'svg') {
        iconW = iconW * 10;
        iconH = iconH * 10;
    }
    if (geodir_params.resize_marker && iconW > 5 && iconH > 5 && ((iconMW > 5 && iconW > iconMW) || (iconMH > 5 && iconH > iconMH))) {
        resizeW = iconW;
        resizeH = iconH;
        resize = false;

        if (iconMH > 5 && resizeH > iconMH) {
            _resizeH = iconMH;
            _resizeW = Math.round(((_resizeH * resizeW) / resizeH) * 10) / 10;

            resizeW = _resizeW;
            resizeH = _resizeH;
            resize = true;
        }

        if (iconMW > 5 && resizeW > iconMW) {
            _resizeW = iconMW;
            _resizeH = Math.round(((_resizeW * resizeH) / resizeW) * 10) / 10;

            resizeW = _resizeW;
            resizeH = _resizeH;
            resize = true;
        }
        if (resize && resizeW > 5 && resizeH > 5) {
            icon = {
                url: icon,
                scaledSize: new google.maps.Size(resizeW, resizeH),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point((Math.round(resizeW / 2)), resizeH)
            };
        }
    }
    var latlng = new google.maps.LatLng(item.lt, item.ln);
    var marker = jQuery.goMap.createMarker({
        id: marker_id,
        title: title,
        position: latlng,
        visible: true,
        clickable: true,
        icon: icon,
        label: cs,
        zIndex: (item.zIndex ? item.zIndex : 0),
        zIndexOrg: (item.zIndexOrg ? item.zIndexOrg : 0)
    });
    bounds.extend(latlng);
    // Adding a click event to the marker
    google.maps.event.addListener(marker, 'spider_click', function() { // 'click' => normal, 'spider_click' => Overlapping Marker Spiderfier
        var marker_url = map_options.map_marker_ajax_url;
        is_zooming = true;
        jQuery("#" + map_canvas).goMap();
        var preview_query_str = '';
        if (item.post_preview) {
            preview_query_str = '&post_preview=' + item.post_preview;
        }
        marker_url = marker_url + '' + item.m;
        post_data = marker_url.indexOf('?') === -1 ? '?' : '&';
        post_data += '_wpnonce=' + map_options._wpnonce;
        if (map_options.bubble_size) {
            post_data += '&small=1';
        }
        if (map_options.map_marker_url_params) {
            post_data += map_options.map_marker_url_params;
        }
        var loading = '<div id="map_loading"></div>';
        gd_infowindow.open(jQuery.goMap.map, marker);
        gd_infowindow.setContent(loading);
        jQuery.ajax({
            type: "GET",
            url: marker_url + post_data,
            cache: false,
            dataType: "json",
            error: function(xhr, error) {
                alert(error);
            },
            success: function(response) {
                jQuery("#" + map_canvas).goMap();
                html = typeof response == 'object' && response.html ? geodir_htmlEscape(response.html) : '';
                gd_infowindow.setContent(html);
                gd_infowindow.open(jQuery.goMap.map, marker);
                setTimeout(function() {
                    jQuery(document.body).trigger('geodir_map_infowindow_open', [{
                        map: 'google',
                        canvas: map_canvas,
                        content: html
                    }]);
                }, 100);
                /**Custom code begin**/
                storeUserMarker(marker, html);
                /**Custom code end**/
                // give the map 1 second to reposition before allowing it to reload
                setTimeout(function() {
                    is_zooming = false;
                }, 1000);
            }
        });
        return;
      });
      // Overlapping Marker Spiderfier
      jQuery.goMap.oms.addMarker(marker);
      // Adding a visible_changed event to the marker
      google.maps.event.addListener(marker, 'visible_changed', function() {
        gd_infowindow.close(jQuery.goMap.map, marker);
      });
      return true;
  } else {
      //no lat & long, return no marker
      return false;
  }
}

如有任何帮助，我们不胜感激。

wordpress

1条答案

按热度按时间
hgb9j2n6

hgb9j2n61#

问题是，您正在尝试使用普通的旧式JavaScript对象(POJO)，而不是google.maps.Marker、google.maps.Point等……

gd_infowindow.open(jQuery.goMap.map, marker);

其中Maker是POJO..。

let marker = {
    id: markerId,
    title: markerTitle,
    icon: markerIcon,
    anchorPoint: markerAnchor,
    position: markerPosition,
    visible: true,
    clickable: true
  };

要解决此问题，您需要创建一个实际的标记/位置等-例如，标记需要类似于...

let marker = jQuery.goMap.createMarker({
    id: markerId,
    title: markerTitle,
    icon: markerIcon, // this will need to be a google.maps.icon too I presume
    anchorPoint: new google.maps.Point(anchor.x, anchor.y), // or something 
    position: new google.maps.LatLng(position.lat, position.lng), // or something
    visible: true,
    clickable: true
  });

然而，不清楚您以什么格式存储“markerPosition”、“markerIcon”等--但您可能应该单独存储值(“纬度”、“经度”、“x”、“y”、“ImageUrl”等)，以便在需要时重新创建google.map.whatever对象。

这里的关键是您需要序列化以存储--然后反序列化为实际的google.map.whatever对象以使用它们。

错误Uncaught TypeError: a.get is not a function只是因为您的marker是POJO而不是google.maps.Marker

赞(0）分享  回复(0）举报  2022-09-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com