javascript - Google Maps API 集成 - map 标记的点击功能,令人头疼

标签 javascript google-maps dom-events

我“尝试”让 Google map 上的标记在单击时激活并显示一些信息。

问题是,我的标记在途中的某个地方消失了(或者至少没有被绘制),并且当我使用 Firebug 检查断点时,我收到了一些关于来自 Google 的代码的奇怪警告...

相当简单,我已经阅读了这篇文章: http://www.googlemapsbook.com/2007/03/06/clickable-labeledmarker/

甚至几乎完全模仿了所提供的示例代码,试图使其正常工作......但一切都无济于事。

不幸的是,我没有可以向您展示的实时版本,因为我目前正在离线进行这部分测试。但希望下面的 Pastebin 足以让有处理 GMaps API 经验的人找出我逻辑中的缺陷。

http://pastebin.com/wDY3DLtA

如果您需要任何进一步的信息,请告诉我。

任何有关此事的帮助将不胜感激,

最佳答案

下面是一个向标记添加监听器的示例,并在单击标记时弹出信息。这是我对其他问题的回答:How could i show info window for ten markers in google maps? ,但我认为它应该对你有帮助。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
    var washington = new google.maps.LatLng(47.7435, -122.1750);
    var myOptions = {
        zoom: 7,
        center: washington,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });
    infowindow = new google.maps.InfoWindow({ content: "loading..." });
    boats(map, seller);
}

var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];

function boats(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var seller = markers[i];
        content_string = '<div style="width: 210px; padding-right: 10px" lang="ko" xml:lang="ko">(&#44396;&#44208;/&#21475;&#35363;)' + seller[0] + '<br>' + seller[1] + '<br>' + seller[4] + '</div>';
        var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
        var marker = new google.maps.Marker({
            position: sellerLatLng,
            map: map,
            title: seller[0],
            zIndex: seller[3],
            html: content_string
        });
        var contentString = "content";
        google.maps.event.addListener(marker, "click", function () {

            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }

}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<div lang="it" xml:lang="it">Ciao bella!</div>
<div lang='ko' xml:lang='ko'>??/??</div>
</body>
</html>

关于javascript - Google Maps API 集成 - map 标记的点击功能,令人头疼,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3280813/

相关文章:

javascript - React 组件不工作

ios - 在 Google Maps iOS API 中创建虚线折线时未解析的标识符

javascript - 将 JavaScript 函数添加到 PHP 中的重复区域

google-maps - maps.google.com上的现代矩形InfoWindow

javascript - 使 onKeyDown 触发 HTML 按钮的 onClick 事件

javascript - 如何使用事件驱动比较编写 QuickSort?

javascript - 如何在简单的 HTML 和普通 JavaScript 测验中自动计算测验分数?

javascript - Knockout.js - 出现错误 - 未捕获的 ReferenceError : Unable to process binding "with: function"

JavaScript 事件监听器与事件处理程序

javascript - obj.func(arg) 和 obj.func.bind(obj, arg) 之间的区别