如何从头开始使用 DevExtreme DxMaps 进行桌面 Web 开发?
How to use DevExtreme DxMaps from scratch for desktop web development?
我应该使用一张地图,显示其中标记的所有指定位置。它需要是一张显示所有位置和路线以及标记的一般地图。然而,
当我在我的 web 开发项目中使用 dxMap 时,什么也没有出现。屏幕只是一片空白。
下面是 html 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>
<div id="mapContainer" style="height:450px;max-width:750px;margin:0px auto"></div>
</body>
</html>
单独的.js文件代码如下:
$(function () {
$('#mapContainer').dxMap({});
});
我在 link 之后使用了这种方法:
http://js.devexpress.com/Documentation/Tutorial/Data_Visualization/Configure_VectorMap/?version=15_1#Create_a_Vector_Map
link 展示了如何配置 DxVectorMap。但是这种方法似乎对dxMap 不起作用。请任何人指导我应该为 dxMap 使用什么方法?
一旦使用正确的 CDN 更改了 head 标签(其中也包括对桌面 Web 应用程序的支持),上述代码就创建了一个 dxmap
<head>
<title>Add a Widget - jQuery Approach</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
**<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.webappjs.js"></script>**
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
我应该使用一张地图,显示其中标记的所有指定位置。它需要是一张显示所有位置和路线以及标记的一般地图。然而, 当我在我的 web 开发项目中使用 dxMap 时,什么也没有出现。屏幕只是一片空白。
下面是 html 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>
<div id="mapContainer" style="height:450px;max-width:750px;margin:0px auto"></div>
</body>
</html>
单独的.js文件代码如下:
$(function () {
$('#mapContainer').dxMap({});
});
我在 link 之后使用了这种方法: http://js.devexpress.com/Documentation/Tutorial/Data_Visualization/Configure_VectorMap/?version=15_1#Create_a_Vector_Map
link 展示了如何配置 DxVectorMap。但是这种方法似乎对dxMap 不起作用。请任何人指导我应该为 dxMap 使用什么方法?
一旦使用正确的 CDN 更改了 head 标签(其中也包括对桌面 Web 应用程序的支持),上述代码就创建了一个 dxmap
<head>
<title>Add a Widget - jQuery Approach</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
**<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.webappjs.js"></script>**
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>