javascript 在 ASP.net C# 中使用 Google Map Geolocation API 服务

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20372464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 18:20:53  来源:igfitidea点击:

using Google Map Geolocation API Service in ASP.net C#

javascriptgoogle-mapsgoogle-maps-api-3

提问by user3026519

I want to get the user current location using Google Map Geolocation API Service and using the following code but the when i run the code it does not show the map with the location. Please give any suggestions.

我想使用 Google Map Geolocation API 服务并使用以下代码获取用户当前位置,但是当我运行代码时,它没有显示带有位置的地图。请提出任何建议。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Get User Current Location using Google Map Geolocation API Service in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    } else {
        alert("Geo Location is not supported on your current browser!");
    }
    function success(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var city = position.coords.locality;
        var myLatlng = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            title: "lat: " + latitude + " long: " + longitude
        });

        marker.setMap(map);
        var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:" + latitude + "<br /> Longitude:" + longitude + "" });
        infowindow.open(map, marker);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
   <div id="map_canvas" style="width: 500px; height: 400px"></div>
    </form>
</body>
</html>

enter image description here

在此处输入图片说明

enter image description here

在此处输入图片说明

回答by sabotero

I have used exactly your code and is working. Make sure when you see this message in ChromeYou click in Allow

我已经完全使用了您的代码并且正在工作。确保在Chrome 中看到此消息时 单击“允许”

Authorize site to get location

授权站点获取位置

If you already Deniedyour site you have to remove it from the unauthorized list (or change your port).

如果您已经拒绝了您的站点,则必须将其从未经授权的列表中删除(或更改您的端口)。

To do so:

这样做:

Go to google settings and search for Privacy:

转到谷歌设置并搜索隐私

Privacy Settings

隐私设置

Click in Content settings...button and search the Location area:

单击内容设置...按钮并搜索位置区域:

Content settings

内容设置

Click sur Manage exceptions...button, then remove your blocked site(s) :

单击 sur管理例外...按钮,然后删除您被阻止的站点:

location exceptions

位置异常



My result with your code is this:

我对你的代码的结果是这样的:

The restult

结果

Your code (which I'm exactly using):

您的代码(我正在使用):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Get User Current Location using Google Map Geolocation API Service in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    } else {
        alert("Geo Location is not supported on your current browser!");
    }
    function success(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var city = position.coords.locality;
        var myLatlng = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            title: "lat: " + latitude + " long: " + longitude
        });

        marker.setMap(map);
        var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:" + latitude + "<br /> Longitude:" + longitude + "" });
        infowindow.open(map, marker);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
   <div id="map_canvas" style="width: 500px; height: 400px"></div>
    </form>
</body>
</html>