2014-05-22 18 views
5

長久以來一直在爲此苦苦掙扎。我想使用Bootstrap glyphicon作爲谷歌地圖標記圖像。下面是我的谷歌地圖的JavaScript代碼:使用Bootstrap Glyphicon作爲谷歌地圖標記

var image = { 
    src: '<i class="glyphicon glyphicon-move"></i>',  
    size: new google.maps.Size(24, 24), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(12,12) 
    }; 
var marker = new google.maps.Marker({ 
     draggable: true,   
     icon: image, 
     title: 'Drag to move to new location', 
     raiseOnDrag: false 
    });  

如果有人能指導我一個例子嗎?

+0

檢查該HTTP源代碼:// gmaps樣本-V3。 googlecode.com/svn/trunk/overlayview/custommarker.html此處的詳細信息https://groups.google.com/forum/#!topic/google-maps-js-api-v3/kO9O1wqYjwU –

+0

看起來你不能。閱讀https://productforums.google.com/forum/#!msg/maps/c3W8kbRzCaQ/o3IQG_6D6r4J –

+1

你可以使用標籤,而不是http://jsbin.com/zenem/1/edit在哪裏你可以用css控制標記 –

回答

1

首先,你需要爲載體,你可以在這裏購買的Glyphicons:

https://developers.google.com/maps/documentation/javascript/symbols#add_to_marker

http://glyphicons.com/

使用JavaScript API第3版,您可以根據文檔在這裏描述使用SVG路徑

的谷歌示例代碼是這樣的:

// This example uses SVG path notation to add a vector-based symbol 
// as the icon for a marker. The resulting icon is a star-shaped symbol 
// with a pale yellow fill and a thick yellow border. 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -25.363882, lng: 131.044922} 
    }); 

    var goldStar = { 
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z', 
    fillColor: 'yellow', 
    fillOpacity: 0.8, 
    scale: 1, 
    strokeColor: 'gold', 
    strokeWeight: 14 
    }; 

    var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: goldStar, 
    map: map 
    }); 
}