为什么用户控件中的Google Map不适用于多个实例 [英] Why does not Google Map in User control not working for multiple instances

问题描述

我创建了包含Google Map的用户控件.用户控件中的代码如下

Hi,
I have created user control which contains google map. Code in user control is as follows

<script type="text/javascript" language="javascript">
var map;
fucntion intialize(){
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        //set the default center
       map.setCenter(myLatlng);
        //set the default zoom
       map.setZoom(initialZoom);

        //Set the map type
       map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
}
</script>

HTML代码:

HTML code:

<div id="map_canvas" style="float: left; width: 100%; height: 300px; border: solid 1px black;" > </div>

使用
从后面的代码(.ascx.cs)调用Initialize()函数 Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "FunctionCall", "initialize();")

当在父页面(.aspx页面)中使用单个用户控件实例时，一切工作正常.但是，当我尝试在页面中多次使用此用户控件时，仅显示第一个实例的地图.但是在其他情况下，除了空白以外，它什么都没有显示.

我想为用户控件的所有实例显示Google Maps
例如，当使用用户控制4次时，应显示4张地图

谢谢&问候，
Anirudha Deshpande

Call to Initialize() function is from code behind(.ascx.cs) using
Me.Page.ClientScript.RegisterStartupScript(Me.GetType(), "FunctionCall", "initialize();")

Everything works fine when single instance for user control is used in parent page (.aspx page). But when i tried to used this user control multiple times in page, only map for 1st instance is showing. But for other instances it is not showing anything but blank.

I want to display google maps for all instances of the user control
For ex when user control is used 4 times,4 maps should be displayed

Thanks & Regards,
Anirudha Deshpande

推荐答案

根据您发布的内容，看来所有实例都具有相同的ID.

您需要具有不同的ID，并分别(或循环)进行每个调用.

另外，您可以给他们一个伪造的类，并使用jQuery对其进行分类".如果您的班级名为map-canvas-placeholder，则可以执行以下操作:

By what you''ve posted it looks like all instances would have the same ID.

You''ll need to have different IDs and make each call separately (or in a loop).

Alternatively, you could give them a fake class and ''each'' them with jQuery. If your class was called map-canvas-placeholder you''d do something like this:

(".map-canvas-placeholder").each(function(){ var currentCanvas =

(".map-canvas-placeholder").each(function(){ var currentCanvas =

(this); // a this point you''d be able to work with currentCanvas // and make the init calls required });

(this); // a this point you''d be able to work with currentCanvas // and make the init calls required });

无论您将上面的代码插入哪个函数，这都是您从后面的代码中调用的功能.

在多张Google地图上进行Google搜索也会产生结果.

干杯.

Whatever function you stick the block above in, that''s what you''d call from the code behind.

A Google search on multiple google maps would also yield results.

Cheers.

这篇关于为什么用户控件中的Google Map不适用于多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！