javascript - Google Maps Api, Custom marker anchor points - Stack Overflow

admin管理员组

文章数量:1403203

I have created a custom marker for use in my google map. The anchor point of the icon should be in the bottom left hand corner. On my map, the anchor points appear to be on the bottom edge in the center of the icon. The icon is 32 x 49. The code I have included places all of my markers. I have searched for hours and cannot find any answers. The V3 api says the property is anchor. When I use that property no markers show on the map.

var iconImage = "images/Italian Flag Mine New.png";

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(45.067314, 7.697774),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var iconImage = {
    url: "images/Italian Flag Mine New.png",
    anchorPosition: (0, 49)
};

//var iconImage = {url: "images/Italian Flag Mine New.png",
//               anchor :  (0,49)};

var marker, i, savedMarker;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
        map: map,
        animation: google.maps.Animation.DROP,
        icon: iconImage
    });
}

I have created a custom marker for use in my google map. The anchor point of the icon should be in the bottom left hand corner. On my map, the anchor points appear to be on the bottom edge in the center of the icon. The icon is 32 x 49. The code I have included places all of my markers. I have searched for hours and cannot find any answers. The V3 api says the property is anchor. When I use that property no markers show on the map.

var iconImage = "images/Italian Flag Mine New.png";

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(45.067314, 7.697774),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var iconImage = {
    url: "images/Italian Flag Mine New.png",
    anchorPosition: (0, 49)
};

//var iconImage = {url: "images/Italian Flag Mine New.png",
//               anchor :  (0,49)};

var marker, i, savedMarker;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
        map: map,
        animation: google.maps.Animation.DROP,
        icon: iconImage
    });
}

• javascript
• google-maps
• google-maps-api-3
• icons
• google-maps-markers

Share Improve this question Follow edited Aug 29, 2019 at 5:38 ekad 14.6k2626 gold badges4646 silver badges4848 bronze badges asked Feb 2, 2014 at 0:40 user3242810user3242810 11111 gold badge11 silver badge44 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 16

The anchor property is part of the marker constructor, but you still must create an instance of the object according to Google's documentation (under "Complex Icons" heading). Give this a try:

var iconImage = {
  url: "images/Italian Flag Mine New.png",
  anchor: new google.maps.Point(0,49)
};

You should also consider specifying the size property.

Since API 3.5x, using AdvancedMakerElement (or PinElement) anchor property is no more available and anchor is by default at the bottom center of the image marker. Adding a marker content 'style' allows setting anchor on the center of the marker.

// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary(
    "marker");
// Create map
const map = new Map(document.getElementById("map"), {
    center: { lat: 37.42475, lng: -122.0845 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
});
// Customize marker content
const mapPin = document.createElement("img");
mapPin.src = "mymarker.png";
mapPin.style.transform = "translateY(50%)";
// Create marker
const marker = new AdvancedMarkerElement({
  position: { lat: 37.42475, lng: -122.0845 },
  map: map,
  content: mapPin,
  title: "my marker"
  });

Caution: I don't know if this will impact the collision behavior.

You need to specify the coordinates of the anchor clickable, it depend on the Zoom your about to be so:

https://developers.google.com/maps/documentation/javascript/markers

// Shapes define the clickable region of the icon.
  // The type defines an HTML <area> element 'poly' which
  // traces out a polygon as a series of X,Y points. The final
  // coordinate closes the poly by connecting to the first
  // coordinate.
    var shape = {
        coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 15, 49, 16, 49, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
        type: 'poly'
    };
    var iconImage=  new google.maps.MarkerImage(
                             // URL
                             "images/Italian Flag Mine New.png",//желательно название картинки поменять, чтобы было без пробелов
                             // (width,height)
                             new google.maps.Size(32, 49),
                             // The origin point (x,y)
                             new google.maps.Point(0, 0),
                             // The anchor point (x,y)
                             new google.maps.Point(9, 49)
                            );
 marker = new google.maps.Marker({
      position : new google.maps.LatLng(locations[i][latIndex], locations[i][lngIndex]),
      map      : map,
      animation: google.maps.Animation.DROP,
      icon     : iconImage,
      shape: shape
     });

本文标签： javascriptGoogle Maps ApiCustom marker anchor pointsStack Overflow