可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am trying to create a google map with custom icon markers. I need to be able to add dynamic text to the actual marker. In other words is there anyway to add a div? I need to add prices from xml to the actual marker.. I hope this makes sense. ANY HELP would be greatly appreciated or if anyone can point me in the right direction. Thanks!
MY JQUERY:
function addMarker() { for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i][0]); var lng = parseFloat(markers[i][1]); var trailhead_name = markers[i][2]; var myLatlng = new google.maps.LatLng(lat, lng); var contentString = "<html><body><div class='mapPopup'><div class='mapPopIn'>" + trailhead_name + "</div></div></body></html>"; var image = 'images/map-marker.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, title: "Click for more information", icon: image });
The actual map i am trying to modify is: http://travellinginmexico.com/hotels_map.php?c=cancun
回答1:
There are two options, InfoBox and MarkerWithLabel. I like MarkerWithlabel because it's lighter and easier to use. The disadvantage is I can't figure out how to replace the text of Markerwithlabel after it's created. You can do so with InfoBox because you actually need to create a div.
I'll give an example with static data from the Javascript which you can replace with data from an XML. You will also need to style the MarkerWithLabel to fit your icon. For example, labelStyle: top will change the vertical offset.
http://jsfiddle.net/RAH6G/ click the "not really ajax" button.
function createMarker(position, label) { return new MarkerWithLabel({ position: position, draggable: false, map: map, labelText: label, labelClass: "labels", // the CSS class for the label labelStyle: {top: "0px", left: "-21px", opacity: 0.75}, labelVisible: true }); } var readData = function() { // create markers pos = [ new google.maps.LatLng(40, -85), new google.maps.LatLng(42, -92), new google.maps.LatLng(36, -100), new google.maps.LatLng(39, -112) ]; label = ["$200", "99pts.", "US$30", "US$999"]; for (var i = 0; i < pos.length; i++) { createMarker(pos[i], label[i]); } }
回答2:
I know this is an older thread, but I had a very similar problem (trying to update the label content of a marker created with MarkerWithLabel) and it took a while for me to find a solution.
Create a marker with MarkerWithLabel:
marker = new MarkerWithLabel({ position: googlemapslatlng, icon: url-to-icon, map: map, title: "Marker Title", labelContent: content, labelClass: marker_shade });
Then you can update the label using:
marker.labelClass = marker_shade_updated; marker.labelContent = marker_content_updated; marker.label.setStyles(); // Force the marker label to redraw
Hope this helps.
