自定义marker改变图标大小问题
项目中要用谷歌地图做运动轨迹分享页面，轨迹起点和终点要使用自定义marker，查看官方文档，官网中对于普通图标是这么说的： 在最基本的情况下，图标可以简单地表示一个要代替默认的 Google 地图图钉图标的图像。要指定这样的图标，请将标记的 icon 属性设置为某个图像的 URL。Google Maps JavaScript API 将自动调整图标大小。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151}
});
var image = '../../../static/start.png';
var beachMarker = new google.maps.Marker({
position: {lat: 39.908520, lng: 116.397492},
map: map,
icon: image
});
}
- 结果显示成这样,图标完全按原来比例显示，没有文档所说的 Google Maps JavaScript API 将自动调整图标大小。
- 然后接着往下看文档，又发现了这个：
来源谷歌文档截图
对其增加size属性：
var image = {
url: '../../../static/start.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
- 结果发现文档写的这个其实和css精灵差不多，size并不会改变原图的大小，如下：
image.png
- 最后百度谷歌查了好久，终于查到了谷歌文档中没有提到的一个api
scaledSize：
scaledSize: new google.maps.Size(25, 40),
终于，自定义marker图标的大小可以改变了。。。。
最后这是项目最后的完成代码（基于vue）
<script>
const google = window.google
export default {
data () {
return {
map: null,
marker: null,
zoom: 15,
flightPath: null,
center: {lat: 39.908520, lng: 116.397492},
image: [
{
url: '../../../static/start.png', // 起点marker
scaledSize: new google.maps.Size(25, 40), // 设置marker大小
anchor: new google.maps.Point(13, 35)
},
{
url: '../../../static/end.png', // 终点marker
scaledSize: new google.maps.Size(25, 40), // 设置marker大小
anchor: new google.maps.Point(13, 35)
}
],
bikepath: [
{lat: 22.523010, lng: 113.939786},
{lat: 22.524199, lng: 113.936405},
{lat: 22.525014, lng: 113.936402},
{lat: 22.525069, lng: 113.935160},
{lat: 22.525574, lng: 113.930773},
{lat: 22.526533, lng: 113.929268},
{lat: 22.535076, lng: 113.930507},
{lat: 22.527743, lng: 113.924629},
{lat: 22.511143, lng: 113.937004}
],
position: []
}
},
mounted () {
this.initMap()
},
methods: {
initMap: function () {
this.addposition()
this.setCenter()
this.map = new google.maps.Map(document.getElementById('map'), {
zoom: this.zoom,
center: this.center,
disableDefaultUI: true
})
for (var i = 0; i < this.position.length; i++) {
this.marker = new google.maps.Marker({
position: this.position[i],
label: '',
map: this.map,
icon: this.image[i]
})
}
this.flightPath = new google.maps.Polyline({
map: this.map,
path: this.bikepath,
geodesic: true,
strokeColor: '#35A5FE',
strokeOpacity: 1,
strokeWeight: 3
})
},
addposition: function () {
let len = this.bikepath.length
this.position.push(this.bikepath[0], this.bikepath[len - 1])
},
// 设置中心点
setCenter: function () {
let maxlat = 0
let minlat = this.bikepath[0].lat
let maxlng = 0
let minlng = this.bikepath[0].lng
this.bikepath.map((n, i) => {
n.lat > maxlat ? maxlat = n.lat : null
n.lat < minlat ? minlat = n.lat : null
n.lng > maxlng ? maxlng = n.lng : null
n.lng < minlng ? minlng = n.lng : null
})
let latValue = (maxlat - minlat) / 2
let lngValue = (maxlng - minlng) / 2
this.center.lat = minlat + latValue
this.center.lng = minlng + lngValue
this.changeZoom(latValue, lngValue)
},
// 设置地图缩放
changeZoom: function (latValue, lngValue) {
let latzoom = Math.floor(latValue / 0.0059)
let lngzoom = Math.floor(lngValue / 0.0069)
// console.log(latValue)
latValue < lngValue ? this.zoom = 15 - lngzoom : this.zoom = 15 - latzoom
this.zoom < 12 ? this.zoom = 12 : null // 最低缩放到12
}
}
}
</script>
