个人中心
gpt4 book ai didi

javascript - 在 Google map API 中向圈子添加文本不起作用

转载 作者：行者123 更新时间：2023-11-28 00:41:20 25 4
gpt4 key购买 nike

我正在尝试使用 GoogleAPI 向圈子添加文本。我做了以下事情:-

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

但这不起作用。谁能帮我解决这个问题。对于每个圆圈，我必须添加不同的文本尝试使用 Google Maps API 读取 csv 并在 Google map 上表示数据

最佳答案

您的代码出现一些错误和逻辑问题，也请尝试实现此操作:并确保您已添加 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>

关于javascript - 在 Google map API 中向圈子添加文本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27884724/

25 4 0
文章推荐： html - Bootstrap 表所有列未显示
文章推荐： javascript - 将 javascript Http Upload 脚本转换为 Curl 命令
文章推荐： javascript - 如何使用 jQuery/Javascript 检查用户是否已选中一组复选框中的至少一个复选框？
文章推荐： c++ - 匹配通用优先级队列类型的函数参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com