amapLong2.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div>
  3. <div id="container">
  4. </div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name:'amapLong',
  10. props:["row","arriveIcon"],
  11. data(){
  12. return {
  13. }
  14. },
  15. mounted(){
  16. this.getMap();
  17. },
  18. methods:{
  19. getMap(){
  20. var _this = this;
  21. var map = new AMap.Map('container', {
  22. resizeEnable: true, //是否监控地图容器尺寸变化
  23. zoom:18,
  24. center:[_this.row.lampLng, _this.row.lampLat]
  25. });
  26. // map.setFeatures(['bg', 'road', 'building']);
  27. // map.setCity('长沙市');
  28. // map.setMapStyle("amap://styles/blue");
  29. var circle = new AMap.Marker({
  30. position:[_this.row.lampLng, _this.row.lampLat ],
  31. map:map,
  32. icon:_this.arriveIcon || "http://106.52.134.22:9080/000000-bladex/upload/20200606/diangan.png",
  33. autoRotation:true
  34. });
  35. map.add(circle);
  36. }
  37. }
  38. }
  39. </script>
  40. <style scoped>
  41. #container{
  42. width:600px;
  43. height:300px;
  44. }
  45. #container >>> .amap-icon img{
  46. width:71px !important;
  47. height:71px !important;
  48. }
  49. </style>