国家/地区位置库选择

Question

是否有任何JavaScript或JSF库可以选择contry并显示可用的公司地址？例如，我找到了这个Flash解决方案：

http://www.solaredge.com/groups/to_order

我的最佳解决方案是将Google地图用于我的网站，以及当访问者想要根据国家/地区的位置找到办公室时使用此地图。

Answer 1

我的解决方案基于Google地图。

逻辑是：

1. 按国家/地区创建办事处列表。
2. 在地图上收听click事件。
3. 使用Geocoder服务获取国家/地区名称。
4. 显示阵列中的办公室详细信息。

完整代码（基于Google demo） - 例如点击德国。

var offices = {
  'germany': [
    {
      name: 'germany1',
      address: 'germany1 address'
    }
  ]
};

var geocoder;
var marker;
var chartBase = 'https://chart.googleapis.com/chart?chst=';

function getCountry(results) {
  var geocoderAddressComponent,addressComponentTypes,address;
  for (var i in results) {
    geocoderAddressComponent = results[i].address_components;
    for (var j in geocoderAddressComponent) {
      address = geocoderAddressComponent[j];
      addressComponentTypes = geocoderAddressComponent[j].types;
      for (var k in addressComponentTypes) {
        if (addressComponentTypes[k] == 'country') {
          return address;
        }
      }
    }
  }
  return 'Unknown';
}
function getCountryIcon(country){
  return chartBase + 'd_simple_text_icon_left&chld=' +
    escape(country.long_name)  + '|14|999|flag_' +
    country.short_name.toLowerCase() + '|24|000|FFF';
}
function getMsgIcon(msg){
  return  chartBase + 'd_bubble_text_small&chld=edge_bl|' + msg +
    '|C6EF8C|000000';
}
function initialize() {
  // created using http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  var styleOff = [{ visibility: 'off' }];
  var stylez = [
    {   featureType: 'administrative',
     elementType: 'labels',
     stylers: styleOff},
    {   featureType: 'administrative.province',
     stylers: styleOff},
    {   featureType: 'administrative.locality',
     stylers: styleOff},
    {   featureType: 'administrative.neighborhood',
     stylers: styleOff},
    {   featureType: 'administrative.land_parcel',
     stylers: styleOff},
    {   featureType: 'poi',
     stylers: styleOff},
    {   featureType: 'landscape',
     stylers: styleOff},
    {   featureType: 'road',
     stylers: styleOff}
  ];
  geocoder = new google.maps.Geocoder();
  var mapDiv = document.getElementById('map_canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(53.012924,18.59848),
    zoom: 4,
    mapTypeId: 'Border View',
    draggableCursor: 'pointer',
    draggingCursor: 'wait',
    mapTypeControlOptions: {
      mapTypeIds: ['Border View']
    }
  });
  var customMapType = new google.maps.StyledMapType(stylez,
                                                    {name: 'Border View'});
  map.mapTypes.set('Border View', customMapType);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(53.012924,18.59848),
    map: map
  });

  google.maps.event.addListener(map, 'click', function(mouseEvent) {
    var redMarkerIcon = chartBase +
        'd_map_xpin_letter&chld=pin|+|C40000|000000|FF0000';
    marker.setIcon(redMarkerIcon);
    //map.setCenter(mouseEvent.latLng);
    geocoder.geocode(
      {'latLng': mouseEvent.latLng},
      function(results, status) {
        var headingP = document.getElementById('country');
        if (status == google.maps.GeocoderStatus.OK) {
          var country = getCountry(results);
          marker.setPosition(mouseEvent.latLng);
          marker.setIcon(getCountryIcon(country));
          //headingP.innerHTML = country.long_name+ ' <br> ';
          headingP.innerHTML = '';
          var country_offices = offices[country.long_name.toLowerCase()];
          if (country_offices) {
            for (var i = 0; i < country_offices.length; i++) {
              headingP.innerHTML += '<div>Office name: ' + country_offices[i].name + '. Office address: ' + country_offices[i].address + '</div>'
            }
          }
        }
        if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
          marker.setPosition(mouseEvent.latLng);
          marker.setIcon(
            getMsgIcon('Oups, I have no idea, are you on water?'));
          headingP.innerHTML = 'Oups, ' +
            'I have no idea, are you on water?';
        }
        if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
          marker.setPosition(mouseEvent.latLng);
          marker.setIcon(
            getMsgIcon('Whoa! Hold your horses :) You are quick! ' +
                       'too quick!')
          );
          headingP.innerHTML = 'Whoa! You are just too quick!';
        }
      });
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

#country {
  text-align: center;
}
#map_canvas {
  height: 75%;
}

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title> 
      Google Maps V3 API Sample #2:  Clik to find out  what country you are in
    </title> 
    <link
          href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
          rel="stylesheet" type="text/css"> 
    <style type="text/css"> 

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

    </script> 
  </head> 
  <body> 
    <p align="center" id="country"> Click on a map to find out what country you
      clicked on. <br> This code sample shows how to create styled maps and how
      to generate and handle geocoding requests. It also shows how to use the
      chart api to generate dynamic icons. </p> 
    <div id="map_canvas"></div> 
  </body> 
</html>

http://jsbin.com/tijevu/edit?html,css,js