0

緯度と経度の値を2つのTextBoxから、地図上のその場所にマーカーを表示するJavaスクリプト関数に送信したいと思います。

次のコードを記述しましたが、機能しません。

<script type="text/javascript">
var map;
function init()
{
    var mapoptions=
    {
        center: new google.maps.LatLng(17.379064211298, 78.478946685791),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map=new google.maps.Map(document.getElementById("map_can"), mapoptions);
}    
function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>'),document.getElementById('<%=TextBox2.ClientID %>'));
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}   
</script>

ボタンコントロールコード：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark()" />

マーカーは表示されません。また、Chromeコンソールはエラーを表示しません。私はどこが間違っていますか？

4

4 に答える 4

1

google API V3リファレンスによると、コンストラクターは

LatLng(lat:number, lng:number, noWrap?:boolean)

したがって、関数は次のようになります。

function placemark()
{
   var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}

そして、ボタンの定義を次のように更新します。

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(); return false;" />

しかし、おそらく次のようにしたほうがよいでしょう：

function placemark(lat, lng)
{
   var ulatlng= new google.maps.LatLng(lat,lng);
   var marker = new google.maps.Marker({position:ulatlng,map:map});
}

そして、ボタンを次のように更新します。

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="placemark(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value); return false" />

いずれにせよ、ページがポストバックされて更新されないように、「returnfalse」を含めるようにしてください。

さらにクリーンになりたい場合：

ASCX：

<asp:Button ID="uxBtnPlaceMarker" runat="server" Text="Place Marker" />

背後にあるコード：

   protected void Page_Load(Object sender, EventArgs args)
   {
       //...Do whatever you do here...
       this.uxBtnPlaceMarker.OnClientClick = string.Format("placemark(document.getElementById('{0}').value,document.getElementById('{1}').value); return false", TextBox1.ClientID, TextBox2.ClientID);
   }
于 2012-09-05T12:24:05.737 に答える
0 
var ulatlng=  document.getElementById(TextBox1).value;

このように使用すると、これは機能します

于 2012-09-05T12:17:21.503 に答える
0

代わりに、テキストボックスの値を取得してみてください。

var ulatlng= new google.maps.LatLng(document.getElementById('<%=TextBox1.ClientID %>').value,document.getElementById('<%=TextBox2.ClientID %>').value)

また、地図をズームアウトすることもできます。マーカーが置き忘れられ、別の場所に表示される可能性があります（Lat Longが交換されました）。テストするには、テキストボックスを正しい値に置き換え、マーカーが表示されることを確認します

于 2012-09-05T11:14:05.600 に答える
0

textboxの.valueプロパティを使用する必要があります。例えば

    var mapCan = document.getElementById("map_can").value;
于 2012-09-05T11:20:08.967 に答える