.net国际化谷歌地图奇怪渲染答案

【问题标题】：.net Internationalization Google maps strange rendering.net国际化谷歌地图奇怪渲染
【发布时间】：2015-12-15 19:29:30
【问题描述】：

我想要一个地方来记录我必须解决的问题，希望将来能帮助到某人。

主要故事是这是我们第一次使用 resx 文件实现网站翻译，但带有谷歌地图的页面无法正确显示。我们使用Request.ServerVariables["HTTP_ACCEPT_LANGUAGE"] 来检测然后设置当前执行线程的文化和一个cookie 来帮助识别。该网站被重定向到像fr.mydomain.com 这样的子域。

HTML

<div class="hidden">
    <div id="location1">@location.Location1</div>
    <div id="location2">@location.Location2</div>
    <div id="lat">@location.Lat</div>
    <div id="lon">@location.Lon</div>
    <div id="zoom">@location.Zoom</div>
</div>
<div id="map"></div>

location1 和 location 2 是地址字符串
lat 和 lon 是双精度的
缩放是一个整数

javascript

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=key=<key>"></script>

$(document).ready(function () {
    function initializeMap() {
        var styles = [];
        var styledMap = new google.maps.StyledMapType(styles,
            { name: "Styled Map" });

        var mapOptions = {
            center: new google.maps.LatLng(document.getElementById("lat").textContent, document.getElementById("lon").textContent),
            zoom: Number(document.getElementById("zoom").textContent),
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        google.maps.event.addDomListener(window, 'resize', function () {
            map.setCenter(
                {
                    lat: Number(document.getElementById("lat").textContent),
                    lng: Number(document.getElementById("lon").textContent)
                });
        });
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;

        directionsDisplay.setMap(map);

        directionsService.route({
            origin: document.getElementById("location1").textContent,
            destination: document.getElementById("location2").textContent,
            travelMode: google.maps.TravelMode.DRIVING
        }, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                alert('Directions failed due to: ' + status);
            }
        });


        //Associate the styled map with the MapTypeId and set it to display.
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');

    };
    google.maps.event.addDomListener(window, "load", initializeMap);
});

这对英语很有效

一旦您尝试法语版本，事情就会变得非常奇怪，但没有 javascript 错误。事实上，地图拖动、标记放置等......真的很不正常。

【问题讨论】：

标签： c# asp.net-mvc google-maps internationalization

【解决方案1】：

经过一番谷歌搜索和寻找虚假线索后，问题归结为数字格式问题。

因为 .net 设置了线程文化，所以双纬度/经度值显示为小数点分隔符 ,，而不是 .，这显然是法语的正常现象。这是 .net 的预期行为，但 Google 的 api 要么不知道如何处理此问题，要么以无法预料的方式对其进行解释。

我仍然不知道如何解释输出以及为什么运行时 javascript 控制台中没有出现错误，但以下文化规范解决了该问题。

来自

<div id="lat">@location.Lat</div>
<div id="lon">@location.Lon</div>

到

<div id="lat">@location.Lat.ToString(new System.Globalization.CultureInfo("en-US"))</div>
<div id="lon">@location.Lon.ToString(new System.Globalization.CultureInfo("en-US"))</div>

【讨论】：