123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <template>
- <view>
- <div>
- <gmap-map :center="centers" :zoom="11" map-type-id="terrain" style="width: 100%; height: 340px">
- <gmap-marker @dragend="updateMaker" :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true"
- :draggable="true" @click="centers=m.position"></gmap-marker>
- </gmap-map>
- </div>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- centers: {
- lat: '',
- lng: ''
- },
- markers: [{
- position: {
- lat: '',
- lng: ''
- }
- }],
- place: null,
- description: 'Autocomplete Example (#164)',
- longitude: '',
- latitude: '',
- id: 0, // 使用 marker点击事件 需要填写id
- title: 'map',
- covers: []
- }
- },
- onLoad: function(option) {
- const item = JSON.parse(decodeURIComponent(option.item));
- this.longitude = item.longitude;
- this.latitude = item.latitude;
- var cover = [];
- var cov = {};
- cov["latitude"] = item.latitude;
- cov["longitude"] = item.longitude;
- cov["iconPath"] = '../../static/img/map.png';
- cover.push(cov);
- cover.push(cov);
- this.markers[0].position = {
- lat: item.latitude,
- lng: item.longitude
- };
- this.centers={
- lat: item.latitude,
- lng: item.longitude
- };
- },
- methods: {
- setPlace(place) {
- this.place = place
- },
- setDescription(description) {
- this.description = description;
- },
- usePlace(place) {
- if (this.place) {
- var newPostion = {
- lat: this.place.geometry.location.lat(),
- lng: this.place.geometry.location.lng(),
- };
- this.center = newPostion;
- this.markers[0].position = newPostion;
- this.place = null;
- }
- },
- updateMaker: function(event) {
- console.log('updateMaker, ', event.latLng.lat());
- this.markers[0].position = {
- lat: event.latLng.lat(),
- lng: event.latLng.lng(),
- }
- },
- }
- }
- </script>
- <style>
- </style>
|