无法在Google Maps API中向“圈子”添加文本

Question

I am trying to add text to circles using GoogleAPI. 我正在尝试使用GoogleAPI将文本添加到圈子中。 I did the following :- 我做了以下事情：

       <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>PoliceMonitor</title>
        <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
    function csvToJS(csv) {
        var resp=[];
        var rows = csv.split('\n');
         for(var i=0;i<rows.length;i++){
             var row=rows[i].split(',');
             row[0]=row[0].trim();
            resp[i]=row;
    console.log(resp);
         }
         return resp;
     }
    var citymap;
    var req = new XMLHttpRequest();
    var file = "http://localhost:8080/rahul/data.csv";
    req.open('GET', file, true);
    req.send();
    req.onreadystatechange = function() {
        if (req.status == 200) {
           var csv = req.responseText;
          var data = csvToJS(csv);

           citymap = data;

        }
        initialize();

    };

        var cityCircle;

        function initialize() {
            // Create the map.
            var mapOptions = {
                zoom : 5,
                center : new google.maps.LatLng(37.09024, -95.712891),
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);


            var loop = 0;
            for (i = 0; i < citymap.length; i++) {
                var populationOptions = {
                    strokeColor : '#000000',
                    strokeOpacity : 0.8,
                    strokeWeight : 2,
                    fillOpacity : 0.35,
                    map : map,
                    center : new google.maps.LatLng(citymap[i][1], citymap[i][2]),
                    //radius : Math.sqrt(citymap[i][3]) * 20000 
                    radius : citymap[i][3] * 9000 
                };

                cityCircle = new google.maps.Circle(populationOptions);
                loop = loop + 1;

            }
       var labelText = '<div style="color: #FFF">Text goes here</div>';

    var myOptions = {
        content: labelText,
        boxStyle: {
            background: '#000',
            border: "1px solid black",
            textAlign: "center",
            fontSize: "8pt",
            width: "90px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(-45, 0),
        position: centerPosition,
        closeBoxURL: "",
        isHidden: false,
        enableEventPropagation: true
    };

    var label = new InfoBox(myOptions);
    label.open(map);

    google.maps.event.addListener(circle, 'center_changed', function () {
        label.setPosition(circle.getCenter());
    });

}



    </script>
    </head>
    <body>
        <p>From all the links retrieved using Google API , only the unique links were counted and represented on the map </p>
        <div id="map-canvas" ></div>
    </body>
    </html>

But this doesnot work . 但这是行不通的。 Can anyone please help me fix this . 谁能帮我解决这个问题。 FOr each circle I have to add different text Trying to read a csv and represent the data on Google Maps using Google Maps API 对于每个圆圈，我必须添加不同的文本尝试读取csv并使用Google Maps API表示Google Maps上的数据

Answer 1

your code got some error and problem with logic also try implementing this:and also make sure that you have added infobox.js file.This should show you the label with each circle. 您的代码遇到了一些错误和逻辑问题，请尝试执行此操作：并确保已添加infobox.js文件，这应显示每个圆圈的label 。

  function csvToJS(csv) { var resp=[]; var rows = csv.split('\\n'); for(var i=0;i<rows.length;i++){ var row=rows[i].split(','); row[0]=row[0].trim(); resp[i]=row; console.log(resp); } return resp; } var citymap; var req = new XMLHttpRequest(); var file = 'https://cdn.rawgit.com/agershun/alasql/version-0.0.36/examples/csv/demo.csv'; req.open('GET', file, true); req.send(); req.onreadystatechange = function() { if (req.status == 200) { var csv = req.responseText; var data = csvToJS(csv); citymap = data; } initialize(); }; var cityCircle; function initialize() { // Create the map. var mapOptions = { zoom : 5, center : new google.maps.LatLng(37.09024, -95.712891), mapTypeId : google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var loop = 0; for (i = 0; i < citymap.length; i++) { var populationOptions = { strokeColor : '#000000', strokeOpacity : 0.8, strokeWeight : 2, fillOpacity : 0.35, map : map, center : new google.maps.LatLng(citymap[i][1], citymap[i][2]), //radius : Math.sqrt(citymap[i][3]) * 20000 radius : citymap[i][3] * 9000 }; cityCircle = new google.maps.Circle(populationOptions); loop = loop + 1; var labelText = '<div style="color: #FFF">Text goes here</div>'; var myOptions = { content: labelText, boxStyle: { background: '#000', border: "1px solid black", textAlign: "center", fontSize: "8pt", width: "90px" }, disableAutoPan: true, pixelOffset: new google.maps.Size(-45, 0), position: populationOptions.center, closeBoxURL: "", isHidden: false, enableEventPropagation: true }; var label = new InfoBox(myOptions); label.open(map); google.maps.event.addListener(cityCircle, 'center_changed', function () { label.setPosition(cityCircle.getCenter()); }); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <div id="map-canvas" style="width: 100%; height: 400px"></div>

无法在Google Maps API中向“圈子”添加文本

问题描述

1 个解决方案

解决方案1
1 2015-01-11 08:34:18

无法在Google Maps API中向“圈子”添加文本

问题描述

1 个解决方案

解决方案1 1 2015-01-11 08:34:18

解决方案1
1 2015-01-11 08:34:18