将动态内容添加到Google地图标记 [英] Adding dynamic content to Google Maps marker
问题描述
我正在尝试使用自定义图标标记创建Google地图。我需要能够添加动态文本到实际的标记。换句话说，无论如何要添加一个div？我需要从XML添加价格到实际的标记..我希望这是有道理的。任何帮助将不胜感激，如果任何人都可以指出我在正确的方向。
我的JQUERY：
函数addMarker（）{
for（var i = 0; i< markers.length; i ++）{
//获得每个标记的属性
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：点击以获取更多信息，
icon：图片
}）;
我试图修改的实际地图是： http://travellinginmexico.com/hotels_map.php?c=cancun
有两种选择， InfoBox 和 MarkerWithLabel 。我喜欢MarkerWithlabel，因为它更轻，更易于使用。缺点是我无法弄清楚如何在创建Markerwithlabel后替换文本。您可以使用InfoBox来做到这一点，因为您实际上需要创建一个div。
我将给出一个来自Javascript的静态数据示例，您可以用XML中的数据替换它。您还需要将MarkerWithLabel设计为适合您的图标。例如，labelStyle：top将更改垂直偏移量。
http://jsfiddle.net/RAH6G/点击not ajax按钮。
函数createMarker（position，label）{
return new MarkerWithLabel {
position：position，
draggable：false，
map：map，
labelText：label，
labelClass：labels，// CSS类标签
labelStyle：{top：0px，left：-21px，opacity：0.75}，
labelVisible：true
}）;
var readData = function（）{//创建记号
pos = [
new google.maps.LatLng（40，-85），
new google.maps.LatLng（42，-92），
google.maps.LatLng（36，-100），
google.maps.LatLng（39，-112）
];
label = [$ 200，99pts。，US $ 30，US $ 999];
for（var i = 0; i
}
}
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
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]);
}
}
这篇关于将动态内容添加到Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
