<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=自己的key"></script> <style> body,html{ width: 100%; height: 100%; padding:0; margin:0; } #container { width: 50%; height: 50%; } </style> </head> <body> <div id="container"></div> </body> <script> /** * 创建地图 */ // var map = new AMap.Map('container'); /** * 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性: */ // var map = new AMap.Map('container', { // zoom:11,//级别 // center: [116.397428, 39.90923],//中心点坐标 // viewMode:'3D'//使用3D视图 // }); /** * 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性 */ // var map = new AMap.Map('container', { // resizeEnable: true, // center: [116.397428, 39.90923], // zoom: 13 // }); // //实时路况图层 // var trafficLayer = new AMap.TileLayer.Traffic({ // zIndex: 10 // }); // map.add(trafficLayer);//添加图层到地图 /** * 初始化时添加图层 */ var map = new AMap.Map('container', { center: [116.397428, 39.90923], layers: [//使用多个图层 new AMap.TileLayer.Satellite(),//卫星图层 new AMap.TileLayer.RoadNet(), //地点名称 ], zooms: [4,20],//设置地图级别范围 zoom: 13 }); </script> </html>
自己的key 去高德地图官网注册账号,然后注册开发者 就可以获得了。