带有信息窗口的多个标记映射错误 [英] Multiple markers with info windows map error

问题描述

我有这张工作地图 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>'+ 
'< / div>']，
 ['< div class = info_content>'+ 
 '< h3> Selvatica< / h3>'+ 
'< p> Selvatica p< / p>'+ 
'< / div>'] 
]; 
  

这会在前面列出的每个标记上添加一个数字

  //循环遍历我们的数组标记& （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等。

  // //允许每个标记有一个信息窗口
 google.maps.event.addListener（marker，'click'，（函数（marker，i）{
 return function（）{
 infoWindow.setContent（infoWindowContent [i] [0]）; 
 infoWindow.open（map，marker）; 
 } 
}）（marker，i））; 
  

解决方案

您的代码很少有问题：

第一个

控制台错误 google未定义

  var bounds = new google.maps.LatLngBounds（）; 
  

位于加载前文件的顶部。将它移动到 jQuery（document）.ready（function（$）{：

）中。

  jQuery（document）.ready（function（$）{
 bounds = new google.maps.LatLngBounds（）; 
  

第二个

  //循环遍历我们的标记数组并放置每个标记
  

为什么？它们已经放置在地图，您只需附加 InfoWindow ：

  //标记= new google.maps.Marker（{
 // position：position，
 // map：map，
 // title：markers [i] [0] 
 // }）; 
 var marker = markers [i]; 
  

在上面的代码中，问题的根源（信息窗口未显示）：您正在创建新 标记对象，而不是使用<$ c $中的现有对象c> marker array。

第三

控制台错误：递归太多

引起的：

  / /自动居中放置屏幕上所有标记的地图
 map.fitBounds（bounds）; 
  

这个问题很可能是 bounds 目前未定义。不知道为什么，但太多的递归通常是由此造成的。我已经评论过，所以你必须看看如何在 fitBounds 中传递有效值。

第四

您在这里有sintax错误：

  var infoWindow = new google.maps.InfoWindow（），marker，i; 
  

您的意思可能是：

  var infoWindow = new google.maps.InfoWindow（）; 
  

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

I have this working map https://jsfiddle.net/m9ugbc7h/4/ then i tryed to integrate multiple markers with info windows following step by step this tutorial http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ so now i got this new version of the map https://jsfiddle.net/m9ugbc7h/5/ but it doesn't work

Here the description how i think the added code works

This is the text for two info windows in order

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>']
];

This adds a number to every marker listed before

// 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]
    });

And this one asigns text 1 to marker 1, text 2 to marker 2, etc.

 // 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));

解决方案

You have few issues with the code:

First

Console error google is not defined caused by:

 var bounds = new google.maps.LatLngBounds();

at the top of the file before google js is loaded. Move it inside jQuery(document).ready(function($){:

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

Second

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

Why? They are already placed on the map, you just want to attach them InfoWindow:

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

In the above code is the root of your problem (info windows not showing up): you are creating new Marker object instead of using the existing one from the markers array.

Third

Console error: too much recursion

caused by:

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

The issue with this one is most probably that bounds are undefined at this moment. Not sure why, but too much recursion is usualy caused by that. I have commented that out, so you will have to take a look how to pass valid value in fitBounds.

Fourth

You have sintax error here:

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

You probably meant:

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

Working fiddle: https://jsfiddle.net/m9ugbc7h/7/

这篇关于带有信息窗口的多个标记映射错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！