| 123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <template>
- <div>
- <baidu-map class="map" :center="{lng: info.lon, lat:info.lat}" :zoom="12" :scroll-wheel-zoom="true" ak="n4CW0ajDw1LBUIj1RTlwd1bbTTXuN8v6">
- <bm-marker :position="{lng: info.lon, lat:info.lat}">
- <bm-label content="门店位置" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -20, height:26}"/>
- </bm-marker>
- <bm-marker :position="{lng: info.alon, lat:info.alat}">
- <bm-label :content="'离店'+info.pointSum+'米'" :labelStyle="{color: 'blue', fontSize : '12px'}" :offset="{width: -20, height:26}"/>
- </bm-marker>
- </baidu-map>
- </div>
- </template>
- <script>
- import {BaiduMap,BmLabel, BmMarker} from 'vue-baidu-map'
- export default {
- name: "mapMarker",
- components: {
- BaiduMap,
- BmMarker,
- BmLabel
- },
- data(){
- return{}
- },
- props: {
- info:{
- type: Object,
- default:()=>{
- return {lng: null, lat: null}
- }
- }
- }
- }
- </script>
- <style scoped>
- .map{
- width: 100%;
- height: 400px;
- }
- </style>
|