将Google地图标记图标更改为自定义图标

时间:2017-08-01 12:01:32

标签: javascript html google-maps google-maps-api-3 muse

我一直在使用Adobe muse开发网站,我选择在公司的联系页面上实施自定义的Google地图。我这样做是使用一些基本的JavaScript,通过插入HTML元素'插入到Muse文档中。在那里,我有我的JS。

我还应该提一下,我已经将Google Maps API(带有我的相关密钥)链接到了' head'页面,通过页面的元数据(通过页面>页面属性和Muse中的元数据访问)。

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

我的问题出现在尝试使用我在illustrator中创建的标记替换默认标记图标(本地存储在我的i​​Mac上),我跟随了大量不同的指南并尝试了多种方式来实现自定义图标,但没有任何运气 - 有人可以告诉我哪里出错了吗?非常感谢。

这是我的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 个答案:

答案 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))设置图标。

女巫:

  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);
    
  3. Here是完整的文档和here google maps api参考。