使用谷歌地图在离子中添加带有商店徽标的自定义标记

Question

我正在使用离子，我想显示带有商店标志的地图标记。我构建了一个默认标记，我有很多商店图片或徽标需要放在上图中的标记显示中。我使用了cordova地理定位插件来获取用户的当前位置。

Response array like this :

var markers = [{
    storeName: "Dib Dab Extract",
    profilePic: "img/dibdab.png",
    address: "420 Mary Jane Way",
    rating: "4",
    reviews: "4379",
    offer: "100 Free Coins with 1st Purchse",
    lat: "53.896408",
    long: "-105.991427"
  }]

Custom Marker Icon :
var image = {
    url: 'img/ic_map_pin_gray.png', // image is 512 x 512
    scaledSize: new google.maps.Size(80, 80),
  };

Marker set on map like this :
var markerPos = new google.maps.LatLng(record.lat, record.long);
    // Add the markerto the map
    var marker = new google.maps.Marker({
      map: map,
      animation: google.maps.Animation.DROP,
      position: markerPos,
      icon: image,
    });

Answer 1

这对我有用。

                marker = new MarkerWithLabel({
                    position: new google.maps.LatLng(item.latitude, item.longitude),
                    animation: google.maps.Animation.DROP,
                    labelContent: "My Job Location",
                    labelAnchor: new google.maps.Point(10, 38),
                    labelClass: "markLabelsJob", // the CSS class for the label
                    labelInBackground: false,
                    icon: 'img/active-job-pin.png',
                    map: map
                });

Answer 2

使用自定义标记解决问题。我已经完成了这样的代码，我在上面的问题中得到了我想要的精确标记。所以我发布了这个答案，帮助任何想要这样的自定义标记的人。我推荐https://humaan.com/blog/custom-html-markers-google-maps/

// Map Initilize function 
function initMap() {
  var options = {
    timeout: 10000,
    enableHighAccuracy: true
  };
  $cordovaGeolocation.getCurrentPosition(options).then(function(position) {
    var latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    var mapOptions = {
      center: latLng,
      zoom: 15,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    //Wait until the map is loaded
    //Load the markers
    loadMarkers();
    //});
  }, function(error) {
    console.log(error);
    console.log("Could not get location");
    //Load the markers
    loadMarkers();
  });
}

//load marker using rest api
function loadMarkers() {
  CommonService.ShowLoader();
  YOUR REST API SERVICE.then(function(res) {
    angular.forEach(res, function(value, key) {
      var record = value;
      console.log(record);
      var image = {
        url: 'img/ic_map_pin_gray.png', // custom background image (marker pin)
        scaledSize: new google.maps.Size(70, 70),
      };
      var markerPos = new google.maps.LatLng(record.lat, record.long);
      //Add the markerto the map
      var marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: markerPos,
        icon: image,
      });
      var img_src = record.profilePic;
      var overlay = new CustomMarker(
        markerPos,
        map, {image: img_src}
      );
    });
  }).catch(function(error, status, headers, config) {
    console.log(error);
  });
}


//CustomMarker function 
function CustomMarker(latlng, map, args) {
  this.latlng = latlng;
  this.args = args;
  this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    div = this.div = document.createElement('img');
    div.src = self.args.image;
    div.className = 'marker';
    div.style.position = 'absolute';
    div.style.cursor = 'pointer';
    div.style.width = '35px';
    div.style.height = '35px';
    div.style.borderRadius  = '50%';

    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 - 18) + 'px'; // set custom (i set it as i want to set in map )
    div.style.top = (point.y - 56) + 'px'; //set custom (i set it as i want to set in map )
  }
};