用extjs6写一个 调用百度地图的完整例子
时间: 2023-12-03 15:04:27 浏览: 93
以下是一个使用ExtJS 6调用百度地图的完整示例:
1. 首先,我们需要在HTML文件中引入ExtJS 6和百度地图API:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ExtJS6调用百度地图示例</title>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
```
请注意,您需要将“你的百度地图API密钥”替换为您自己的密钥。
2. 接下来,在ExtJS 6应用程序中创建一个包含地图的面板:
```
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
title: '百度地图',
layout: 'fit',
items: [{
xtype: 'component',
id: 'map-canvas',
autoEl: {
tag: 'div'
},
listeners: {
afterrender: function() {
var map = new BMap.Map(this.id); // 创建百度地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和缩放级别
}
}
}]
});
}
});
```
此代码创建一个ExtJS面板,并在面板中包含一个组件,该组件将在ExtJS应用程序启动后动态创建百度地图实例。
3. 最后,我们需要在浏览器中运行ExtJS应用程序:
将上面的代码保存为一个HTML文件,然后在浏览器中打开该文件即可。您应该会看到一个包含百度地图的面板。
阅读全文