| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <template>
- <view>
- <view class="mapbox">
- <map
- class="map"
- :markers="covers"
- :latitude="latitude"
- :longitude="longitude"
- ></map>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- latitude: '',
- longitude: '',
- covers: [],
- };
- },
- onLoad(option) {
- console.log(option);
- // var
- var res = option.lnglat.split(',');
- var obj = {};
- obj.latitude = Number(res[1]);
- this.latitude = Number(res[1]);
- obj.longitude = Number(res[0]);
- this.longitude = Number(res[0]);
- obj.title = option.basename;
- obj.id = 1;
- obj.callout = {
- //自定义标记点上方的气泡窗口 点击有效
- content: option.basename, //文本
- color: '#ffffff', //文字颜色
- fontSize: 14, //文本大小
- borderRadius: 2, //边框圆角
- bgColor: '#00c16f', //背景颜色
- display: 'ALWAYS', //常显
- };
- obj.iconPath =
- '../../static/images/distribution/f2df86753bf7c9e311a59f632f5c545.png';
- this.covers.push(obj);
- console.log(this.covers);
- },
- methods: {},
- };
- </script>
- <style lang="scss">
- .mapbox {
- width: 100%;
- height: 100vh;
- .map {
- width: 100%;
- height: 100%;
- ::v-deep .csssprite {
- display: none;
- }
- }
- }
- </style>
|