javascript - 使用谷歌地图 api 和 javascript 删除标记

Question

嗨，我正在将谷歌地图元素添加到我正在编写的应用程序中，但在将图钉放在用户当前位置上时遇到问题。

我可以让 map 加载引脚融合表层，并以用户当前位置为中心，但我希望能够在用户当前位置放置一个标记，并调整 map 大小以适合所有标记。这可能吗？如果没有，我可以将缩放设置为适当的级别。

这是我正在使用的代码:

var geocoder = new google.maps.Geocoder();
function initialize() {
    map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
       center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
       zoom: 12,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    layer = new google.maps.FusionTablesLayer({
       map: map,
       heatmap: { enabled: false },
       query: {
          select: "col2, col0",
          from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
          where: ""
       },
       options: {
          styleId: 3,
          templateId: 3
       }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

我还应该说，[app:user-lat] 和 [app:user-lon] 调用是特定于应用程序的，从移动设备获取数据，并将用于插入当前用户的位置。这就是我没有通过 google map api 调用当前位置的原因，提前感谢任何花时间提供帮助的人。

Answer 1

要在用户位置放置标记，请在定义 map 后添加此标记:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
    map: map
});

如果您想随着用户移动而移动它，那会稍微复杂一些，请保留对它的引用并使用marker.setPosition。

function initialize() {
    map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
       center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
       zoom: 12,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
        map: map
    });


    layer = new google.maps.FusionTablesLayer({
       map: map,
       heatmap: { enabled: false },
       query: {
          select: "col2, col0",
          from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
          where: ""
       },
       options: {
          styleId: 3,
          templateId: 3
       }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

要将 map 以标记为中心(或缩放 map 以显示全部标记)，您需要查询 FusionTable 中的所有标记，从其位置构造一个 google.maps.LatLngBounds 对象，然后将其用作参数到map.fitBounds。

这里有几个执行此操作的示例(但具有与表不同的列布局(两列位置)。可以根据您的列布局调整概念(查询单列位置，解析它以创建一个google.maps.LatLng 并将其添加到 google.maps.LatLngBounds):

• http://www.geocodezip.com/v3_FusionTablesLayer_centerOnMarkers.html
• http://www.geocodezip.com/www_vciregionmap_comC.html

example that zooms and centers the map on the data in your table 。备注:

1. 如果您有更多数据但您可能不想这样做，则使用的 GViz API 仅限于 500 行。
2. map 以数据为中心，而不是以用户为中心。