Javascript 谷歌地理位置在实时站点中不起作用
Javascript google geolocation is not working in live site
使用Javascript的Google地理定位在Firefox,Chrome等主要浏览器的实时站点中不起作用。地理位置结果显示在 Opera for live site 中,其中相同的是适用于所有浏览器(Chrome、Firefox 和 Opera)的 localhost。使用 https://的我的实时站点协议。请参阅下面的代码并建议任何.. 地理位置和谷歌地图接口
<script src="http://maps.google.com/maps/api/js?key=MY_KEY_HERE&sensor=true"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_2") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//alert(city.short_name + " " + city.long_name);
//alert(city.long_name);
var cityname = city.long_name;
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("address").innerHTML = results[0].formatted_address;
document.getElementById("citynm").innerHTML = cityname; }
else {
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br>"; }
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
// Draw a circle around the user position to have an idea of the current localization accuracy
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br>";
}
function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<p id="citynm"></p>
<p id="address"></p>
</body>
</html>
我已经测试了您的代码(Chrome v29,Windows 8),下面的代码可以在远程服务器(非本地主机)上运行,但您需要注意注释2区域
<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>
我添加了 v=3.9
和
function writeAddressName(latLng) {
...
if (results[0].address_components[i].types[b] == "route") {
您可能需要处理无法设置城市的情况。
我可以看到地址。[此示例不包括地图显示]
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>
<script>
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ "location": latLng }, function(results, status) {
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "route") {
//this is the object you are looking for
city = results[0].address_components[i];
break;
}
}
}
//alert(city.short_name + " " + city.long_name);
//alert(city.long_name);
var cityname = city.long_name;
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("address").innerHTML = results[0].formatted_address;
document.getElementById("citynm").innerHTML = cityname;
}
else {
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br>";
}
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
// Draw a circle around the user position to have an idea of the current localization accuracy
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br>";
}
function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation) {
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<p id="error"></p>
<p id="citynm"></p>
<p id="address"></p>
</body>
</html>
也许这个链接可以帮助你
https://developers.google.com/maps/articles/geocodestrat
谷歌地图API适用于本地主机,但不适用于Web服务器
https://developers.google.com/maps/faq?hl=en&csw=1#browsersupport
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
http://jsfiddle.net/BQzLq/3/
https://support.google.com/maps/answer/21849?hl=en
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
These all links is just for your knowledge in some browser or browser's older versions google map v3 doesn't works.
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- 引导工具提示在实时站点上不起作用,但在控制台上运行良好
- 当我将javascript代码放在外部站点.js文件中时,Ajax页面方法不起作用
- AJAX/jquery 在返回的 PHP 站点上不起作用
- html 站点中的菜单项不起作用
- 引导弹出框在 joomla 站点上不起作用
- 链接在具有 node.js 和 ejs 的多页站点中不起作用
- 幻灯片在下载的站点中不起作用
- jQuery 在内联网站点上不起作用
- 为什么我的 javascript 在测试环境中工作,但在实时站点上不起作用
- Javascript 谷歌地理位置在实时站点中不起作用
- 跨站点ajax请求不起作用
- 站点覆盖不起作用&;未捕获的ReferenceError:未定义closeav &;
- 移动站点中的呼叫链接不起作用
- 我的脚本在wordpress静态站点中不起作用