标签: google-maps-api-3

谷歌地图Api相当新的.我有一系列数据,我想循环并绘制在地图上.看起来相当简单,但我发现的所有多标记教程都非常复杂.

让我们使用谷歌网站上的数据数据作为例子:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

我只是想绘制所有这些点,并在单击时弹出一个infoWindow以显示名称.

我正在使用Google Maps API(v3)在页面上绘制一些地图.我想做的一件事是在地图上滚动鼠标滚轮时禁用缩放,但我不确定如何.

我已禁用scaleControl(即删除了缩放UI元素),但这不会阻止滚轮缩放.

这是我的函数的一部分(它是一个简单的jQuery插件):

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

在Google Maps API v2中,如果我想删除所有地图标记,我可以简单地执行以下操作:

map.clearOverlays();

如何在Google Maps API v3中执行此操作？

看看Reference API,我不清楚.

我在地图上设置了多个标记,我可以静态设置缩放级别和中心,但我想要的是,覆盖所有标记并尽可能缩放所有市场可见

可用的方法如下

setZoom(zoom:number)

和

setCenter(latlng:LatLng)

既不setCenter支持多位置或位置数组输入,也不setZoom具备此类功能

如何计算Google地图V3中两个标记之间的距离？(类似于distanceFromV2中的功能.)

谢谢..

我最近切换到Google Maps API V3.我正在编写一个简单的例子来绘制数组中的标记,但是我不知道如何相对于标记自动居中和缩放.

我搜索了网络的高低,包括谷歌自己的文档,但没有找到一个明确的答案.我知道我可以简单地采用坐标的平均值,但是如何相应地设置缩放？

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),


    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  setMarkers(map, beaches);
}


var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.423036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 121.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.450198, 151.259302, 1]
];

function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('images/beachflag.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
    var shadow = new …

我已经看到很多类似的问题(这里,这里和这里),但他们都接受了无法解决我的问题的答案.我发现问题的最佳解决方案是StyledMarker库,它允许您为标记定义自定义颜色,但我无法使用默认标记(当您进行谷歌地图搜索时获得的标记 - 与它只是提供带有字母的标记或带有特殊图标的标记.

这是我用来显示3个引脚/标记的地图:

<script>
  function initialize() {
    var locations = [
      ['DESCRIPTION', 41.926979, 12.517385, 3],
      ['DESCRIPTION', 41.914873, 12.506486, 2],
      ['DESCRIPTION', 41.918574, 12.507201, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(41.923, 12.513),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    } …

我正在尝试使用以下代码使用Google MAP API v3.

<h2>Topology</h2>

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.topology.css' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.css' %}" />

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }
</style>

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

<div id="map_canvas"> </div>

当我运行此代码时,浏览器会这样说.

未捕获的TypeError:无法读取null的属性'offsetWidth'

我不知道,因为我遵循本教程中给出的指示.

你有什么线索吗？

我想在嵌入式Google Map(API v3)上绘制一组点.除非缩放级别太低(即缩小太多),否则我希望能够容纳所有点.我的方法是这样的:

var bounds = new google.maps.LatLngBounds();

// extend bounds with each point

gmap.fitBounds(bounds); 
gmap.setZoom( Math.max(6, gmap.getZoom()) );

这不起作用.如果在fitBounds之后直接调用,则最后一行"gmap.setZoom()"不会更改地图的缩放级别.

有没有办法获得边界的缩放级别而不将其应用于地图？解决这个问题的其他想法？