2

我一直在使用 Adob​​e muse 开发一个网站，我选择在公司的联系页面上实现一个定制的谷歌地图。我已经使用一些基本的 javascript 完成了此操作，通过在其中插入“HTML 元素”插入到 Muse 文档中，我有我的 JS。

我还应该提到，我通过页面的元数据（通过 Muse 中的页面 > 页面属性 > 元数据访问）在页面的“头部”中链接了 Google Maps API（使用我的相关密钥）。

按照 Google 提供的指南，我创建了一个自定义地图，然后使用通过 [ https://snazzymaps.com]生成的 JS 应用了一些额外的样式。

我的问题出现在尝试用 Illustrator 中创建的我自己的标记（本地存储在我的 iMac 上）替换默认标记图标时，我遵循了大量不同的指南并尝试了多种实现自定义图标的方法，但没有无论如何运气 - 有人可以告诉我我哪里出错了吗？将不胜感激。

这是我的 JS 在 Muse HTML 元素中的外观 >

<script> 
function initMap() {
var myLatLng = {lat: 51.454137, lng: -2.473673};

var map = new google.maps.Map(document.getElementById('u64615'),{
    zoom: 16,
    center: myLatLng,
    styles:
    [
{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "color": "#444444"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "color": "#f2f2f2"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#f10019"
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "labels.text",
    "stylers": [
        {
            "visibility": "simplified"
        },
        {
            "color": "#f10019"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.attraction",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "geometry",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "visibility": "simplified"
        },
        {
            "color": "#f10019"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "labels.text",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "poi.business",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        },
        {
            "weight": "0.01"
        }
    ]
},
{
    "featureType": "poi.government",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.medical",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.park",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.place_of_worship",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.school",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.sports_complex",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 45
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "color": "#163742"
        },
        {
            "visibility": "on"
        }
    ]
}]


 });

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Precision Profiles Manufacturing'
});

var contentString = 
    '<div>'+
    '<div>'+
    '</div>'+
    '<h1 style = "font-size:20px;padding-bottom:10px;"><b>Precision Profiles Manuafcturing</b></h1>'+
    '<div id="bodyContent">'+
    '<p>The regions leading supplier of aircraft and precision engineering solutions.<p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200,
    maxHeight: 400,
});

marker.addListener('click', function() {
    infowindow.open(map, marker);
});    }   </script>
4

5 回答 5

2

快速浏览一下 Google Maps API 即可进入此页面。

深入研究 API，您可以看到当您实例化一个 new 时google.maps.Marker，将会有一个名为icon:. 您可以在此处指定存储要使用的图像的目录的字符串路径。

因此，完整的实例化新标记类的代码将是：

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: "https://your_domain.com/your_directory/your_image.jpg",
    title: 'Precision Profiles Manufacturing'
});
于 2017-08-01T12:28:28.200 回答
1

如果我们想对自定义图标应用宽度和高度，

参考下面的代码，

let icon = {
   url: './path/path/custom_icon.png',
   scaledSize: { width: 69, height: 41 }
}
marker = new google.maps.Marker({
  position: pos,
  map: map,
  title: 'sample title',
  icon: icon
});
marker.setMap(map);
于 2020-01-23T14:49:09.157 回答
0

有两种方法可以在标记上设置图标。您可以在标记初始化期间或之后（使用marker.setIcon (yourUrl)）设置图标。

女巫给：

  1. 初始化

    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
  position: {lat: -33.890, lng: 151.274},
  map: map,
  icon: image
 });
}

  2. 初始化后

    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
  position: {lat: -33.890, lng: 151.274},
  map: map,
 });
}

beachMarker.setIcon (image);

这是完整的文档，这里是谷歌地图 api 参考。

于 2017-08-01T13:12:28.550 回答
0

在“var marker”对象中，有一个“icon”参数。根据此处的文档，您想使用存储在其中的图标创建另一个变量，然后将图标设置在您当前拥有的标记对象内。

于 2017-08-01T12:13:22.830 回答
0

您无法修改默认的 Google 地图标记，只能隐藏它们。

所以也许你可以：

1/隐藏默认标记：

const styles = {
  hide: [
    {
      featureType: "poi",
      stylers: [{ visibility: "off" }],
    },
  ],
};
map.setOptions({ styles: styles['hide'] });

2/ 然后提出就近的 Place 请求。

3/ 并用您的自定义图像添加您自己的标记。

于 2022-01-10T11:34:13.680 回答