谷歌map API使用遇到的坑

自定义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>