Question

我＆＃39;我正在使用WordPress制作一个应用程序来绘制Google Map上的Voyage Journey。这是一个website，我的意思非常好。

WordPress查询以获取有关航行的信息

<?php
    $args = array(
        'post_type' => "track-the-voyage", 
        'posts_per_page' => -1,
        'order' => 'DESC',
        'post_status' => 'publish'
    );
    $voyage_query = query_posts($args);
    $total = $wp_query->found_posts;
?>

现在，制作Google地图动态和绘制多个坐标

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6yp3D4Z-MagFbpFXzrr1pBdV7W6mqfL8&sensor=FALSE"></script>
        <script type="text/javascript">
        var centerlatlng = new google.maps.LatLng(0, -180);
        <?php
            $i = 0;
            foreach( $voyage_query as $voyage ){
                $voyage_id = $voyage->ID;
                $voyage_date_time = get_post_meta( $voyage_id, "date-time" );
                $voyage_approximate = get_post_meta( $voyage_id, "approximate-local-time" );
                $voyage_course = get_post_meta( $voyage_id, "course" );
                $voyage_speed = get_post_meta( $voyage_id, "speed" );
                $voyage_latitude = get_post_meta( $voyage_id, "latitude" );
                $voyage_latitude = $voyage_latitude[0];
                $voyage_longitude = get_post_meta( $voyage_id, "longitude" );
                $voyage_longitude = $voyage_longitude[0];
        ?>
        var latlng<?php echo $voyage_id; ?> = new google.maps.LatLng( <?php echo $voyage_latitude; ?>, <?php echo $voyage_longitude; ?> );
        <?php } ?>

  function initialize() {
    var mapOptions = {
      zoom: 3,
      center: centerlatlng,
                disableDefaultUI: false,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
                scaleControl: true
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var voyagePlanCoordinates = [
                <?php 
                    foreach( $voyage_query as $voyage ){
                        $voyage_id = $voyage->ID;
                        $voyage_date_time = get_post_meta( $voyage_id, "date-time" );
                        $voyage_approximate = get_post_meta( $voyage_id, "approximate-local-time" );
                        $voyage_course = get_post_meta( $voyage_id, "course" );
                        $voyage_speed = get_post_meta( $voyage_id, "speed" );
                        $voyage_latitude = get_post_meta( $voyage_id, "latitude" );
                        $voyage_latitude = $voyage_latitude[0];
                        $voyage_longitude = get_post_meta( $voyage_id, "longitude" );
                        $voyage_longitude = $voyage_longitude[0];
                ?>
      new google.maps.LatLng(<?php echo $voyage_latitude; ?>, <?php echo $voyage_longitude; ?>),
                <?php } ?>
    ];
    var voyagePath = new google.maps.Polyline({
      path: voyagePlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 5
    });
    voyagePath.setMap(map);
    setMarkers(map, voyages);
  }

    var voyages = [
                <?php 
                    foreach( $voyage_query as $voyage ){
                        $voyage_id = $voyage->ID;
                        $voyage_post_title = get_the_category( $voyage_id );
                        $voyage_post_title = $voyage_post_title[0]->cat_name;
                        $voyage_date_time = get_post_meta( $voyage_id, "date-time" );
                        $voyage_approximate = get_post_meta( $voyage_id, "approximate-local-time" );
                        $voyage_course = get_post_meta( $voyage_id, "course" );
                        $voyage_speed = get_post_meta( $voyage_id, "speed" );
                        $voyage_latitude = get_post_meta( $voyage_id, "latitude" );
                        $voyage_latitude = $voyage_latitude[0];
                        $voyage_longitude = get_post_meta( $voyage_id, "longitude" );
                        $voyage_longitude = $voyage_longitude[0];
                ?>
        ['<?php echo $voyage_post_title; ?>', <?php echo $voyage_latitude; ?>, <?php echo $voyage_longitude; ?>],
                <?php } ?>
    ];

    function setMarkers(map, locations) {
      var image = {url: '/wp-content/themes/muavoyage/resources/images/marker.png',
        size: new google.maps.Size(20, 32),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0, 32)
      };
      var shape = {
          coords: [1, 1, 1, 20, 18, 20, 18 , 1],
          type: 'poly'
      };
      for (var i = 0; i < locations.length; i++) {
        var voyage = locations[i];
        var myLatLng = new google.maps.LatLng(voyage[1], voyage[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            shape: shape,
            title: voyage[0],
            zIndex: voyage[3]
        });
      }
    }
            google.maps.event.addDomListener(window, 'load', initialize);
  </script>
        <div id="map-canvas"></div>

我的问题

当我运行上述内容时，我得到了这个结果，这是完全错误的。我在这里想念的是什么 enter image description here 。这就是我想要实现的转到Website

Answer 1

如果您在参考链接上看到他们有类似

的内容

var centerlatlng = new google.maps.LatLng(-14.274792,-170.692975);
var latlng0001 = new google.maps.LatLng(  19.73251,  -155.05240);
var latlng0002 = new google.maps.LatLng(  18.90872,  -155.68050);
var latlng0003 = new google.maps.LatLng(  20.78842,  -156.50975);
var latlng0004 = new google.maps.LatLng(  20.52511,  -156.70608);
var latlng0005 = new google.maps.LatLng(  20.74118,  -156.88468);
var latlng0006 = new google.maps.LatLng(  21.08046,  -157.02995);

通过放置var latlng使latlng[]成为一个数组，然后此变量将具有所有坐标。并相应地进行其余更改

PS：Google＆＃34;在Google地图上添加多个标记＆＃34;

坚持在Google Map中绘制坐标

1 个答案: