Hledte google maps s Vue, nemusim mit zadny npm, nic proste:
https://github.com/GuillaumeLeclerc/vue-google-maps/blob/master/dist/vue-google-maps.js<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="vue-google-maps.js"></script>
</head>
<body>
<google-map style="width: 80%; height: 100%; position: absolute; left:0; top:0"
:center="center"
:zoom="zoom"
@g-rightclick="onMapRightClick"
>
<google-map-marker v-for="marker in markers" :position="marker.position" @g-click="onMarkerClick(marker)"/>
</google-map>
<script>
VueGoogleMap.load({
'key': 'AIzaSyCca3BtctZGXkMlZSk8hNXXw_j_EMYLDBI',
})
Vue.component('google-map', VueGoogleMap.Map);
Vue.component('google-map-marker', VueGoogleMap.Marker);
new Vue({
el: 'body',
data: {
center: {
lat: 1.38,
lng: 103.8
},
zoom: 12,
markers: [
{position: {lat: 1.38, lng: 103.8}},
{position: {lat: 1.37, lng: 103.8}},
{position: {lat: 1.36, lng: 103.8}},
]
},
methods: {
createMarker: function (lat, lng) {
return {position: {lat, lng}}
},
onMapRightClick: function (input) {
let newMarker = this.createMarker(input.latLng.lat(), input.latLng.lng());
this.markers.push(newMarker);
},
onMarkerClick: function (input) {
this.markers.splice(this.markers.indexOf(input), 1)
}
}
});
</script>
</body>
16 Odpovědí
21198 Zhlédnutí