多点 计算缩放 高德地图_JS API高德地图 使用心得

忙里偷闲，闲来无事，事无巨细，那就撩撩吧！！！！

由于业务需要，需要实现：实时坐标定位，轨迹运行监控。

首先需要登陆高德地图API控制台，申请Key。具体操作，网上都有！

<script language="javascript"   src="//webapi.amap.com/maps?v=1.4.15&key=你申请的Key&plugin=AMap.ControlBar,AMap.Driving">script>

完成显示定位信息需要用到：如何在地图设置Marker，以及MarkerLable，用来标记定位点：

map = new AMap.Map('container', {      resizeEnable: true,      rotateEnable:true,      pitchEnable:true,      zoom: 9,      pitch:0,//开启3D视图以后的，地图倾斜度      rotation:0,//左右倾斜度      viewMode:'3D',//开启3D视图,默认为关闭      buildingAnimation:true,//楼块出现是否带动画            expandZoomRange:true,      zooms:[3,20],      //zoom:17,      center: [117.679632,39.550204],       resizeEnable: true    });        map.addControl(new AMap.ControlBar({      showZoomBar:false,      showControlButton:true,      position:{        left:'-85px',        top:'10px'      }    }))            // 以 icon URL 的形式创建一个途经点    var viaMarker = new AMap.Marker({        position: new AMap.LngLat(116.212708,39.925392),        // 将一张图片的地址设置为 icon        icon: 'img/car1.png',                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点        offset: new AMap.Pixel(-13, -30)    });    viaMarker.setLabel({          offset: new AMap.Pixel(-0, -45),  //设置文本标注偏移量          content: '京NB777A
 北京-->青岛', //设置文本标注内容          direction: 'center' //设置文本标注方位      });      // 将 markers 添加到地图    map.add([viaMarker]);

效果图

5b6877025490b08b18a89800320436a7.png

如何做到点击Marker点，触发相关操作：

AMap.event.addListener(endMarker, 'click', function () {          //infoWindow.open(map, endMarker.getPosition());          document.getElementById("ksdhkk").style.display="none";          document.getElementById("rightContent").style.display="none";//隐藏          document.getElementById("rightContent1").style.display="";//显示          document.getElementById("ycyjxx").style.display="none";//显示          document.getElementById("zcyjxx").style.display="";//显示          // 设置缩放级别和中心点          map.setZoomAndCenter(11, [117.572952,39.122991]);    });

高德地图JS API实现轨迹回放的功能：

https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data/