带有信息窗口地图错误的多个标记

Multiple markers with info windows map error

本文关键字：错误 地图 信息 信息窗 窗口      更新时间：2023-09-26

我有这个工作地图https://jsfiddle.net/m9ugbc7h/4/然后我试图将多个标记与信息窗口按照本教程一步一步整合http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/所以现在我得到了这个新版本的地图https://jsfiddle.net/m9ugbc7h/5/但它不工作

这里是我认为添加的代码如何工作的描述

这是两个信息窗口的文本，顺序为

var infoWindowContent = [
    ['<div class="info_content">' +
    '<h3>Ventura</h3>' +
    '<p>Ventura P</p>' +
     '</div>'],
    ['<div class="info_content">' +
    '<h3>Selvatica</h3>' +
    '<p>Selvatica p</p>' +
    '</div>']
];

这将给

前面列出的每个标记添加一个数字
// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });

这个将文本1分配给标记1，文本2分配给标记2，等等

 // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

代码有几个问题:

第一个

控制台错误google is not defined由于:

 var bounds = new google.maps.LatLngBounds();
在google js加载之前，将

放在文件的顶部。移动到jQuery(document).ready(function($){:

jQuery(document).ready(function($){
    bounds = new google.maps.LatLngBounds();

第二
// Loop through our array of markers & place each one on the map

为什么?它们已经被放置在map上，您只需要附加它们InfoWindow:

 //marker = new google.maps.Marker({
 //    position: position,
 //    map: map,
 //     title: markers[i][0]
 //});
 var marker = markers[i];

在上面的代码是你的问题的根源(信息窗口不显示):你正在创建新的 Marker对象，而不是使用现有的markers数组。

3

控制台错误:太多递归

造成

: 

 // Automatically center the map fitting all markers on the screen
 map.fitBounds(bounds);

这个问题很可能是bounds目前未定义。不知道为什么，但too much recursion通常是由这引起的。我已经把它注释掉了，所以你必须看看如何在fitBounds中传递有效值。

第四

这里有sintax错误:

var infoWindow = new google.maps.InfoWindow(), marker, i;

你的意思可能是:

var infoWindow = new google.maps.InfoWindow();

工作小提琴:https://jsfiddle.net/m9ugbc7h/7/

相关文章：