在Vue2
中,我试图将谷歌Map的默认标记更改为自定义图像。创建了显示在Map上的自定义标记,但是,当我在它们之间绘制折线时,默认红色标记位于自定义标记上方。我无法隐藏或替换默认标记。
我使用的是vue2-google-maps
包。
这是Map的屏幕截图
这是模板
<template>
<div>
<GmapMap
:center="center"
:zoom="zoom"
map-type-id="roadmap"
style="width: 100%; height: 300px"
ref="map"
>
<GmapMarker
v-for="(m, index) in markers"
:key="index"
:ref="`marker${index}`"
:position="m.position"
:clickable="true"
:icon="m.icon"
/>
<DirectionsRenderer
v-if='start!=null'
travelMode="DRIVING"
:origin="origin"
:destination="destionation"/>
</GmapMap>
</div>
</template>
这是脚本部分
<script>
import DirectionsRenderer from './DirectionsRenderer.js'
export default{
components: {DirectionsRenderer},
data:()=>({
markers:[],
center:{lat:49.2831066, lng:-123.1031387},
zoom:10,
start:null,
end:null,
}),
computed: {
origin() {
if (!this.start) return null;
return { query: this.start };
},
destionation() {
if (!this.end) return null;
return { query: this.end };
}
},
methods:{
drawRoute(){
this.start = this.order.from.formatted_address;
this.end = this.order.to.formatted_address;
},
setBounds(){
const bounds = new google.maps.LatLngBounds()
for (let m of this.markers) {
bounds.extend(m.position)
}
this.$refs.map.fitBounds(bounds)
},
init(){
this.markers=[
{
position: {lat:49.2831066 ,lng:-123.1031387},
icon:
{
url: '/images/icons/pickup.png',
size: {width: 60, height: 60, f: 'px', b: 'px',},
scaledSize: {width: 20, height: 20, f: 'px', b: 'px',},
}
},
{
position: {lat:49.2544622,lng:-123.1053708},
icon:{
url: '/images/icons/destination.png',
size: {width: 60, height: 60, f: 'px', b: 'px',},
scaledSize: {width: 20, height: 20, f: 'px', b: 'px',},
}
}
];
}
this.setBounds();
},
created(){
this.init();
}
}
</script>
这是DirectionsRenderer.js
脚本
import { MapElementFactory } from "vue2-google-maps";
export default MapElementFactory({
name: "directionsRenderer",
ctr() {
return google.maps.DirectionsRenderer;
},
events: [],
mappedProps: {},
props: {
origin: { type: Object },
destination: { type: Object },
travelMode: { type: String }
},
afterCreate(directionsRenderer) {
let directionsService = new google.maps.DirectionsService();
this.$watch(
() => [this.origin, this.destination, this.travelMode],
() => {
let { origin, destination, travelMode } = this;
if (!origin || !destination || !travelMode) return;
directionsService.route(
{
origin,
destination,
travelMode
},
(response, status) => {
if (status !== "OK") return;
directionsRenderer.setDirections(response);
}
);
}
);
}
});
directionsRenderer.setDirections(response);
in bellow snipet绘制一条线,线的起点和终点使用默认标记。
directionsService.route(
{
origin,
destination,
travelMode
},
(response, status) => {
if (status !== "OK") return;
directionsRenderer.setDirections(response);
}
);
你知道我怎样才能解决这个问题吗?
2条答案
按热度按时间svmlkihl1#
我解决了它,如果有人有同样的问题,我在这里分享我的解决方案.
在下面的代码中
在
directionService.route()
回调而不是directionRenderer.setDirections(response)
上,通过overview_path
循环,并将所有坐标推入path
。h7wcgrx32#
您需要像这样加载图像
例如
设置正确的图像路径