Question

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

基本代码来自Google地图实用程序库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>

如何更改代码以显示多个标签？我是Javascript和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函数来添加InfoBox：

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 个答案: