mapMarkerDouble.vue 1012 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <div>
  3. <baidu-map class="map" :center="{lng: info.lon, lat:info.lat}" :zoom="12" :scroll-wheel-zoom="true" ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6">
  4. <bm-marker :position="{lng: info.lon, lat:info.lat}">
  5. <bm-label content="门店位置" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -20, height:26}"/>
  6. </bm-marker>
  7. <bm-marker :position="{lng: info.alon, lat:info.alat}">
  8. <bm-label :content="'离店'+info.pointSum+'米'" :labelStyle="{color: 'blue', fontSize : '12px'}" :offset="{width: -20, height:26}"/>
  9. </bm-marker>
  10. </baidu-map>
  11. </div>
  12. </template>
  13. <script>
  14. import {BaiduMap,BmLabel, BmMarker} from 'vue-baidu-map'
  15. export default {
  16. name: "mapMarker",
  17. components: {
  18. BaiduMap,
  19. BmMarker,
  20. BmLabel
  21. },
  22. data(){
  23. return{}
  24. },
  25. props: {
  26. info:{
  27. type: Object,
  28. default:()=>{
  29. return {lng: null, lat: null}
  30. }
  31. }
  32. }
  33. }
  34. </script>
  35. <style scoped>
  36. .map{
  37. width: 100%;
  38. height: 400px;
  39. }
  40. </style>