[英]Dropping marker with google maps api and javascript
Hi so I'm working a google maps element into an app I'm writing and am having trouble dropping a pin on the user's current location. 嗨,我正在将google maps元素集成到我正在编写的应用程序中,无法在用户的当前位置上放置图钉。
I can get the map to load a fusion table layer of pins, and center on the user's current location, but I'd like to be able to then drop a marker at the user's current location, and resize the map to fit all the markers. 我可以获取地图以加载引脚的融合表图层,并以用户的当前位置为中心,但是我希望能够在用户的当前位置放一个标记,并调整地图的大小以适合所有标记。 Is this possible?
这可能吗? If not I can just set the zoom to an appropriate level.
如果没有,我可以将缩放比例设置为适当的水平。
This is the code I'm working with: 这是我正在使用的代码:
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);
I should also say that the [app:user-lat] and [app:user-lon] calls are application specific, taking data from the mobile device, and will work to insert the current user's location. 我还应该说[app:user-lat]和[app:user-lon]调用是特定于应用程序的,它们从移动设备中获取数据,并且可以插入当前用户的位置。 This is the reason I'm not doing a call for the current position through google maps api, thanks in advance for anyone taking the time to help.
这就是我不通过google maps api调用当前位置的原因,在此先感谢您抽出宝贵的时间来提供帮助。
To place a marker at the user's position, add this after you define your map: 要将标记放置在用户的位置,请在定义地图后添加标记:
var marker = new google.maps.Marker({
position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
map: map
});
If you want to move it as the user moves, that will be a little more complicated, keep a reference to it and use marker.setPosition. 如果要随用户移动而移动它,则会有些复杂,请保留对其的引用并使用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);
To center the map on the markers (or zoom the map to show them all, you will need to query the FusionTable for all the markers, construct a google.maps.LatLngBounds object from their locations, then use that as an argument to map.fitBounds. 要将地图置于标记的中心(或缩放地图以显示所有标记),您需要在FusionTable中查询所有标记,从其位置构造google.maps.LatLngBounds对象,然后将其用作映射的参数。 fitBounds。
Here are a couple of examples that do that (but with a different column layout (two column location) than your table. The concept can be adjusted for your column layout (query for the single column location, parse it to create a google.maps.LatLng and add it to the google.maps.LatLngBounds): 以下是几个执行此操作的示例(但列的布局(表的两列位置)与表格不同)。可以针对您的列布局(查询单列位置,对其进行解析以创建google.maps)进行调整.LatLng并将其添加到google.maps.LatLngBounds):
example that zooms and centers the map on the data in your table . 以表格中的数据为中心缩放地图的示例 。 Notes:
笔记:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.