> 웹 프론트엔드 > JS 튜토리얼 > Google 지도가 열리지 않는 솔루션_javascript 기술

Google 지도가 열리지 않는 솔루션_javascript 기술

WBOY
풀어 주다: 2016-05-16 16:40:12
원래의
1998명이 탐색했습니다.

Google 지도는 중국의 만리 방화벽에 의해 차단되어 있으므로 http://maps.googleapis.com/maps/api/js?sensor=false&언어=라는 도메인 이름으로 Google Maps API를 직접 인용할 필요는 없습니다. en. 대신 http://로 변경하세요. /maps.google.cn/maps/api/js?sensor=false 주소는 google.cn 국내 도메인 이름이 차단되지 않아 사용 가능합니다.

참고: google.cn을 사용할 수 있지만 google.com의 리소스를 참조하기 위해 일부 js를 출력하므로 지도 렌더링이 지연될 수 있으므로 콘텐츠 앞에 Google Maps API를 배치하지 마세요. 대신 head 태그나 HTML 종료 태그 끝에 배치하여 페이지 콘텐츠가 공백이 되어 브라우저가 해당 콘텐츠를 표시할 수 없게 되는 것을 방지하세요.

window.onload 이벤트를 사용하여 그리지 마세요. 그렇지 않으면 google.com의 리소스를 로드해야 하기 때문에 Google 지도가 제 시간에 표시되지 않고 google.com 리소스가 가로채어 요청이 발생하게 됩니다. 타임아웃(약 2분) Google 지도를 그립니다.

Google의 콜백 매개변수를 사용하여 콜백 함수 이름을 전달합니다. 테스트 후 이 메소드는 window.onload 이벤트를 사용하는 것보다 Google 지도를 더 빠르게 렌더링합니다.

샘플 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站引用谷歌地图打不开解决办法:使用google.cn</title>
</head>

<body>

<div id="map_canvas" class="map" style="height: 350px;width: 500px;"></div></body>
<script type="text/javascript" src="http://maps.google.cn/maps/api/js&#63;sensor=false&callback=renderGoogleMap"></script>
<script type="text/javascript">
  function renderGoogleMap() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': '广西桂林市中心广场' }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
    var mapOptions = {
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  }
</script>

</body>
</html>
로그인 후 복사

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿