谷歌地圖API和自定義標記

我使用谷歌地圖API，並希望創造一些自定義的標記，他們都是除了顏色一樣，我不想再重複，像這樣谷歌地圖API和自定義標記

// Add a custom marker 
var marker1 = { 
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z', 
    fillColor: '#ff61b4', 
    fillOpacity: 0.95, 
    scale: 2, 
    strokeColor: '#fff', 
    strokeWeight: 3, 
    anchor: new google.maps.Point(12, 24) 
}; 

var marker2 = { 
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z', 
    fillColor: '#05950a', 
    fillOpacity: 0.95, 
    scale: 2, 
    strokeColor: '#fff', 
    strokeWeight: 3, 
    anchor: new google.maps.Point(12, 24) 
};

代碼

當我想用記號筆

// Markers 
var marker = new google.maps.Marker({ 
    map: map, 
    icon: marker, // can i override the fillColor here ? 
    position: new google.maps.LatLng(51.489401, -3.203586), 
    title: 'title' 
});

我想能夠聲明一個標記，然後覆蓋填充顏色，我怎麼能去呢？

感謝

來源

2017-02-07 Richlewis

一種選擇是使用函數來生成圖標（即一個createIcon功能），它的顏色作爲參數，並返回圖標匿名對象：

function createIcon(color) { 
    return { 
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z', 
    fillColor: color, 
    fillOpacity: 0.95, 
    scale: 2, 
    strokeColor: '#fff', 
    strokeWeight: 3, 
    anchor: new google.maps.Point(12, 24) 
    }; 
}

然後使用，當你創建標記：

var marker1 = new google.maps.Marker({ 
    map: map, 
    position: { 
     lat: 37.448, 
     lng: -122.143 
    }, 
    icon: createIcon('#ff61b4') 
    });

proof of concept fiddle

代碼片段：

function createIcon(color) { 
 
    return { 
 
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z', 
 
    fillColor: color, 
 
    fillOpacity: 0.95, 
 
    scale: 2, 
 
    strokeColor: '#fff', 
 
    strokeWeight: 3, 
 
    anchor: new google.maps.Point(12, 24) 
 
    }; 
 
} 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter(), 
 
    icon: createIcon('blue') 
 
    }); 
 
    var marker1 = new google.maps.Marker({ 
 
    map: map, 
 
    position: { 
 
     lat: 37.448, 
 
     lng: -122.143 
 
    }, 
 
    icon: createIcon('#ff61b4') 
 
    }) 
 
    var marker2 = new google.maps.Marker({ 
 
    map: map, 
 
    position: { 
 
     lat: 37.44, 
 
     lng: -122.148 
 
    }, 
 
    icon: createIcon('#05950a') 
 
    }); 
 

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

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

來源

2017-02-07 20:23:41 geocodezip

非常感謝你，使很多感覺:-) – Richlewis

您可以使用setOptions，如：只改變圖標

marker.setOptions({ 
    icon = "http://labs.google.com/ridefinder/images/mm_20_white.png" 
});

或可點擊

marker.setOptions({clickable:false});

這樣你就可以對所有的標記選項

做同樣的

來源

2017-02-07 20:12:08 scaisEdge

谷歌地圖API和自定義標記

回答

相關問題