使用 Google Map V3 进行地理定位答案

【问题标题】：Geolocation with Google Map V3使用 Google Map V3 进行地理定位
【发布时间】：2013-05-01 20:44:12
【问题描述】：

我想将地理位置添加到我的移动版地图位于http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html。

我的地图通过这个 JavaScript 文件加载 http://alert.fcd.maricopa.gov/alert/Google/v3/js/mobilemap_v3.js。你会注意到这个文件的第 46 行是 -

map = new google.maps.Map($('#map_canvas')[0],myOptions);

我尝试了https://developers.google.com/maps/documentation/javascript/examples/map-geolocation 的地理定位示例和http://www.w3schools.com/html/html5_geolocation.asp 的W3 HTML5 地理定位方法。但是我的地图通过 jquery 加载并且不使用

map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

喜欢所有的例子。

如果我将第 46 行中的 $ 替换为 document.getElementById 但我的传感器/制造商都不会显示。

有谁知道我如何使用我的地理定位标记/数据仍在加载？

【问题讨论】：

如果我们能看到您正在使用的实际 AJAX 代码会有所帮助。
地图 (#map_canvas) 的 CSS 位于“alert.fcd.maricopa.gov/alert/Google/v3/css/mobile.css”。可以通过浏览器查看mobile.html的页面源代码。
您应该直接在问题中发布您的问题代码（JS，而不仅仅是 CSS），以备后用。您的外部页面可能随时更改，并且几乎肯定会在您收到有用的答案后更改。
代码贴出来了。地图 = 新 google.maps.Map($('#map_canvas')[0],myOptions);是什么正在加载我的地图。但是我发现的所有地理定位示例都使用 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);。所以 $ (window.jQuery) 不能与 Geolocation 示例一起使用，因为它们使用 document.getElementById。

标签： javascript jquery google-maps-api-3 geolocation

【解决方案1】：

找到了答案！我使用了 geolocationmarker-compiled.js（http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/geolocationmarker/src/geolocationmarker-compiled.js?r=379）然后添加了

var GeoMarker;

GeoMarker = new GeolocationMarker();
    GeoMarker.setCircleOptions({
    fillColor: '#808080'});

    google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
      map.setCenter(this.getPosition());
      map.fitBounds(this.getBounds());
    });

    google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
      alert('There was an error obtaining your position. Message: ' + e.message);
    });

    GeoMarker.setMap(map);

而且效果很好。如果有人想做同样的事情，可以使用 Geolocation 的移动地图位于 http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html 和 mobilemap_v3.js 文件中的地理位置代码。

【讨论】：