快速建立高德地圖
記得更新內容的 “??????” 成為你需要的資料。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<div id="container"></div> <!-- 加载地图JSAPI脚本 --> <script src="https://webapi.amap.com/maps?v=1.4.5&key=?????????????"></script> <!-- <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> --> <script> var map = new AMap.Map('container', { resizeEnable: true, //是否监控地图容器尺寸变化 zoom:17, //初始化地图层级 center: [114.219671, 22.313517], //初始化地图中心点 // lang: "en", //lang // mapStyle: "amap://styles/whitesmoke", // or // mapStyle: "amap://styles/fc262fb21bfc2f257b6aa9c5b9f1d78e", //需要到網站設定並發布 }); //实时路况图层 // var trafficLayer = new AMap.TileLayer.Traffic({ // zIndex: 10 // }); // map.add(trafficLayer);//添加图层到地图 // var marker = new AMap.Marker({ // position:[??????????, ??????????]//位置 // }) // 创建 AMap.Icon 实例： var icon = new AMap.Icon({ size: new AMap.Size(40, 59), // 图标尺寸 image: 'uri_image??????????', // Icon的图像 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等 imageSize: new AMap.Size(40, 59) // 根据所设置的大小拉伸或压缩图片 }); // 将 Icon 实例添加到 marker 上: var marker = new AMap.Marker({ position: new AMap.LngLat(??????????, ??????????), offset: new AMap.Pixel(-20, -29.5), icon: icon, // 添加 Icon 实例 // title: '??????', // zoom: 13 }); map.add(marker);//添加到地图 map.setFeatures(['bg','road','point']); //限制地图显示范围 function lockMapBounds() { var bounds = map.getBounds(); map.setLimitBounds(bounds); } //取消地图显示限制 function unlockMapBounds() { map.clearLimitBounds(); } //启用地图范围限定 // lockMapBounds(); map.plugin(["AMap.ToolBar"],function(){ var toolBar = new AMap.ToolBar({ position:"RT", //RT=RightTop...LT/RB/LB locate: true }) map.addControl(toolBar); }); </script> |