Question

说明

在移动设备上触摸RichMarker标记时（至少iOS），没有任何反应。我发现我必须＆＃34;双触＆＃34;打开它。但是，在触摸谷歌地图时＃39;标记，它打开（并关闭触摸地图）就好了。我认为它与RichMarker的代码有关，但我无法找到它的内容。有什么东西可以解决它吗？我做错了吗？

代码

您也可以在JSFiddle上打开它。

＆＃13;

function initialize() {
    var myLatLng1 = new google.maps.LatLng(37.787776, -122.405309);
    var myLatLng2 = new google.maps.LatLng(37.788005, -122.405147);

    var mapOptions = {
        zoom: 20,
        center: new google.maps.LatLng(37.787901, -122.405197)
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker1 = new RichMarker({
        position: myLatLng1,
        map: map,
        flat: true,
        content: '<i class="fa fa-map-marker fa-4x""></i>'
    });

    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map
    });

    var contentString = 'infoWindow is opened'

    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        pixelOffset: new google.maps.Size(0, -42)
    });

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.open(map, marker1);
    });

    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.open(map, marker2);
    });

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });
}

initialize();

＆＃13;

#map-canvas {
  width: 500px;
  height: 400px;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    </head>
    <body>
        <div id="map-canvas"></div>
        
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script src="https://rawgit.com/luiz-machado/js-rich-marker/gh-pages/src/richmarker.js"></script>
    </body>
</html>

＆＃13;

提前致谢，
路易斯。

Answer 1

我在nathan-m找到了一个很棒的解决方案，您可以看到here。

由于他构建的这个插件适用于谷歌地图（至少它在new google.maps.Marker内icon），我不需要使用RichMarker（这很棒，但是有一些错误了。

我所要做的只是包括fontawesome-markers.min.js（或者你可以使用NPM / Bower，正如他在回答中所说）和上面的代码。

var marker1 = new google.maps.Marker({
    map: map,
    icon: {
        path: fontawesome.markers.MAP_MARKER,
        scale: 0.65,
        strokeColor: 'transparent',
        fillColor: '#000000',
        fillOpacity: 1
    },
    clickable: true,
    position: myLatLng1
});

您可以在JSFiddle上看到它。

打开谷歌地图＆＃39; InfoWindow在移动设备上

说明

代码

1 个答案: