我有问题。这是我的地图代码。它运作良好。它正在动态显示地图图标。现在我想动态添加地图图标悬停名称。我怎么能这样做?
<script>
var infowindows = [];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(<?php echo $flag[0]->lat; ?>, <?php echo $flag[0]->lang; ?>),
mapTypeId: 'roadmap'
});
var icons = {
parking: {
icon: '<?php echo get_template_directory_uri(); ?>/img/icon332.png'
}
};
var features = [
<?php
foreach($map as $map)
{
?>
{
position: new google.maps.LatLng(<?php echo $map->lat;?>, <?php echo $map->lang;?>),
type: 'parking'
},
<?php
}
?>
];
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//position: currentLatLng,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDr-oU870bxiB7TJcrlfAtN9HjEvZzjdGI&callback=initMap"></script>
答案 0 :(得分:0)
这是解决方案:
var map;
google.maps.event.addDomListener(window, "load", function () {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $flag[0]->lat; ?>, <?php echo $flag[0]->lang; ?>),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
});
}
return marker;
}
<?php
foreach($map as $map)
{
?>
var marker0 = createMarker({
position: new google.maps.LatLng(<?php echo $map->lat;?>, <?php echo $map->lang;?>),
map: map,
icon: "<?php echo get_template_directory_uri(); ?>/img/icon332.png"
}, "<?php echo $map->hotel; ?>");
<?php
}
?>
});
答案 1 :(得分:0)
下面的教程教您更改Google地图标记的图标。在使用本教程时,了解创建标记的基础知识是有益的。
https://developers.google.com/maps/documentation/javascript/custom-markers