ASP.NET Literal控件回发未渲染及Google Maps JS地图点位展示问题

Hey there, let's work through these two issues step by step— I’ve dealt with both scenarios before, so I’ll share what worked for me!

Literal控件的回发渲染问题通常和ViewState或者页面加载逻辑有关，这里有几个常见的修复方向：

• 启用ViewState（如果需要保留静态内容）：Literal默认不启用ViewState，所以回发后首次加载时赋值的内容会丢失。你可以手动开启：

  <asp:Literal ID="YourLiteral" runat="server" EnableViewState="true"></asp:Literal>
  

• 限制赋值逻辑只在首次加载执行：如果你的Literal内容是静态初始化的，一定要把赋值代码放在!IsPostBack判断里，避免回发时被重置：

  protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          YourLiteral.Text = "需要渲染的初始内容";
      }
  }
  

• 动态内容需回发时重新绑定：如果Literal的内容来自数据库/接口这类动态源，回发时必须重新调用获取逻辑——即使开了ViewState，复杂的动态内容也没法自动保留，得手动重新赋值。

转用原生JS实现这个需求的核心是后端提供结构化数据+前端动态过滤渲染，我给你一套可落地的方案，附带常见坑的排查：

第一步：后端准备数据（C# WebForms示例） #

先写一个WebMethod来返回按推广人员分组的售货点数据，序列化为JSON：

using System.Web.Services;
using System.Web.Script.Serialization;
using System.Collections.Generic;
using System.Linq;

public partial class YourPage : System.Web.UI.Page
{
    [WebMethod]
    public static string GetVendorPoints()
    {
        // 从数据库获取数据（这里替换成你的实际查询逻辑）
        var vendorPoints = YourDatabaseContext.VendorLocations
            .Select(v => new VendorPoint
            {
                PromoterName = v.PromoterName,
                Latitude = v.Latitude,
                Longitude = v.Longitude,
                VendorName = v.VendorName
            })
            .ToList();

        // 序列化为JSON返回给前端
        var serializer = new JavaScriptSerializer();
        return serializer.Serialize(vendorPoints);
    }
}

// 定义点位实体类
public class VendorPoint
{
    public string PromoterName { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
    public string VendorName { get; set; }
}

第二步：前端HTML + JavaScript逻辑 #

这里实现下拉选择推广人员、加载数据、渲染地图标记的功能：

<!-- 推广人员选择下拉框 -->
<select id="promoterDropdown">
    <option value="">请选择推广人员</option>
</select>

<!-- 地图容器（记得设置宽高） -->
<div id="mapContainer" style="width: 100%; height: 600px; margin-top: 20px;"></div>

<!-- 引入Google Maps JS API（替换成你的API Key） -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let map;
let allMarkers = [];
let allVendorPoints = [];

// 初始化地图
function initMap() {
    // 设置默认地图中心（可以换成你业务覆盖的区域）
    const defaultCenter = { lat: 39.9042, lng: 116.4074 };
    map = new google.maps.Map(document.getElementById('mapContainer'), {
        zoom: 10,
        center: defaultCenter
    });

    // 加载后端数据
    loadVendorData();
}

// 从后端获取售货点数据
function loadVendorData() {
    $.ajax({
        type: "POST",
        url: "YourPage.aspx/GetVendorPoints",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            allVendorPoints = JSON.parse(response.d);
            
            // 生成下拉框选项（去重推广人员名称）
            const uniquePromoters = [...new Set(allVendorPoints.map(p => p.PromoterName))];
            const dropdown = document.getElementById('promoterDropdown');
            uniquePromoters.forEach(promoter => {
                const option = document.createElement('option');
                option.value = promoter;
                option.textContent = promoter;
                dropdown.appendChild(option);
            });

            // 绑定下拉框选择事件
            dropdown.addEventListener('change', handlePromoterSelect);
        },
        error: function(xhr, status, err) {
            console.error("加载数据失败:", err);
            alert("加载售货点数据出错，请稍后重试");
        }
    });
}

// 选择推广人员后更新地图标记
function handlePromoterSelect(e) {
    const selectedPromoter = e.target.value;
    
    // 先清除所有现有标记（避免重复叠加）
    allMarkers.forEach(marker => marker.setMap(null));
    allMarkers = [];

    if (!selectedPromoter) return;

    // 过滤当前推广人员的售货点
    const filteredPoints = allVendorPoints.filter(p => p.PromoterName === selectedPromoter);

    // 添加新标记到地图
    filteredPoints.forEach(point => {
        const marker = new google.maps.Marker({
            position: { lat: point.Latitude, lng: point.Longitude },
            map: map,
            title: point.VendorName // 鼠标 hover 时显示售货点名称
        });
        allMarkers.push(marker);
    });

    // 自动调整地图视野，包含所有标记
    if (filteredPoints.length > 0) {
        const bounds = new google.maps.LatLngBounds();
        filteredPoints.forEach(p => bounds.extend(new google.maps.LatLng(p.Latitude, p.Longitude)));
        map.fitBounds(bounds);
    }
}

// 页面加载完成后初始化地图
window.addEventListener('load', initMap);
</script>

常见问题排查 #

• API Key问题：确保你的Google Cloud账号已经启用了「Maps JavaScript API」，并且API Key没有被限制访问
• 后端数据格式：检查WebMethod返回的JSON是否有语法错误（可以用浏览器F12的Network tab查看响应）
• 控制台报错：按F12打开开发者工具，查看Console tab的报错信息——比如跨域问题、变量未定义、经纬度格式错误（必须是数值类型，不能是字符串）
• 标记不显示：确认经纬度是有效的（比如纬度范围-90到90，经度-180到180），如果是数据库存的字符串，要转成数字再返回

内容的提问来源于stack exchange，提问作者Rodolfo Redolfi