Question

我的Google地图有问题，它根本不显示任何标记。标记的数据来自wordpress发布和自定义字段。

我为var locations做了一个控制台日志，并将数据传递到了这一点。还做了一个var j的控制台日志，我到了undefined。

不显示标记可能是什么问题？

    <?php 
     $args = array('post_type'=> 'investments'); $the_query = new WP_Query( $args );
        if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();

        $investmentsData[$row]['meta'] = get_post_meta( $post->ID, 'investments_location_details', true );
        $investmentsData[$row]['investment'] = [
          'id' => get_the_id(),
          'title' => get_the_title(),
        ];

          foreach ($investmentsData as $key => $value) {
            $investment = $value['tabs'];
            $meta = $value['meta'];
          }

          wp_localize_script('jquery-core', 'investmentsData', $investmentsData);

          ?>
          <div id="map"></div>

          <script type="text/javascript">
             var map = new google.maps.Map(document.getElementById('map'), {
                 zoom: 11,
                 center: new google.maps.LatLng(54.233985, 16.8903183),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             });
             var infowindow = new google.maps.InfoWindow();
             var marker, i;
             var locations = <?php echo json_encode($investmentsData) ?>;
             var j = locations.length;

             function initMap() {
                 for (i = 0; i < j; i++) {

                    marker = new google.maps.Marker({
                       position: new google.maps.LatLng(investmentsData[i].lat, investmentsData[i].lng),
                       map: map,
                    });

                     google.maps.event.addListener(marker, 'click', (function(marker, i) {
                         return function() {
                             infowindow.setContent(investmentsData[i].title);
                             infowindow.open(map, marker);
                         }
                     })(marker, i));
                 }
             };
         </script>

      <?php
        endwhile;
        endif;
        wp_reset_postdata();
        wp_reset_query();
      ?>

更新

用于var位置的consol日志为对象提供

 investment: {id: 192, title: "Post title"}
 meta: {lat: "54.3765137", lng: "18.5707837"}

当我做一个investmentsData[i].lat的控制台日志时，得到这个Uncaught ReferenceError: investmentsData is not defined，对于locations[i].lat来说，我得到这个Uncaught TypeError: Cannot read property 'lat' of undefined

我正在像这样<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5rsZHHAmzP_pOuHGKEUtarn2QideIyUM"></script>

引入API

从对评论的评论中更新

locations变量是一个对象：

var locations = {"":{"meta":{"lat":"54.2427318","lng":"16.8870907"},"investment":{"id":386,"title":"Termoizolacja obiekt\u00f3w u\u017cyteczno\u015bci publicznej na terenie..."}}};

Answer 1

您的代码有问题

lat和lng是locations[i].meta对象的属性
title是locations[i].investment对象的属性
您没有打initMap
您设置的地图中心和缩放比例使您看不到标记。

proof of concept fiddle

更新

根据实时页面上的信息，locations是一个对象，而不是数组：

var locations = {"":{"meta":{"lat":"54.2427318","lng":"16.8870907"},"investment":{"id":386,"title":"Termoizolacja obiekt\u00f3w u\u017cyteczno\u015bci publicznej na terenie Gminy K\u0119pice"}}};

使用以下方法进行处理：

for (var obj in locations) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[obj].meta.lat, locations[obj].meta.lng),
    map: map,
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[obj].investment.title);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

updated fiddle

代码段：

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script type="text/javascript">
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(54.233985, 16.8903183),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var locations = {
      "": {
        "meta": {
          "lat": "54.2427318",
          "lng": "16.8870907"
        },
        "investment": {
          "id": 386,
          "title": "Termoizolacja obiekt\u00f3w u\u017cyteczno\u015bci publicznej na terenie Gminy K\u0119pice"
        }
      }
    };

    for (var obj in locations) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[obj].meta.lat, locations[obj].meta.lng),
        map: map,
      });
      console.log("marker position:" + marker.getPosition().toUrlValue(6));

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[obj].investment.title);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  };
  initMap();
</script>

Answer 2

这是一个可行的示例。带有适当的函数调用和演示数据。

edmx

the store procedure doesn't return any columns

SET FMTONLY OFF

Google地图未在地图上显示标记

2 个答案: