Question

我创建了一张地图并获得了KML文件。

在Google我的地图中，自定义图标和详细信息会显示，但在我的网页上，图标为白色，点击后不会弹出详细信息。

这是代码。

任何人都有这方面的经验吗？

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), 
    {
        zoom: 4,
        center: {lat: 37.09024, lng: -95.712891},
    });

    //Create a Marker for My Position
    var myloc = new google.maps.Marker({
        clickable: false,
        icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
            new google.maps.Size(22,22),
            new google.maps.Point(0,18),
            new google.maps.Point(11,11)),
        shadow: null,
        zIndex: 999,
        map:map // your google.maps.Map object
    });

    //Add Spots Layer
    var kmlFile = 'https://storage.googleapis.com/spots_map/Spots.kml?'+(new Date()).getTime();
    var kmlLayer = new google.maps.KmlLayer(kmlFile,
    {
        suppressInfoWindows: true,
        map: map,
        preserveViewport: true
    });

    var infoWindow = new google.maps.InfoWindow({map: map});

    // Is Geolocation Enabled????
    if (navigator.geolocation) {


        //Get Current Position
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
        };               

        infoWindow.close();

        //Zoom Map to My Location
        map.setCenter(pos);
        map.setZoom(11);

        //Set my location
        // var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
        myloc.setPosition(pos);


    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
    } else {

        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) 
{

    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                    'Please Enable Geolocation for your Browser' :
                    'Your browser doesn\'t support geolocation.');

}

KML文件：

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns='http://www.opengis.net/kml/2.2'>
    <Document>
        <name>Spots</name>
        <NetworkLink>
            <name>Spots</name>
            <Link>
                <href>http://www.google.com/maps/...</href>
            </Link>
        </NetworkLink>
    </Document>
</kml>

Answer 1

在这里回答，因为我没有足够的评论意见。

选项1：将suppressInfoWindows设为false

单击标记时未弹出详细信息的原因是您已将suppressInfoWindows设置为true。将其设置为false。这是一个工作小提琴，当您点击KML标记时显示信息窗口 - http://jsfiddle.net/nkp2fhxb/50/。我在此更改的是KML文件，并将suppressInfoWindows设置为true。

我使用了来自http://kml-samples.googlecode.com/svn/trunk/kml/ListStyle/item-icon-hotspot.kml的KML。您的KML是否有<style>标记，其中href指向正确的自定义图标？也许这就是为什么图标都是白色的原因。示例KML有这个图标 - http://maps.google.com/mapfiles/kml/paddle/go-lv.png，你可以在小提琴上看到。

选项2：自定义信息窗口

如果要修改信息窗口中显示的内容，请将suppressInfoWindows保留为true，然后添加一个显示所需属性的click事件处理程序。除了信息窗口上标记的默认名称和描述外，这里还有一个显示位置的小提琴 - http://jsfiddle.net/nkp2fhxb/54/

google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
     var text = kmlEvent.featureData.name;
     showInContentWindow(kmlEvent.latLng,
     kmlEvent.featureData.name,
     kmlEvent.featureData.description);
});

function showInContentWindow(position, name, description) {
      var infowindow = new google.maps.InfoWindow({
          content: "<p><strong>" + name + "</strong></p>" +
          "<p>" + description + "</p>" +
          "<p>" + position.lat() + "</p>" +
          "<p>" + position.lng() + "</p>",
          position: position,
          pixelOffset: new google.maps.Size(0,-20),
       })
      infowindow.open(map);
}

希望这会有所帮助。

Google地图KML不会在网站

1 个答案: