我正在尝试将Googlemaps.js转换为vue组件，我目前有一种用于CustomMarker()的方法，然后在mounted()部分中，您会看到overlay = new CustomMarker(...)的下方。
似乎这无法访问CustomMarker函数，并引发以下错误：
app.js:5387 Uncaught ReferenceError: CustomMarker is not defined
at initialize
如何使该函数也正确初始化？
GoogleMap.vue
<template>
<div class="google-map" id="map"></div>
</template>
<script>
export default {
name: 'google-map',
methods:{
// Custom Overlay Marker
CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
},
},
mounted() {
this.CustomMarker.prototype = new google.maps.OverlayView();
this.CustomMarker.prototype.draw = function () {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
div.className = 'marker';
div.style.position = 'absolute';
div.style.cursor = 'pointer';
div.style.width = '37px';
div.style.height = '42px';
// div.style.background = 'blue';
if (typeof (self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function (event) {
google.maps.event.trigger(self, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = (point.x) + 'px';
div.style.top = (point.y - 38) + 'px';
}
};
this.CustomMarker.prototype.remove = function () {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
};
this.CustomMarker.prototype.getPosition = function () {
return this.latlng;
};
//Instalize Map
let map;
function initialize() {
const mapCanvas = document.getElementById('map');
const myLatlng = new google.maps.LatLng(-62, 23);
const mapOptions = {
zoom: 14,
backgroundColor: '#983336',
disableDefaultUI: true,
center: myLatlng,
draggable: false,
scrollwheel: false,
disableDoubleClickZoom: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
// Custom Marker
overlay = new CustomMarker(
myLatlng,
map,
{
marker_id: 'red-marker'
}
);
// Style the map
map.set('styles', [
{
"featureType": "landscape",
"stylers": [
{ "visibility": "simplified" },
{ "color": "#CD2D2B" }
]
}
]);
}
google.maps.event.addDomListener(window, 'load', initialize);
//Keep Centered on resize
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
//map.setDraggable(false);
});
}
}
</script>
<style scoped>
</style>
更新27.02.19
地图现在已加载，但是CustomMarker似乎无法this.CustomMarker.prototype部分存在问题，因为它根本不会触发。
我还收到以下错误TypeError: this.map.setCenter is not a function
<script>
export default {
name: 'google-map',
data() {
return {
map: null,
overlay: null,
center: { lat: -62, lng: 23 },
mapStyle: [
{
"featureType": "landscape",
"stylers": [
{ "visibility": "simplified" },
{ "color": "#CD2D2B" }
]
}
],
}
},
methods:{
initializeMap() {
const mapCanvas = document.getElementById('map');
const myLatlng = new google.maps.LatLng(this.center);
const mapOptions = {
zoom: 14,
backgroundColor: '#983336',
disableDefaultUI: true,
center: myLatlng,
draggable: false,
scrollwheel: false,
disableDoubleClickZoom: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(mapCanvas, mapOptions);
// Custom Marker
this.overlay = new this.CustomMarker(
myLatlng,
this.map,
{ marker_id: 'red-marker' }
);
// Style the map
this.map.set('styles', this.mapStyle);
},
// Custom Overlay Marker
CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.map = map;
}
},
async mounted() {
//Instalize Map
this.initializeMap()
//NOTHING BELOW FOR CustomMarker SEEMS TO FIRE
this.CustomMarker.prototype = new google.maps.OverlayView();
this.CustomMarker.prototype.draw = function () {
console.log('test') //DOES NOTHING
const self = this;
const div = this.div;
console.log('div', div)
if (!div) {
div = this.div = document.createElement('div');
div.className = 'marker';
div.style.position = 'absolute';
div.style.zIndex = '9999';
div.style.cursor = 'pointer';
div.style.width = '37px';
div.style.height = '42px';
div.style.background = 'blue';
if (typeof (self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function (event) {
google.maps.event.trigger(self, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = (point.x) + 'px';
div.style.top = (point.y - 38) + 'px';
}
};
this.CustomMarker.prototype.remove = function () {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
};
this.CustomMarker.prototype.getPosition = function () {
return this.latlng;
};
google.maps.event.addDomListener(window, 'load', this.initializeMap);
//Keep Centered on resize
google.maps.event.addDomListener(window, "resize", function () {
// console.log(this.map)
// var center = this.map.getCenter();
google.maps.event.trigger(this.map, "resize");
map.setCenter(this.center);
//map.setDraggable(false);
});
}
}
</script>
答案 0 :(得分：0)
您是在某处全局定义import吗？如果不是，则需要在Vue文件中将其require()或overlay = new CustomMarker(
进行
看起来像这样：
overlay = new this.CustomMarker(
应该是
function initialize() {
和
const initialize = () => {
应该是
java.lang.IllegalStateException: Expecting .,<, or ;, but found firebaseperf while unpacking <K:Ljava/lang/Object;>Lcom/google/android/gms/internal/firebase-perf/zzw<TK;>;
at org.aspectj.util.GenericSignatureParser.parseClassTypeSignature(GenericSignatureParser.java:204)
at org.aspectj.util.GenericSignatureParser.parseAsClassSignature(GenericSignatureParser.java:56)
at org.aspectj.weaver.UnresolvedType.forGenericTypeSignature(UnresolvedType.java:274)
at org.aspectj.weaver.bcel.BcelWorld.addSourceObjectType(BcelWorld.java:482)
at org.aspectj.weaver.bcel.BcelWorld.addSourceObjectType(BcelWorld.java:456)
at org.aspectj.weaver.bcel.BcelWeaver.addAspectsFromJarFile(BcelWeaver.java:263)
at org.aspectj.weaver.bcel.BcelWeaver.addLibraryJarFile(BcelWeaver.java:236)
at org.aspectj.ajdt.internal.core.builder.AjBuildManager.initBcelWorld(AjBuildManager.java:874)
at org.aspectj.ajdt.internal.core.builder.AjBuildManager.performBuild(AjBuildManager.java:249)
at org.aspectj.ajdt.internal.core.builder.AjBuildManager.batchBuild(AjBuildManager.java:185)
at org.aspectj.ajdt.ajc.AjdtCommand.doCommand(AjdtCommand.java:112)
at org.aspectj.ajdt.ajc.AjdtCommand.runCommand(AjdtCommand.java:60)
at org.aspectj.tools.ajc.Main.run(Main.java:371)
at org.aspectj.tools.ajc.Main$run.call(Unknown Source)
at org.codehaus.groovy.runtime.callsite.CallSiteArray.defaultCall(CallSiteArray.java:48)
at org.codehaus.groovy.runtime.callsite.AbstractCallSite.call(AbstractCallSite.java:113)
at org.codehaus.groovy.runtime.callsite.AbstractCallSite.call(AbstractCallSite.java:133)
at com.canelmas.let.LetPlugin$_apply_closure2_closure3.doCall(LetPlugin.groovy:66)
...
否则，请显示代码中哪一行失败。