首页ext js6写地图的代码

ext js6写地图的代码

时间: 2024-05-07 11:15:14 浏览: 358

以下是一个使用Ext JS 6和百度地图API的示例代码： 1. 在HTML文档中添加以下代码： ```html <!DOCTYPE html> <html> <head> <title>Ext JS 6 and Baidu Map Demo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_api_key"></script> <script type="text/javascript" src="app.js"></script> </head> <body> </body> </html> ``` 注意替换`your_api_key`为你自己的百度地图API密钥。 2. 创建一个`app.js`文件，添加以下代码： ```javascript Ext.application({ name: 'MyApp', launch: function () { // 创建一个地图 var map = new BMap.Map("map-container"); // 设置地图中心和缩放级别 var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 添加一个标记 var marker = new BMap.Marker(point); map.addOverlay(marker); // 添加一个信息窗口 var infoWindow = new BMap.InfoWindow("Hello, world!"); marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); }); } }); ``` 3. 在HTML文档的`<body>`标签内添加一个`<div>`元素，用于显示地图： ```html <body> <div id="map-container" style="width:100%;height:500px;"></div> </body> ``` 4. 运行HTML文档，应该可以看到一个地图和一个标记，并且单击标记会弹出一个信息窗口。这只是一个简单的示例，你可以根据自己的需求使用更多的百度地图API来创建更复杂的地图应用程序。

阅读全文