开发时是否应该出现地理编码的Google地图？

时间：2011-12-20 06:01:08

标签： asp.net google-maps-api-3

我使用Visual Web Developer 2010构建基于ASP.NET的网站。我有一个用户输入地址内容的页面，当我们使用geocode api和Google地图更新时，我会在地址上放置一个标记图钉。

从技术上讲，地理编码正在工作，因为我正在接收纬度和经度值，但是当我在localhost上测试时，地图没有显示。

我的网站已经生成了api密钥。

我是否希望看到地图显示在localhost上，还是仅在api密钥与域匹配的网络上托管时显示？

感谢您的帮助，

詹姆斯

以下是我的代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Partner/Partner.Master" AutoEventWireup="true" CodeBehind="LocationMod.aspx.cs" Inherits="AideWeb.Partner.LocationMod" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=<my api key>" type="text/javascript"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Add Location</title>
<style type="text/css">
  html { height: 30% }
  body { height: 30%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
    .style3
    {
        text-align: left;
    }
    .style4
    {
        text-align: right;
    }
    </style>
<script type="text/javascript" src="http//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var lat = document.getElementById('<%= hdnLat.ClientID%>').value;
    var lng = document.getElementById('<%= hdnLong.ClientID%>').value;
    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
</script>

<script type="text/javascript">

function calculateCoordinates() {

    var txtAddress1 = document.getElementById('<%= txtAddress1.ClientID%>');
    var txtAddress2 = document.getElementById('<%= txtAddress2.ClientID%>');
    var txtTown = document.getElementById('<%= txtTown.ClientID%>');
    var txtPostcode = document.getElementById('<%= txtPostcode.ClientID%>');
    var txtCountry = document.getElementById('<%= ddlCountry.ClientID%>');

    var address = txtAddress1.value + ', ';
    address += txtAddress2.value + ', ';
    address += txtTown.value + ', ';
    address += txtPostcode.value + ', ';
    address += txtCountry.value;

    var geocoder;
    geocoder = new GClientGeocoder();
    geocoder.getLatLng(address, function (latlng) {
        if (!latlng) {
            alert(address + ' not found');
        } else {
            document.getElementById('<%= hdnLat.ClientID%>').value = latlng.lat();
            document.getElementById('<%= hdnLong.ClientID%>').value = latlng.lng();
        }
    });

}

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<body>
<div align=center>
<table>
<tr><td class="style4">Location Name:</td>
<td class="style3">
<asp:TextBox ID="txtName" runat="server" Width="250px" MaxLength="50"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" 
    ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF3399" 
    Display="Dynamic"></asp:RequiredFieldValidator></td><td>&nbsp;</td></tr>
<tr><td class="style4">Email Address:</td>
<td class="style3">
<asp:TextBox ID="txtEmailAddress" runat="server" Width="250px" MaxLength="50">    </asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
    ControlToValidate="txtEmailAddress" Display="Dynamic" ErrorMessage="*" 
    ForeColor="#FF33CC" 
    ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">    </asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
    ControlToValidate="txtEmailAddress" ErrorMessage="*" ForeColor="#FF3399" 
    Display="Dynamic"></asp:RequiredFieldValidator></td><td>&nbsp;</td></tr>
<tr><td class="style4">Work Phone:</td>
<td class="style3"><asp:TextBox id="txtWorkPhone" runat="server" MaxLength="50" Width="250px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
    ControlToValidate="txtWorkPhone" ErrorMessage="*" ForeColor="#FF3399" 
    Display="Dynamic"></asp:RequiredFieldValidator>
</td><td>&nbsp;</td></tr>
<tr><td class="style4">Address Line 1:</td>
<td class="style3"><asp:TextBox id="txtAddress1" runat="server" MaxLength="50" Width="250px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" 
    ControlToValidate="txtAddress1" ErrorMessage="*" ForeColor="#FF3399" 
    Display="Dynamic"></asp:RequiredFieldValidator></td><td rowspan="6">
<div id="map_canvas" style="height:50%;top:300px"></div></td></tr>
<tr><td class="style4">Address Line 2:</td>
<td class="style3"><asp:TextBox id="txtAddress2" runat="server" MaxLength="50" Width="250px"></asp:TextBox></td><td>
&nbsp;</td></tr>
<tr><td class="style4">Town:</td>
<td class="style3"><asp:TextBox id="txtTown" runat="server" MaxLength="50" Width="250px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" 
    ControlToValidate="txtTown" ErrorMessage="*" ForeColor="#FF3399" 
    Display="Dynamic"></asp:RequiredFieldValidator></td><td>
    &nbsp;</td></tr>
<tr><td class="style4">State:</td>
<td class="style3"><asp:TextBox id="txtState" runat="server" MaxLength="50" Width="250px"></asp:TextBox></td><td>
&nbsp;</td></tr>
<tr><td class="style4">Postcode:</td>
<td class="style3"><asp:TextBox id="txtPostcode" runat="server" MaxLength="10" Width="250px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" 
    ControlToValidate="txtPostcode" ErrorMessage="*" ForeColor="#FF3399" 
    Display="Dynamic"></asp:RequiredFieldValidator></td><td>
    &nbsp;</td></tr>
<tr><td class="style4">Country:</td>
<td class="style3"><asp:DropDownList ID="ddlCountry" runat="server" Height="22px" Width="257px"></asp:DropDownList></td><td>
&nbsp;</td></tr>
<tr><td colspan=2 class="style4"><asp:ImageButton ID="btnSave" 
    runat="server" ImageUrl="~/Images/save.png" onclick="btnSave_Click" /></td>       <td>&nbsp;</td></tr>

</table>
</div>

<asp:HiddenField ID="hdnLat" runat="server" />
<asp:HiddenField ID="hdnLong" runat="server" />
</body>
</asp:Content>

0 个答案:

没有答案
相关问题
最新问题