自定义图片图标不定位
Custom image icon not positioning
我知道这听起来很重复,但是当我在这里搜索时,它对我没有帮助。我的问题是我有自定义图标或图像,尺寸为 256 x 256,scaledSize 为 50,现在的问题是它没有正确定位到 latlng。还有一个问题是,当我缩放地图时,标记会移动或者会消失到它的位置……不像这个例子,它工作正常
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
});
这是我的标记
您的图标是 50px x 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
};
代码片段:
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>
我知道这听起来很重复,但是当我在这里搜索时,它对我没有帮助。我的问题是我有自定义图标或图像,尺寸为 256 x 256,scaledSize 为 50,现在的问题是它没有正确定位到 latlng。还有一个问题是,当我缩放地图时,标记会移动或者会消失到它的位置……不像这个例子,它工作正常 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
});
这是我的标记
您的图标是 50px x 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
};
代码片段:
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>