EXT.NET_EXT.UX GMapPanel 插件

最新推荐文章于 2014-06-22 14:52:00 发布

cnblog

最新推荐文章于 2014-06-22 14:52:00 发布

阅读量2.5k

点赞数

分类专栏： .NET Ext.Net 文章标签： google assembly server api ext xhtml

本文链接：https://blog.csdn.net/liuning800203/article/details/6650062

版权

.NET 同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

Ext.Net

5 篇文章 0 订阅

订阅专栏

EXT.NET_EXT.UX GMapPanel插件

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="Ext.Net.UX" Namespace="Ext.Net.UX" TagPrefix="ux" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Window ID="MapWin" Title="GMap Window" CloseAction="Hide" runat="server" Width="450"
        Height="450" Border="false" X="40" Y="60" Layout="FitLayout">
        <Items>
            <ux:GMapPanel ID="GMapPanel1" runat="server" Height="300" Title="Google Map" ZoomLevel="14"
                GMapType="Map" APIKey="Google API Key"
                APIBaseUrl="http://maps.google.com/maps?file=api&v=3.x&key={0}">
                <MapConfiguration DoubleClickZoom="true" ScrollWheelZoom="true" Dragging="true" ContinuousZoom="true" />
                <MapControls GSmallMapControl="true" GMapTypeControl="true" />
                <CenterMarker GeoCodeAddress="4 Yawkey Way, Boston, MA, 02215-3409, USA">
                    <Options Title="Fenway Park" />
                </CenterMarker>
                <Markers>
                    <ux:Marker Lat="42.339641" Lng="-71.094224">
                        <Options Title="Boston Museum of Fine Arts" />
                    </ux:Marker>
                    <ux:Marker Lat="42.339419" Lng="-71.09077">
                        <Options Title="Northeastern University" />
                    </ux:Marker>
                </Markers>
            </ux:GMapPanel>
        </Items>
    </ext:Window>
    </form>
</body>
</html>

效果

说明

1) GMapPanel 插件需要一个容器控件，Panel 或是 Window 都行；

2) 注意 GMapPanel 的 APIKey 和 APIBaseUrl 属性；

3) CenterMarker 设置以该区域为地图显示的中心；

4) Markers 设置在地图上标注点。

5) 另外，GMapPanel 插件是在 EXT.NET 基础上，利用 Google API，封装的一个插件。至于如何使用API，自己搜索一下，需要在 Google 网站上利用 Google 帐号注册一下才能获得。并且最好以 localhost 获得一个API Key。

6) 该例子在 EXT JS 中有，只是完全用 JS 实现，本文用 EXT.NET 实现。其实，本质上完全一样，只是 EXT.NET 封装了EXT JS，就不用直接使用JS了。

7) 顺便说一下，本文没有给Google APIKey。但是EXT JS源代码里有一个用于本地 localhost 测试用的Key，你自己找找，弄上去就行。

参考

Google API http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html

cnblog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
EXT.NET_EXT.UX GMapPanel 插件

EXT.NET_EXT.UX GMapPanel插件 <ext:Window ID="MapWin" Title="GMap Window" CloseAction="Hide" runat="server
复制链接

扫一扫