使用Google Infobox和API v3顯示多個標簽，但不顯示標記

Question

我想使用Google Maps API v3和Infobox來顯示多個標簽，但在Google地圖上沒有標記。 我已經搜索了stackoverflow和網絡，但是只找到了顯示標記和標簽的示例。

基本代碼來自Google Map Utility Library 1

代碼是：

<!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>

如何更改代碼以顯示多個標簽？ 我是Java和Google API的新手

Answer 1

只需創建另一個infoBox。

例：

//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);

Answer 2

您可以創建一個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);
}

然后，您要為每個要在地圖上顯示的標簽調用一次此函數，每個標簽的text和location值都不同。

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
}

使用Google Infobox和API v3顯示多個標簽，但不顯示標記

問題描述

2 個解決方案

解決方案1
0 2013-01-25 01:44:38

解決方案2
0 2013-01-25 02:18:16

使用Google Infobox和API v3顯示多個標簽，但不顯示標記

問題描述

2 個解決方案

解決方案1 0 2013-01-25 01:44:38

解決方案2 0 2013-01-25 02:18:16

解決方案1
0 2013-01-25 01:44:38

解決方案2
0 2013-01-25 02:18:16