Fatal编程技术网
  • javascript/
  • Javascript 使用Google Infobox和API v3显示多个标签但不显示标记

Javascript 使用Google Infobox和API v3显示多个标签但不显示标记

javascript google-maps google-maps-api-3

Javascript 使用Google Infobox和API v3显示多个标签但不显示标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我想使用谷歌地图API v3和Infobox显示多个标签，但谷歌地图上没有标记。我搜索了stackoverflow和web，但只找到了显示标记和标签的示例 基本代码来自GoogleMap实用程序库 代码是： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- saved from url=(0098)http://google-maps-utility-library-v3.googlecode

我想使用谷歌地图API v3和Infobox显示多个标签，但谷歌地图上没有标记。我搜索了stackoverflow和web，但只找到了显示标记和标签的示例

基本代码来自GoogleMap实用程序库

代码是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0098)http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-label.html  -->
<HTML><HEAD><TITLE>Creating a Map Label with InfoBox</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT type=text/javascript 
src="Creating%20a%20Map%20Label%20with%20InfoBox_files/js"></SCRIPT>

<SCRIPT type=text/javascript 
src="Creating%20a%20Map%20Label%20with%20InfoBox_files/infobox.js"></SCRIPT>

<SCRIPT type=text/javascript>

    function initialize() {

        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

        var myMapOptions = {
            zoom: 15,
            center: secheltLoc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


        var labelText = "City Hall";
        var labelText2 = "where";

        var myOptions = {
             content: labelText
            ,boxStyle: {
               border: "1px solid #0080FF"
              ,textAlign: "center"
        ,color: "#0080FF"
        ,background: "white"
              ,fontSize: "11pt"
              ,width: "90px"

             }
            ,disableAutoPan: true
            ,pixelOffset: new google.maps.Size(-25, 0)
            ,position: secheltLoc
            ,closeBoxURL: ""
            ,isHidden: false
            ,pane: "mapPane"
            ,enableEventPropagation: true
        };

        var ibLabel = new InfoBox(myOptions);
        ibLabel.open(map);
    }
</SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD>
<BODY onload=initialize()>
  <DIV style="WIDTH: 100%; HEIGHT: 400px" id=map_canvas></DIV>
 </BODY>
</HTML>
如何更改代码以显示多个标签？我不熟悉Javascript和Google API，只需创建另一个信息框即可

例如：

//use the options of the first infoBox to create another infobox
var ibLabel2 = new InfoBox(myOptions);

//apply different content and position
    ibLabel2.setPosition(new google.maps.LatLng(49.47116, -123.75307));
    ibLabel2.setContent('another label');
ibLabel2.open(map);
您可以创建javascript函数来添加信息框：

function createInfoBox(map, text, location) {
    var iOptions = {
        content: text,
        boxStyle: {
            border: "1px solid #0080FF",
            textAlign: "center",
            color: "#0080FF",
            background: "white",
            fontSize: "11pt",
            width: "90px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(0, 0),
        position: location,
        closeBoxURL: "",
        isHidden: false,
        pane: "mapPane",
        enableEventPropagation: true
    };
    var box = new InfoBox(iOptions);
    box.open(map);
}
然后，您将为要在地图上显示的每个标签调用此函数一次，每个标签的文本和位置值都不同

谢谢你的帮助杰夫-那是格雷特汉克斯谢谢你的帮助莫勒博士-你的解决方案很紧凑，正是我所需要的。如果可以的话，还有一个问题——有没有办法让boxStyle的宽度自动调整到我需要的评论长度。如果可以的话，还有一个问题-有没有办法让boxStyle宽度自动调整到标签的长度，而不是设置固定的宽度，例如，宽度：信息框选项中的90px？使用-元素作为框文本的包装再次感谢Molle博士标签确实有效，但在标签下方添加了一条空行，我希望避免。再次感谢@Dr.Molle标签确实有效，但在标签下方添加了一条空行，我希望避免。请问还有别的办法吗？ 
function initialize() {

    var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
    var secheltLoc2 = new google.maps.LatLng(49.47218, -123.76307);

    var myMapOptions = {
        zoom: 15,
        center: secheltLoc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

    var labelText = "City Hall";
    var labelText2 = "where";

    createInfoBox(map, labelText, secheltLoc); //create first label
    createInfoBox(map, labelText2, secheltLoc); //create second label
}