谷歌地图

Posted 2020-11-09 momo-倩倩

谷歌地图的api: https://developers.google.com/maps/documentation/javascript/

init () {
  let _this = this
  _this.center.LATITUDE  = parseFloat(_this.center.LATITUDE)
  _this.center.LONGITUDE  = parseFloat(_this.center.LONGITUDE)
 this.map = new google.maps.Map(document.getElementById(this.mapId), {
   zoom: this.zoom,
   center: new google.maps.LatLng(_this.center.LATITUDE,_this.center.LONGITUDE),
   disableDefaultUI:true,
   zoomControl:true,
   mapTypeControl:true,
   streetViewControl:false,
 });
}

initMark () {
  let _this = this
  let infowindow = new google.maps.InfoWindow();
  this.position.forEach(item => {
    item.LATITUDE = parseFloat(item.LATITUDE)
    item.LONGITUDE = parseFloat(item.LONGITUDE)
    let latLng = new google.maps.LatLng(item.LATITUDE,item.LONGITUDE);
    let marker = new google.maps.Marker({
      position: latLng,
      map: _this.map,
      title: item.NAME  + ‘:‘ + parseFloat(item.LATITUDE) + ‘,‘ + parseFloat(item.LONGITUDE)
    });
    google.maps.event.addListener(this.map,‘click‘, (e) => {
 　　　　// 这个是暂时解决点击非标记地点，不显示信息弹窗
      setTimeout(() => {
        let info = document.getElementsByClassName(‘gm-style-iw‘)[0].parentNode.style.display = ‘none‘
      }, 10)
      infowindow.close();
      return false
    });
    marker.addListener(‘click‘, (e) => {
      _this.map.setZoom(14);
      _this.map.setCenter(marker.getPosition());
    });

  })
}
// 关于聚类的

initCountryHandler () {
  let labels = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ‘;
  let markers = this.position.map(function(location, i) {
    let latLng = new google.maps.LatLng(location.LATITUDE,location.LONGITUDE);
    return new google.maps.Marker({
      position: latLng,
      label: labels[i % labels.length],
      title: location.NAME
    });
  });
  let markerCluster = new MarkerClusterer(this.map, markers,
    {imagePath: ‘http://www.wedive.com:9999/external/img/m‘}
    );
}