我一直在使用Adobe muse开发网站,我选择在公司的联系页面上实施自定义的Google地图。我这样做是使用一些基本的JavaScript,通过插入HTML元素'插入到Muse文档中。在那里,我有我的JS。
我还应该提一下,我已经将Google Maps API(带有我的相关密钥)链接到了' head'页面,通过页面的元数据(通过页面>页面属性和Muse中的元数据访问)。
按照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>
答案 0 :(得分:2)
通过Google Maps API快速浏览可以了解page。
深入研究API,您可以看到,当您实例化新的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'
});
答案 1 :(得分: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);
答案 2 :(得分:0)
在&#34; var标记&#34;对象,有一个&#34;图标&#34;参数。根据文档here,您想要在其中存储图标的另一个变量,然后在您当前拥有的标记对象内设置图标。
答案 3 :(得分:0)
有两种方法可以在标记上设置图标。您可以在标记初始化期间或之后(使用marker.setIcon (yourUrl)
)设置图标。
女巫:
初始化
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
});
}
初始化后
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);