谷歌地图V3：防止标记缩放 [英] Google maps V3: prevent marker scaling

问题描述

我有一个谷歌地图和一个标记。

我需要标记为固定大小，例如10x10像素，然后重新发送即使我放大或缩小，也是如此。

这就是我现在所拥有的（而不是workig）：

  var marker = new google.maps.Marker（{
 position：circleCenter，
 map：googleMap，
图标：{
路径：google.maps.SymbolPath.CIRCLE，
 fillOpacity：0.5，
 fillColor：'ff0000'，
 strokeWeight：10，
 size：5 
} 
}）; 
  

当地图缩放变化时，是否可以阻止缩放尺寸的标记？

解决方案

Google没有开箱即用的方法来停止标记缩放。

您可以使用地面叠加层设置固定区域在地图上，然后附上图像。带地面叠加层的技巧是你必须知道边界对象的坐标，你可能不得不想出一些计算边界的方法。在这个例子中，我只是将一个中心点展开成一个矩形。

由于此方法不使用标记对象（例如拖动，动画等），但是叠加层确实有点击事件，所以您也会放弃其他标记功能。

以下是一个概念证明： http：//相关代码：

  function initialize（）{
 var map; 
 var centerPosition = new google.maps.LatLng（38.713107，-90.42984）; 
 var options = {
 zoom：9，
 center：centerPosition，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（$（'＃map'）[0]，options）; 
 
 var icon ='https://www.google.com/mapfiles/marker_black.png'; 
 var iconBounds = constructBounds（38.713107，-90.42984）; 
 var staticOverlay = new google.maps.GroundOverlay（icon，iconBounds）; 
 staticOverlay.setMap（map）; 
} 
 
函数constructBounds（lat，lng）{
 var sw = new google.maps.LatLng（lat  -  .03，lng  -  .025）
 var ne = new google.maps.LatLng（lat + .03，lng + .025）
 return new google.maps.LatLngBounds（sw，ne）; 
} 
  

I have a google map, and an marker on it.

I need the marker to be a fixed size of, for example, 10x10 pixels, and remail the same even if i zoom in or zoom out.

This is what i have right now (and is not workig):

var marker = new google.maps.Marker({
    position: circleCenter,
    map: googleMap,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: 0.5,
        fillColor: 'ff0000',
        strokeWeight: 10,
        size: 5
    }
});

Is this possible to block the marker of scaling it's size when the map zoom is changed?

解决方案

Google does not have a out-of-box way to stop markers from scaling.

You could use a Ground Overlay to set a fixed area on the map and then attach an image. The trick with ground overlays is you have to know the coordinates of the bounds object and you probably will have to come up with some way of calculating the bounds. In this example I just expand a center point into a rectangle.

You would also loose other marker capabilities since this method doesn't use a marker object (e.g. dragging, animations, etc.), but the overlays do have click events.

Here is a proof of concept: http://jsfiddle.net/bryan_weaver/4rxqQ/

relevant code:

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 9,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    var icon = 'https://www.google.com/mapfiles/marker_black.png';
    var iconBounds = constructBounds(38.713107, -90.42984);
    var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds);
    staticOverlay.setMap(map);
}

function constructBounds(lat, lng){
    var sw = new google.maps.LatLng(lat - .03, lng - .025)
    var ne = new google.maps.LatLng(lat + .03, lng + .025) 
    return new google.maps.LatLngBounds(sw, ne);
}

这篇关于谷歌地图V3：防止标记缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！