代码之家 › 专栏 › 技术社区 › jemz

自定义图像图标未定位

google-maps-markers google-maps-api-3 google-maps

-1

jemz · 技术社区 · 8 年前

我知道这听起来很重复,但当我在这里搜索时,它对我没有帮助。我的问题是,我有自定义图标或图像,尺寸为256 x 256,缩放大小为50,现在的问题是它没有正确定位到板条。还有一个问题是,当我缩放地图时,标记会移动,或者会移到它的位置。。。与此示例不同,它工作正常 https://developers.google.com/maps/documentation/javascript/examples/icon-complex 。

这是我的密码

 var imageicon= {
                url:  '/image/' + filename, // url
                scaledSize: new google.maps.Size(50, 50), // scaled size
                origin: new google.maps.Point(0, 0), // origin
                anchor: new google.maps.Point(0, 50) // anchor
            };


 custommarker= new google.maps.Marker({
                flat: true,
                icon: imageicon,
                map: map,
                optimized: false,
                position: coordinate,
                visible: true
            });

这是我的记号笔

1 回复 | 直到 8 年前

1

2

geocodezip 4 年前

你的图标是50px乘以50px。您当前已将锚定设置为(0,50)(图标的左下角)。您希望将锚点设置为底部中心(25,50)的“点”

var imageicon = {
  url: 'https://i.stack.imgur.com/kEvED.png', // url
  scaledSize: new google.maps.Size(50, 50), // scaled size
  origin: new google.maps.Point(0, 0), // origin
  anchor: new google.maps.Point(25, 50) // anchor
};

proof of concept fiddle

代码片段:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: { // New York, NY
      lat: 40.7127753,
      lng: -74.0059728
    },
    zoom: 7
  });
  var imageicon = {
    url: 'https://i.stack.imgur.com/kEvED.png', // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0, 0), // origin
    anchor: new google.maps.Point(25, 50) // anchor
  };

  var custommarker = new google.maps.Marker({
    flat: true,
    icon: imageicon,
    map: map,
    optimized: false,
    position: map.getCenter(),
    visible: true
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>