使用Javascript v3 API为Google Map添加多个点 [英] Adding multiple points to Google Map with Javascript v3 API

问题描述

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

我阅读了此主题和这个线程，也这个线程在SO上，我已经发现了一些错误并做了一些修改，但我仍然无法完成任何显示，除了 map_canvas 。

非常感谢任何帮助。感谢。

当前迭代代码：

 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jstype =text / javascript>< / script> 
< script src =http://maps.google.com/maps/api/js?sensor=falsetype =text / javascript>< / script> 
< script type =text / javascript> 
 $（document）.ready（function（）{initialize（）;}）; 
 
函数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（'地点名称1'）; 
 x.push（33.84659）; 
 y.push（-84.35686）; 
 h.push（'< p>< strong>位置名称1< / strong>< br />地址1< / p>'）; 
 
 t.push（'地点名称2'）; 
 x.push（33.846253）; 
 y.push（-84.362125）; 
 h.push（'< p>< strong>位置名称2< / strong>< br />地址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_canvasstyle =width：400px; height：400px;> Google Map< / div> 
  

解决方案

问题出在这里：

  info_window.open（map，this）; 
  

应该是：

  info_window.open（google_map，this）; 
  

因为这里没有名为 map 的变量。此处的工作版本： http://jsfiddle.net/nrabinowitz/2DBXY/

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

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.

I read this thread and this thread and also this thread on 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.

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> 

解决方案

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/

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

这篇关于使用Javascript v3 API为Google Map添加多个点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！