使用 Javascript v3 API 向 Google Map 添加多个点

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6630915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 21:20:02  来源:igfitidea点击:

Adding multiple points to Google Map with Javascript v3 API

javascriptgoogle-maps-api-3

提问by soycharliente

I've been stuck on this for a few days now. I'm having issues adding multiple points to a map using v3 of the Javascript API.

我已经坚持了几天了。我在使用 Javascript API 的 v3 向地图添加多个点时遇到问题。

I read this threadand this threadand also this threadon SO and I've caught a few mistakes and made some changes, but I still can't quite get anything to display except for the HTML text in map_canvas.

我阅读了此线程此线程以及SO 上的此线程,我发现了一些错误并进行了一些更改,但除了 .html 中的 HTML 文本外,我仍然无法显示任何内容map_canvas

Any help is much appreciated. Thanks.

任何帮助深表感谢。谢谢。

Current iteration of code:

当前的代码迭代:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { initialize(); });

    function initialize() {
        var map_options = {
            center: new google.maps.LatLng(33.84659,-84.35686),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

        var info_window = new google.maps.InfoWindow({
            content: 'loading'
        });

        var t = [];
        var x = [];
        var y = [];
        var h = [];

        t.push('Location Name 1');
        x.push(33.84659);
        y.push(-84.35686);
        h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');

        t.push('Location Name 2');
        x.push(33.846253);
        y.push(-84.362125);
        h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');

        var i = 0;
        for ( item in t ) {
            var m = new google.maps.Marker({
                map:       google_map,
                animation: google.maps.Animation.DROP,
                title:     t[i],
                position:  new google.maps.LatLng(x[i],y[i]),
                html:      h[i]
            });

            google.maps.event.addListener(m, 'click', function() {
                info_window.setContent(this.html);
                info_window.open(map, this);
            });
            i++;
        }
    }
</script> 
<div id="map_canvas" style="width:400px;height:400px;">Google Map</div> 

回答by nrabinowitz

The problem is here:

问题在这里:

info_window.open(map, this);

It should be:

它应该是:

info_window.open(google_map, this);

because there's no variable here named map. Working version here: http://jsfiddle.net/nrabinowitz/2DBXY/

因为这里没有名为map. 这里的工作版本:http: //jsfiddle.net/nrabinowitz/2DBXY/

If you're not doing so yet, try using a tool like Firebug or the Chrome console - debugging Javascript is almost impossible without one.

如果您还没有这样做,请尝试使用 Firebug 或 Chrome 控制台之类的工具 - 如果没有,几乎不可能调试 Javascript。