首页用extjs6写一个调用百度地图的完整例子

用extjs6写一个调用百度地图的完整例子

时间: 2023-12-03 17:04:27 浏览: 97

调用百度地图的案例

一个html网页用于调用百度地图，浏览器可以直接打开看到效果

以下是一个使用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文件，然后在浏览器中打开该文件即可。您应该会看到一个包含百度地图的面板。

阅读全文