这是一张图像,其中一些点具有信息窗口。当光标移动到该点时,它会显示信息窗口。
<div id="map"></div>
</div>
<script type="text/javascript">
function myMap() {
var locations = [
['some info', 30.118802, 31.410364],
['some info', 33.616455, 73.096199],
['some info', 33.598394, 73.044135],
['some info', 21.673434, 39.160065],
['some info', 34.011382, 71.523476], ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(31.571394, 74.310374),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
这是带有简单信息窗口代码的简单标记。但我需要更多的 info.window 标记图标和样式以及没有 info.window 的文本,就像图像中那样。
最佳答案
我建议你一步一个脚印..从标记图标开始
您可以通过这种方式为标记分配一个新图标:
var image = 'your_path/your_file.png';
// you can use the path below for test
// var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var myMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
或者如果你已经有了一个标记,你可以使用
marker.setIcon( image);
关于javascript - 样式标记图标和信息窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43167136/