CEFSharp修改或截断来自Google Maps v3 api的地理编码地址数据

时间:2014-06-16 22:18:49

标签: google-maps-api-3 lang cefsharp

要重现,请从此处下载CefSharp: https://github.com/cefsharp/CefSharp

运行CefSharp.WinForms.Example

现在在您的浏览器和CefSharp浏览器上运行我的小提琴: http://jsfiddle.net/bjmL9/

我添加了一个警告,显示点击的完整地址数据(street_number,route,neighborhood,locality,administrative_area_level_2,administrative_area_level_1,country,postal_code)。

将浏览器上显示的数据与CefSharp浏览器上显示的数据进行比较。

问题: 在我的浏览器中,该地方显示为“CuliacánRosales”,但在Cef浏览器上它被截断为“Culiacán”。这个国家表现得很奇怪,Cef显示的是“墨西哥”,而不是“墨西哥”(非气质)。

我处于退出cef cuz的边缘我无法在这个问题上得到谷歌匹配而且不知道如何解决它......

这是小提琴的代码,因为它不会永远持续下去:

<!DOCTYPE html>
<html>
  <head>
    <title>Google Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link href="MapStyle.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>
      var map;
      var geocoder;

      function initialize() {
          var placeMarkers = [];
          geocoder = new google.maps.Geocoder();
          var aquamiller = new google.maps.LatLng(
              24.832956, 
              -107.389775);

          var mapOptions = {
              zoom: 16,
              center: aquamiller,
          };

          map = new google.maps.Map(
              document.getElementById('map-canvas'), 
              mapOptions);

          createSearchBar(map, placeMarkers);

          google.maps.event.addListener(
              map,
              'click', 
              function(e) {
                  getAddress(e.latLng, function(address) {
                      alert(
                        address.street_number + ', ' +
                        address.route + ', ' +
                        address.neighborhood + ', ' +
                        address.locality + ', ' +
                        address.administrative_area_level_2 + ', ' +
                        address.administrative_area_level_1 + ', ' +
                        address.country + ', ' +
                        address.postal_code);
                  });
              });
      }

      function getAddress(latLng, callBack)
      {
          geocoder.geocode({'latLng': latLng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              if (results[0]) {
                var address = {};
                var components = results[0].address_components;
                for (var i = 0 ; i< components.length ; i++) {
                  address[components[i].types[0]] = components[i].long_name;
                }
                callBack(address);
              }
              else {
                alert('No results found');
              }
            }
            else {
              alert('Geocoder failed due to: ' + status);
            }
          });
      }

      function createSearchBar(map, markers)
      {
          var input = /** @type {HTMLInputElement} */(document.getElementById('pac-input'));
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

          var searchBox = new google.maps.places.SearchBox(/** @type {HTMLInputElement} */(input));

          google.maps.event.addListener(searchBox, 'places_changed', function() {
            var places = searchBox.getPlaces();
            console.log(places);
            for (var i = 0, marker; marker = markers[i]; i++) {
              marker.setMap(null);
            }

            markers = [];
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0, place; place = places[i]; i++) {
              var image = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25)
              };

              // Create a marker for each place.
              var marker = new google.maps.Marker({
                map: map,
                icon: image,
                title: place.name,
                position: place.geometry.location
              });

              markers.push(marker);

              bounds.extend(place.geometry.location);
              console.log(place.geometry.location);
            }
            map.fitBounds(bounds);
            map.setZoom(16);
          });

          google.maps.event.addListener(map, 'bounds_changed', function() {
            var bounds = map.getBounds();
            searchBox.setBounds(bounds);
          });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style>
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map-canvas"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

嘿再等一下,我用我的标准Chrome 35和IE 10看到了相同的行为(在“México”中缺少“Rosales”和重音)。

所以,也许它与缺少CEF语言包有关:https://github.com/cefsharp/cef-binary/tree/cef_binary_1.1364.1123/Release/locales ..您使用的NuGet可能只有en-US.pak

...用你的小提琴示例测试了一下。在我的安装中删除es.pak没有帮助。但是,如果我在地图的搜索框中搜索“Sønderborg,Denmark”,我会看到相似的内容。 (在某些地方,它说“S ** o ** nderborg”,没有“ø”)那么你确定它的浏览器相关而不仅仅是谷歌API吗?

更新language=es询问:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=es&libraries=places"></script>

改变googles API的响应。目前使用我的iPad和小提琴进行验证!