从不同的MVC视图调用google map api java脚本函数 [英] Call google map api java script function from different MVC view

问题描述

我对MVC很陌生，我不确定如何推进这个问题。



基本上，我有几个小组的观点;一个用于gridview，另一个用于谷歌地图。

I'm quite new to MVC and am not sure how to put this question forward.

Basically, I have a view with couple of panels; one for gridview, another for google map.

subpane.Panes.Add(mapPane =>
{
    mapPane.Name = "MapPane";
    mapPane.PaneStyle.CssClass = "mapPane";
    mapPane.SetContent(() =>
    {
        Html.RenderPartial("GoogleMapPartialView");
    });
});
subpane.Panes.Add(bodyPane =>
{
    bodyPane.Name = "BodyPane";
    bodyPane.PaneStyle.CssClass = "contentPane";
    bodyPane.SetContent(RenderBody().ToHtmlString());
});

根据BodyPane中的数据选择，我想在mapPane中添加标记。所以我在BodyPane中调用了这个函数：

Based on the data selection in BodyPane, I would like to add marker in mapPane. So am calling this function in BodyPane :

function OnGridFocusedRowChanged(s, e) {
s.GetRowValues(s.GetFocusedRowIndex(), 'SiteID;Latitude;Longitude', OnGetRowValues);
alert(SiteID);
}

And following is code of GoogleMapPartialView

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         initialize();
     });
     function initialize() {
         var mapOptions = {
             center: new google.maps.LatLng(-6.27845, 107.094),
             zoom: 10,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         var map = new google.maps.Map(document.getElementById("map_canvas"),
       mapOptions);
         // create a marker
         var latlng = new google.maps.LatLng(-6.27845, 107.094);
         var marker = new google.maps.Marker({
             position: latlng,
             map: map,
             title: 'My Place'
         });
     }

     function showMarker(title, lat, long) {
         map.clear;
         var latlng = new google.maps.LatLng(lat, long);
         var marker = new google.maps.Marker({
             position: latlng,
             map: map,
             title: title
         });
     }<code></code>
 </script>
  <div id="map_canvas" class="mapPanel">
 </div>

我不知道怎么样所有这个功能，所以基于我的gridview中的记录选择，我可以在谷歌地图中显示相应的位置。



由于两者都在同一页面，我想也许可以打电话BodyPane中的这个应该可以工作，但事实并非如此。

Am not sure how to call this function, so that based on record selection in my gridview, I can show respective location in google map.

Since both are on same page, I thought maybe calling this within BodyPane should work, but it doesn't.

function OnGetRowValues(values) {
    //alert(values[0]);
    showMarker(values[0], values[1], values[2]);
}

推荐答案

（document）.ready（function（）{
initialize（） ;
}）;
函数initialize（）{
var mapOptions = {
center：new google.maps.LatLng（-6.27845,107.094），
zoom：10，
mapTypeId： google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），
mapOptions）;
//创建一个标记
var latlng = new google.maps.LatLng（-6.27845,107.094）;
var marker = new google.maps.Marker（{
position：latlng，
map：map，
title：'My Place'
}）;
}

函数showMarker（title，lat，long）{
map.clear;
var latlng = new google.maps.LatLng（lat，long）;
var marker = new google.maps.Marker（{
position：latlng，
map：map，
title：title
}）;
} < 代码 > < / code >
< / script >
< div id = map_canvas class = mapPanel >
< / div >

(document).ready(function () { initialize(); }); function initialize() { var mapOptions = { center: new google.maps.LatLng(-6.27845, 107.094), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // create a marker var latlng = new google.maps.LatLng(-6.27845, 107.094); var marker = new google.maps.Marker({ position: latlng, map: map, title: 'My Place' }); } function showMarker(title, lat, long) { map.clear; var latlng = new google.maps.LatLng(lat, long); var marker = new google.maps.Marker({ position: latlng, map: map, title: title }); }<code></code> </script> <div id="map_canvas" class="mapPanel"> </div>

我不知道怎么样所有这个功能，所以基于我的gridview中的记录选择，我可以在谷歌地图中显示相应的位置。



由于两者都在同一页面，我想也许可以打电话BodyPane中的这个应该可以工作，但事实并非如此。

Am not sure how to call this function, so that based on record selection in my gridview, I can show respective location in google map.

Since both are on same page, I thought maybe calling this within BodyPane should work, but it doesn't.

function OnGetRowValues(values) {
    //alert(values[0]);
    showMarker(values[0], values[1], values[2]);
}

这篇关于从不同的MVC视图调用google map api java脚本函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！