gpt4 book ai didi

javascript - 在移动设备上打开 Google map 的 InfoWindow

转载 作者:行者123 更新时间:2023-12-01 05:21:39 24 4
gpt4 key购买 nike

说明

触摸时RichMarker移动设备上的标记(至少是 iOS),没有任何反应。我发现我必须“双击”才能打开它。然而,当触摸谷歌地图的标记时,它会打开(并关闭触摸 map )。我认为这与 RichMarker 的代码有关,但我找不到它是什么。有什么办法可以解决这个问题吗?我做错了什么吗?

代码

您也可以通过JSFiddle打开它.

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();
#map-canvas {
width: 500px;
height: 400px;
}
<!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>

提前致谢,
路易斯。

最佳答案

我发现了一个很棒的solution通过 nathan-m 。由于他构建的这个插件可以与 Google map 配合使用(至少它在 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 上运行.

关于javascript - 在移动设备上打开 Google map 的 InfoWindow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43029839/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com