使用MarkerWithLabel添加自定義標記圖像

Question

我試圖添加自定義圖像作爲谷歌地圖圖標。目前我的自定義圖像沒有顯示，但地圖可以正常工作。我想在這裏效仿：http://google-maps-utility-library-v3.googlecode.com/svn-history/r150/trunk/markerwithlabel/docs/examples.html

代碼：

<script src="https://maps.googleapis.com/maps/api/js"></script> 
<script type="text/javascript" src="js/markerwithlabel.js"></script> 
<script> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(42.350358,-71.0851531); 
    var mapOptions = { 
    zoom: 13, 
    center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    var pictureLabel1 = document.createElement("img"); 
    pictureLabel1.src = "images/cake.png"; 

    var pictureLabel2 = document.createElement("img"); 
    pictureLabel2.src = "images/hotel.png"; 

    var marker1 = new MarkerWithLabel({ 
     position: new google.maps.LatLng(42.341239,-71.111074), 
     map: map, 
     labelContent: pictureLabel1, 
     labelAnchor: new google.maps.Point(50,30), 
     labelClass: "labels", 
     labelInForeground: true 
    }); 

    var marker2 = new MarkerWithLabel({ 
     position: new google.maps.LatLng(42.3416983,-71.0705033), 
     map: map, 
     labelContent: pictureLabel2, 
     labelAnchor: new google.maps.Point(1,30), 
     labelClass: "labels", 
     labelInForeground: true 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

您定義MarkerWithLabel就像你與正常google.maps.Marker objects做自定義圖標。將圖標屬性添加到is並提供圖標的URL。

工作的代碼段與藍色圖標：

function initialize() { 
 
    var myLatlng = new google.maps.LatLng(42.350358, -71.0851531); 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: myLatlng 
 
    } 
 
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 

 
    var pictureLabel1 = document.createElement("img"); 
 
    pictureLabel1.setAttribute("style","width:50px"); 
 
    pictureLabel1.src = "http://google-maps-utility-library-v3.googlecode.com/svn-history/r150/trunk/markerwithlabel/examples/home.jpg"; 
 

 
    var pictureLabel2 = document.createElement("img"); 
 
    pictureLabel2.setAttribute("style","width:50px"); 
 
    pictureLabel2.src = "http://google-maps-utility-library-v3.googlecode.com/svn-history/r150/trunk/markerwithlabel/examples/home.jpg"; 
 

 
    var marker1 = new MarkerWithLabel({ 
 
    position: new google.maps.LatLng(42.341239, -71.111074), 
 
    map: map, 
 
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png", 
 
    labelContent: pictureLabel1, 
 
    labelAnchor: new google.maps.Point(50, 0), 
 
    labelClass: "labels", 
 
    labelInForeground: true 
 
    }); 
 

 
    var marker2 = new MarkerWithLabel({ 
 
    position: new google.maps.LatLng(42.3416983, -71.0705033), 
 
    map: map, 
 
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png", 
 
    labelContent: pictureLabel2, 
 
    labelAnchor: new google.maps.Point(1, 0), 
 
    labelClass: "labels", 
 
    labelInForeground: true 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r150/trunk/markerwithlabel/src/markerwithlabel.js"></script> 
 
<div id="map_canvas"></div>