如何在自定义Google地图上显示白色弹出框？

我目前有一个地方为我正在处理的自定义地图的数组。我一直在尝试，但无法弄清楚如何在标记上添加“点击”弹出框。我希望白色方框显示名称并有一个选项，以便一个人可以选择'获取到此处的路线'。有谁知道我可以用多一个标记来达到这个目的吗？如何在自定义Google地图上显示白色弹出框？

<!DOCTYPE html> 
<head> 

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 50% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
    var map; 
    var marker 
    function initialize() { 
    var latlng = new google.maps.LatLng(42.098687,-75.917974); 
var restaurants = new Array(); 
restaurants = [ 
     new google.maps.LatLng(42.898687,-75.917974), 
     new google.maps.LatLng(42.698687,-73.917974), 
     new google.maps.LatLng(42.198687,-75.917974), 
     new google.maps.LatLng(41.098687,-75.917974) 
     ]; 
    var myOptions = { 
     zoom: 3, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    var i = 0; 
for (i <0; i < restaurants.length;i++){ 
    var marker = new google.maps.Marker({ 
     position: restaurants[i], 
    map:map, 
     title:"Testing!" 
    }); 
    popupDirections(marker); 
    } 
} 
function popupDirections(marker) { 
    var infowindow = new google.maps.InfoWindow(
     { content: "tests: " 
     }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    }); 
} 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:50%; height:50%"></div> 
</body> 
</html>

来源

2010-09-10 Kevin

您正在讨论的弹出框称为Google地图语言的信息窗口。

GEvent.addListener(marker, "click", function() { 
marker.openInfoWindowHtml("your contents"); 
});

上述代码将点击事件与标记绑定在一起，并用指定的文本打开信息窗口。这里标记是标记对象。

希望它有帮助。

来源

2010-09-10 12:51:33

这样做的方法是创建一个全局infowindow，然后再次重复使用它，这样infowindow就会移动到每个标记，并且可以使用setContent方法更改信息窗口的内容。阅读here，并从api参考站点访问Google演示。我有，当我拍图我的网站同样的问题，

下面的代码应该工作：

<script type="text/javascript"> 
var map; 
var marker; 
var infowindow; //Global infowindow created 
function initialize() { 
    var latlng = new google.maps.LatLng(42.098687,-75.917974); 
    var restaurants = new Array(); 
    restaurants = [ 
     new google.maps.LatLng(42.898687,-75.917974), 
     new google.maps.LatLng(42.698687,-73.917974), 
     new google.maps.LatLng(42.198687,-75.917974), 
     new google.maps.LatLng(41.098687,-75.917974) 
     ]; 
    var myOptions = { 
     zoom: 3, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    infowindow = new google.maps.InfoWindow({ //infowindow options set 
       maxWidth: 355 
    }); 

    var i = 0; 
    for (i <0; i < restaurants.length;i++){ 
      marker = new google.maps.Marker({ 
         position: restaurants[i], 
         map:map, 
         title:"Testing!" 
       }); 
      popupDirections(marker); 
     } 
} 

function popupDirections(marker) { 
    //this function created listener listens for click on a marker 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: " 
    infowindow.open(map,marker); //then opens the infowindow at the marker 
    }); 
} 
</script>

如果你想单独的内容每个标记（我假设你会）你可以通过一些内容导入到popupDirections（）函数中，用内容“html”的字符串修改：

function popupDirections(marker, html) { 
    //this function created listener listens for click on a marker 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: " 
    infowindow.open(map,marker); //then opens the infowindow at the marker 
    }); 
}

来源

2010-09-10 18:48:43 adustduke

如何在自定义Google地图上显示白色弹出框？

回答

相关问题