Question

我有以下代码，一切正常，只有标记没有显示。我在MySQL中有一个名为“marker”的字段，其中包含logo_1.png，我已经尝试过引号，标识的完整路径等....，任何想法？

<script type="text/javascript">

function initMap() {
       var myLatLng = {lat: 27.243368, lng: -80.829570};
        var opts = {
        tilt:0,
        streetViewControl: false,
        center: new google.maps.LatLng(27.2437, -80.8324),
        zoom: 14
    };
    map = new google.maps.Map(document.getElementById("map"), opts);
    map.setMapTypeId('roadmap');
    map.overlayMapTypes.insertAt(0, maptiler);

        var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Sample Title'
  });

}


// Display custom map in tiles

var map;
var mapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(27.137066, -80.942569),
    new google.maps.LatLng(27.426763, -80.696534));
// var mapMinZoom = 10;
// var mapMaxZoom = 14;
var mapMinZoom = 0;
var mapMaxZoom = 75;
var maptiler = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) { 
        var proj = map.getProjection();
        var z2 = Math.pow(2, zoom);
        var tileXSize = 256 / z2;
        var tileYSize = 256 / z2;
        var tileBounds = new google.maps.LatLngBounds(
            proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
            proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
        );
        var y = coord.y;
        var x = coord.x >= 0 ? coord.x : z2 + coord.x;
        if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
            return zoom + "/" + x + "/" + y + ".png";
        else
            return "http://www.maptiler.org/img/none.png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,

    opacity: 1.0

});

// End display custom map in

   //--------------------- Sample code written by vIr ------------
    var $marker = new google.maps.MarkerImage($marker,
               new google.maps.Size(32, 32), new google.maps.Point(0, 0),
               new google.maps.Point(16, 32));
                    var center = null;
                    var map = null;
                    var currentPopup;
                    var bounds = new google.maps.LatLngBounds();
                    function addMarker(lat, lng, icon, info) {
                    var image = {
                       url: icon,
                       size: new google.maps.Size(25, 25),
                       origin: new google.maps.Point(0, 0),
                       anchor: new google.maps.Point(lat, lng),
                       scaledSize: new google.maps.Size(25, 25)
                    };
                    var pt = new google.maps.LatLng(lat, lng);
                    bounds.extend(pt);
                    var marker = new google.maps.Marker({
                      position: pt,
                      marker: image,
                      map: map
                    });
                        var popup = new google.maps.InfoWindow({
                            content: info,
                            maxWidth: 640
                        });
                        google.maps.event.addListener(marker, "click", function() {
                            if (currentPopup != null) {
                                currentPopup.close();
                                currentPopup = null;
                            }
                            popup.open(map, marker);
                            currentPopup = popup;
                        });
                        google.maps.event.addListener(popup, "closeclick", function() {
                            map.panTo(center);
                            currentPopup = null;
                        });
                    }           
                    function initMapMarkers() {
                        var myLatLng = {lat: 27.243368, lng: -80.829570};
                        var opts = {
                        tilt:0,
                        streetViewControl: false,
                        center: new google.maps.LatLng(27.2437, -80.8324),
                        //zoom: 14
                        zoom: 7
                          };
                        map = new google.maps.Map(document.getElementById("map"), opts);
                        map.setMapTypeId('roadmap');
                        map.overlayMapTypes.insertAt(0, maptiler);

     <?php

     $query = mysqli_query($conn, "SELECT * FROM my_table")or die(mysql_error());

         while($row = mysqli_fetch_array($query))
    {

    $logo = $row['logo'];
    $company = $row['company'];
    $lat = $row['lat'];
    $lon = $row['lon'];
    $marker = $row['marker'];
    $desc = $row['desc'];

        echo("addMarker(" . $lat . "," . $lon . ",'" . $marker. "'," . "'<b>" . $logo . "</b><b>" . $company ."<br />$desc' );\n");
   }
  ?>
   center = bounds.getCenter();
   map.fitBounds(bounds);

   }
   </script>

  </head>
<body onload="initMapMarkers()">
<div id="footer">Generated with <a href="http://www.maptiler.com/">MapTiler</a></div>
<div id="map"></div>
</body>
</html>

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

＆＃13;

addMarker

＆＃13;

您的echo方法需要3个参数，但info语句会传入4.此外，第3个参数列为$marker: $marker，因此请将marker: info更改为{{ 1}}删除前导$

您还需要将icon名称转换为对象并将其传递到Marker。

function addMarker(lat, lng, icon, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker({
    position: pt,
    icon: icon
    map: map
  })

然后更改弹出窗口以获得第4个参数中的正确信息。

 var popup = new google.maps.InfoWindow({
     content: info,
     maxWidth: 640
 });

还有一点是，你的PHP echo行实际上并没有使用你创建的变量。

 $logo = $row['logo'];
 $company = $row['company'];
 $lat = $row['lat'];
 $lon = $row['lon'];
 $marker = $row['marker'];
 $desc = $row['desc'];

 echo("addMarker(" . $lat . "," . $lon . ",'" . $marker. "'," . "'<b>" . $logo . "</b><b>" . $company ."<br />$desc' );\n");

这实际上会将值插入到您的方法使用的echo字符串中。

自定义Google地图标记图像未显示

1 个答案: