高德地圖api 常用JS元件
阿新 • • 發佈:2019-01-02
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=你自己的key"></script> <!-- UI元件庫 1.0 --> <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <script type="text/javascript"> var wzMap = new AMap.Map('wzMapContainer', { resizeEnable: true, zoom: 12, center: [121.348412,31.135244] }); wzMap.setMapStyle('amap://styles/darkblue'); // 標準 darkblue var wzCenter = [121.348412,31.135244]; //座標 var wzCaobao = [121.373221,31.164957]; //座標 var wzChenhang = [121.482260,31.088360]; //座標 var wzChongnan = [121.474279,31.210149]; //座標 // 標記位置 var marker01 = new AMap.Marker({ map: wzMap, position: wzCenter, icon: new AMap.Icon({ image: "img/wzMark01.png", size: new AMap.Size(88, 60) //圖示大小 }), }) marker01.setLabel({ offset: new AMap.Pixel(-40, 50), //中心庫座標偏移位置 content: '<div class="mapMarkerBG01">中心庫</div>', }) var marker02 = new AMap.Marker({ map: wzMap, position: wzCaobao, icon: new AMap.Icon({ image: "", size: new AMap.Size(25, 25) //圖示大小 }) }) marker02.setLabel({ offset: new AMap.Pixel(-10, 4), //座標偏移位置 content: '<div class="mapMarkerBG"><span class="mapMarkerText">倉庫</span></div>', }); var marker03 = new AMap.Marker({ map: wzMap, position: wzChenhang, icon: new AMap.Icon({ image: "", size: new AMap.Size(25, 25) //圖示大小 }) }) marker03.setLabel({ offset: new AMap.Pixel(-10, 4), //座標偏移位置 content: '<div class="mapMarkerBG"><span class="mapMarkerText">倉庫</span></div>', }); var marker04 = new AMap.Marker({ map: wzMap, position: wzChongnan, icon: new AMap.Icon({ image: "", size: new AMap.Size(25, 25) //圖示大小 }) }) marker04.setLabel({ offset: new AMap.Pixel(-56, -92), //已到達座標偏移位置 content: '<div class="mapMarkerArrived"><div class="mapMarkerBGArrived"><span class="mapMarkerText">倉庫</span></div></div>', }); // 地圖上覆蓋物較多的情況下,如果需要保證所有覆蓋物都在視野範圍內, 需要將地圖調整到合適的縮放等級和中心點,我們可以呼叫setFitView()方法 // wzMap.setFitView(); // 繪製軌跡 var polyline01 =new AMap.Polyline({ map: wzMap, path: [wzCenter,wzCaobao], strokeColor: "#a0a0a0", //線顏色 strokeOpacity: 1, //線透明度 strokeWeight: 3, //線寬,預設為 1 strokeStyle: "solid" //線樣式 }); var polyline02 =new AMap.Polyline({ map: wzMap, path: [wzCenter,wzChenhang], strokeColor: "#15d729", //線顏色 strokeOpacity: 1, //線透明度 strokeWeight: 3, //線寬,預設為 1 strokeStyle: "dashed" //線樣式 }); var polyline03 =new AMap.Polyline({ map: wzMap, path: [wzCenter,wzChongnan], strokeColor: "#15d729", //線顏色 strokeOpacity: 1, //線透明度 strokeWeight: 3, //線寬,預設為 1 strokeStyle: "dashed" //線樣式 }); AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) { if (!PathSimplifier.supportCanvas) { alert('當前環境不支援 Canvas!'); return; } var pathSimplifierIns = new PathSimplifier({ zIndex: 100, autoSetFitView:false, map: wzMap, //所屬的地圖例項 getPath: function(pathData, pathIndex) { return pathData.path; }, getHoverTitle: function(pathData, pathIndex, pointIndex) { if (pointIndex >= 0) { //point return pathData.name + ',點:' + pointIndex + '/' + pathData.path.length; } return pathData.name + ',點數量' + pathData.path.length; }, renderOptions: { "startPointStyle": { "radius": 1, }, "endPointStyle": { "radius": 1, }, "pathLineStyle": { "lineWidth": 2, "strokeStyle": "#000000", "borderWidth": 0, }, "pathNavigatorStyle": { "autoRotate": false, }, renderAllPointsIfNumberBelow: -1 //繪製路線節點,如不需要可設定為-1 } }); window.pathSimplifierIns = pathSimplifierIns; //設定資料 pathSimplifierIns.setData([{ name: '路線', path: [ wzCenter, wzChenhang ] }]); //對第一條線路(即索引 0)建立一個巡航器 var wzNavg = pathSimplifierIns.createPathNavigator(0, { loop: true, //迴圈播放 speed: 10000, //巡航速度,單位千米/小時 pathNavigatorStyle: { width: 59, height: 45, content: PathSimplifier.Render.Canvas.getImageContent('img/wzLegendCar.png', onload, onerror), }, }); wzNavg.start(); }); </script>