将脚本添加到 asp.net 内容页面

Posted 2023-02-22

【中文标题】将脚本添加到 asp.net 内容页面

【英文标题】：add script to asp.net content page

【发布时间】：2012-05-09 13:51:32

【问题描述】：

我有一个可用的谷歌地图脚本，但我不知道如何将它添加到我的 asp.net 内容页面。将脚本添加到页面的正确方法是什么？

见代码：

 <%@ Page Title="Our Location" Language="VB"     MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="false" CodeFile="Location.aspx.vb" Inherits="About_Location" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<script type="text/javascript"   
  src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 

<style type="text/css">  
html  height: 100%    
body  height: 100%; margin: 0px; padding: 0px   
##map height: 100%  
</style> 

</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server"    OnLoad="codeAddress()">

<script type= "text/javascript">

var geocoder;
var map;
var marker;

function codeAddress() 
    alert("hello")


    //initializes the map

    //create geocoder
    geocoder = new google.maps.Geocoder();
    //set options for the map being created
    var myOptions = 
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;
    //create map instance and pass it the myOptions object literal
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    //geocode to get the lat and lng points of the given address
    geocoder.geocode( 'address': 'New York, New York', function (results, status) 
        if (status == google.maps.GeocoderStatus.OK) 
            //if geocoder finds location
            //center the map on the latlng points of the given address
            map.setCenter(results[0].geometry.location);
            map.setOptions( zoom: 18 );
            //create marker and place it on the address
            marker = new google.maps.Marker(
                map: map,
                position: results[0].geometry.location,
                title: 'New York, New York'
            );
        
        else 
            //if geocoder cannot find location, alert user
            alert("Could not find location");
        
    );










</script>

<div id="map" style="width:700px; height:400px;"></div> 

</asp:Content>

【参考方案1】：

将您的脚本放在单独的 js 文件中，像使用 Google 地图脚本一样声明它。然后你必须调用它，也许将这个“#map” div id 作为参数发送到该脚本，而不是在 javascript 中硬编码。

在这种情况下，您希望使用脚本管理器在页面加载时执行此操作：

ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowGoogleMap", "codeAddress('map');", true);

顺便说一句。对于谷歌地图，您可以使用谷歌地图服务器控件，从服务器端使用管理地图要容易得多：

http://googlemap.codeplex.com/