谷歌地图数据驱动样式，使用vue3时未在地图上加载样式

Question

我正试图在我的vue3项目中实现这一点，但遇到了一个非常奇怪的问题。

同样的代码在vue2上运行良好，但在vue3上运行不好，并且没有显示错误，有人尝试过使用谷歌数据驱动地图样式并找到在vue3中使用它们的方法吗？

Vue 3地图(地图已加载，但不包含数据驱动的样式，控制台中没有提供错误(：https://jsfiddle.net/dgalic/2pebj6ct/4/

const { createApp } = Vue
createApp({
name: 'MapStyling',
data: function() {
return {
no_data: [null, "", undefined, "null"],
mapName: "route-manager-map",
bounds: {},
map: {},
markers: {},
polylines: {},
};
},
mounted() {
this.defineMap()
},
methods: {
defineMap() {
/* eslint-disable */
// this.bounds = new google.maps.LatLngBounds();
const element = document.getElementById(this.mapName);
const options = {
center: { lat: 30.266666, lng: -97.733330 },
zoom: 12,
mapId: "map_id",
};
this.map = new google.maps.Map(element, options);
const featureLayer = this.map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
)

featureLayer.style = function (placeFeature) {
let fillColor = "blue";
if (postal_codes.includes(placeFeature.feature.displayName)) {
return {
fillColor,
fillOpacity: 0.5,
}
} else {
return {
fillColor,
fillOpacity: 0
}
}
}
const postal_codes = [
'78701',
'78702',
'78703',
'78704',
'78705'
]
}
}
}).mount('#app')

.google-map {
width: 100%;
height: 600px;
margin: 0 auto;
background: #e5e3df;
}

<script src="https://unpkg.com/vue@3"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&v=beta"></script>
<div id="app">
<div
class="google-map"
:id="mapName"
></div>
</div>

Vue 2地图(工作良好，代码相同(：https://jsfiddle.net/dgalic/1wutoja2/8/

new Vue({
el: '#app',
name: 'MapStyling',
data: function() {
return {
no_data: [null, "", undefined, "null"],
mapName: "route-manager-map",
bounds: {},
map: {},
markers: {},
polylines: {},
};
},
mounted() {
this.defineMap()
},
methods: {
defineMap() {
/* eslint-disable */
// this.bounds = new google.maps.LatLngBounds();
const element = document.getElementById(this.mapName);
const options = {
center: {
lat: 30.266666,
lng: -97.733330
},
zoom: 12,
mapId: "map_id",
};
this.map = new google.maps.Map(element, options);
const featureLayer = this.map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
)

featureLayer.style = function(placeFeature) {
let fillColor = "blue";
if (postal_codes.includes(placeFeature.feature.displayName)) {
return {
fillColor,
fillOpacity: 0.5,
}
} else {
return {
fillColor,
fillOpacity: 0
}
}
}
//   featureLayer = JSON.parse(JSON.stringify(featureLayer))
console.log(featureLayer.h.get('mapId'))
const postal_codes = [
'78701',
'78702',
'78703',
'78704',
'78705'
]
}
}
}).mount('#app')

.google-map {
width: 100%;
height: 600px;
margin: 0 auto;
background: #e5e3df;
}

<script src="https://unpkg.com/vue@2"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&v=beta"></script>
<div id="app">
<div class="google-map" :id="mapName"></div>
</div>

如有任何帮助或反馈，我们将不胜感激。

Answer 1

我遇到了类似的问题，调用toRaw帮助了我。

import { toRaw } from 'vue';

this.map = new google.maps.Map(element, options);
let rawMap = toRaw(this.map);

const featureLayer = rawMap.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
)