用户控件中的 Google 地图不适用于多个实例

发布于 2024-10-16 20:59:07 字数 886 浏览 0 评论 0原文

我创建了包含 google map 的用户控件。用户控件中的代码如下

<script type="text/javascript" language="javascript">
var map;
function 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 code:
<div id="map_canvas" style="float: left; width: 100%; height: 300px; border: solid 1px black;" > </div>

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

在父页面（.aspx 页面）中使用用户控件的单个实例时，一切正常。但是，当我尝试在页面中多次使用此用户控件时，仅显示第一个实例的地图。但对于其他实例，它只显示空白，

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

原文

I have created user control which contains google map .
code in user control is as follows

<script type="text/javascript" language="javascript">
var map;
function 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 code:
<div id="map_canvas" style="float: left; width: 100%; height: 300px; border: solid 1px black;" > </div>

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

Everythings 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

分享到QQ

分享到微博