Применение облачного стиля карты с помощью vue2-google-maps?

#vue.js #google-maps-api-3 #vue2-google-maps

Вопрос:

Как упоминалось в этих документах, теперь мы можем применить облачный стиль к карте, установив mapId свойство карты.

Я попробовал свою удачу с этим:

 <GmapMap ref="mapView" :center="driver.location" :zoom="15" :options="{ mapId: '84f11e866388cfc5' }">
</GmapMap>

Но это не сработало. Я также попытался добавить карту программно с помощью этого:

 new this.google.maps.Map(document.getElementById('container'), {
     mapId: '84f11e866388cfc5',
     center: {lat:61.180059, lng: -149.822075},
     zoom:12
});

Он добавляет карту, но не применяет пользовательский стиль, разработанный в облаке. Согласно документам, для этого требуется также MAP_ID установить URL-адрес API следующим образом:

 <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYamp;map_ids=MAP_IDamp;callback=initMap">
</script>

Но как это сделать? Есть ли способ настроить этот плагин для установки MAP_ID при импорте API? Если нет, есть ли какой-либо другой плагин Vue, который выполняет эту работу?

Любая помощь будет оценена.

1. я еще не играл с этой новой функцией, но этот проект стал довольно устаревшим, есть новый проект, который набирает обороты, разветвляясь от него. npmjs.com/package/gmap-vue я переключился, и у меня не было никаких проблем, я бы сказал, что на это стоит обратить внимание

Ответ №1:

Просмотрев исходный код, я обнаружил, что вы можете добавить что угодно в URL-адрес при инициализации модуля Gmap

 Vue.use(GmapVue, {
  load: {
    key: <your code>,
    libraries: "places",
    map_id: <your map-id>
  },
  installComponents: true
});

Это успешно добавляет map_id к URL-адресу, однако у меня это все еще не работает, даже при использовании правильного URL.

Может быть, я сделал что-то совершенно не так, и этот «ответ» действительно работает для вас.

1. Я попробовал что-то еще, чтобы добавить map_id к URL, но этого недостаточно. Для работы вам необходимо инициализировать карту с помощью этого map_id . Вы можете импортировать google объект (см. Документы), а затем использовать для него что-то вроде этого, применяя стили: : ` new this.google.maps.Map(document.getElementById(‘container’), {mapID: ‘YOUR_MAP_ID’, center: {lat: LAT, lng: LNG}, масштабирование: 12 });`

Ответ №2:

 options : {
  mapId: "Your Map ID"
};

добавьте опцию карты, поместите ее в свой тег GmapMap

  <GmapMap :options="options">
    </GmapMap>

Ваш main.js

 Vue.use(VueGoogleMaps, {
  load: {
    key: "Your map api key",
    map_ids: "Your map ID"
  }
});