造型标记图标和信息窗口

Question

这是一个带有信息窗口的点的图像。当光标移动到该点时，它显示信息窗口。

<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的文字，如图像。

Answer 1

我建议你一步一步......从标记图标开始

您可以通过以下方式为标记指定新图标：

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);