如何使用google地图的api(整理)打赏
目录
一、总结一句话总结:直接用script标签引google地图api即可。1、如何使用google地图的api?2、引入外部插件的方法是?3、国内无法使用google服务的原因是什么?二、让国内国外都可以调用Google地图API方法一、统一修改网址为IP地址:方法二、只针对国内浏览者修改:三、Google Map Api 谷歌地图接口整理一:基本知识:二:核心类:三:下面是Google //代码效果参考:http://hnjlyzjd.com/hw/wz_25008.html
API自带控件四:减少浏览器内存泄露五:浏览器兼容性六:相关资料的网址:回到顶部一、总结
一句话总结:直接用script标签引google地图api即可。
1、如何使用google地图的api?
页面引用javascript文件[/span>script src="" type="text/javascript"
自己的实例也是一个放地图的div被调用,然后是一些方法
1 试一下
2
3
4
5 var x=document.getElementById("demo");
6 function getLocation()
1 var map = new Map2(document.getElementByIdx_x_x("map"),{size:GSize(200,200), backgroundColor:"#FF0000"});
2
3 map.addControl(new GSmallMapControl());//添加一个地图左侧的缩放按钮控件
4
5 map.addControl(new GMapTypeControl());//添加地图类型控件包括普通地图、卫星地图、混合地图
6
7 map.setCenter(new GLatLng(37.4419, -122.1419), 13); //实例化一个维度为37.4419、经度为 -122.1419的经纬度实例,然后设置地图的中心。地图缩放值为13
8
9
10
11 // Add 10 markers in random locations on the map
12
13 var bounds = map.getBounds();//得到地图四面的边界值
14
15 var southWest = bounds.getSouthWest();//西南的经纬度
16
17 var northEast = bounds.getNorthEast();//东北的经纬度
18
19 var lngSpan = northEast.lng() - southWest.lng();//经度差
20
21 var latSpan = northEast.lat() - southWest.lat();//维度差
22
23 //实例化一个在本张地图中的一个经纬度
24
25 var point = new GLatLng(southWest.lat() + latSpan Math.random(),
26
27 southWest.lng() + lngSpan Math.random());
28
29 var marker = new GMarker(point);//实例化一个标点
30
31
32
33 //给标点加click事件,当点击标点时弹出一个信息窗
34
35 GEvent.addListener(marker, "click", function() {
36
37 marker.openInfoWindowHtml("hello");
38
39 });
40
41 map.addOverlay(marker);//把标点添加到地图覆盖物
2、引入外部插件的方法是?
一个装外部插件的div,然后在dom里面对这个ediv进行初始化
1 <!DOCTYPE html
2 [/span>html
3 [/span>head
4 [/span>meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
5
6 [/span>body
7 [/span>p id="demo"
8 [/span>button onclick="getLocation()"
9 [/span>div id="mapholder"
10 [/span>script src=""
11 [/span>script
12 var x=document.getElementById("demo");
13 function getLocation()
14 {
15 if (navigator.geolocation)
16 {
17 navigator.geolocation.getCurrentPosition(showPosition,showError);
18 }
19 else{x.innerHTML="Geolocation is not supported by this browser.";}
20 }
21
22 function showPosition(position)
23 {
24 lat=position.coords.latitude;
25 lon=position.coords.longitude;
26 latlon=new google.maps.LatLng(lat, lon)
27 mapholder=document.getElementById('mapholder')
28 mapholder.style.Height</span>='500px';
29 mapholder.style.Width</span>='100%';
30
31 var myOptions={
32 center:latlon,zoom:14,
33 mapTypeId:google.maps.MapTypeId.ROADMAP,
34 mapTypeControl:false,
35 navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
36 };
37 var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
38 var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
39 }
40
41 function showError(error)
42 {
43 switch(error.code)
44 {
45 case error.PERMISSION_DENIED:
46 x.innerHTML="User denied the request for Geolocation."
47 break;
48 case error.POSITION_UNAVAILABLE:
49 x.innerHTML="Location information is unavailable."
50 break;
51 case error.TIMEOUT:
52 x.innerHTML="The request to get user location timed out."
53 break;
54 case error.UNKNOWN_ERROR:
55 x.innerHTML="An unknown error occurred."
56 break;
57 }
58 }
59
60
61
3、国内无法使用google服务的原因是什么?
是国内的GFW有意让dns把maps.google.com域名解析到错误的ip上去,例如:在国内ping maps.google.com的ip是216.58.196.238,在国外服务器上ping maps.google.com的ip是172.217.25.110,虽然这两个IP都是位于美国Mountain View的Google 公司所属IP地址,但前面一个并不提供Maps API,自然造成地图无法显示。
回到顶部二、让国内国外都可以调用Google地图API
2009年开始我们就在网址中调用了Google Maps API,后来Google因故退出中国大陆,Google的多项服务都无法使用,我们就让主要针对国外浏览者的站点继续使用Google Maps API,主要针对国内浏览者的站//代码效果参考:http://hnjlyzjd.com/hw/wz_25006.html
点改用Baidu地图API,不过这样的话,主要针对国外浏览者的站点中的Google Maps API代码就会让少数国内浏览者(包括我们开发者自己)无法看到地图并且严重拖慢网页加载速度。最近同事看到其它国内网址依然在使用Google地图,我去查了一下,先找出问题原因:是国内的GFW有意让dns把maps.google.com域名解析到错误的ip上去,例如:在国内ping maps.google.com的ip是216.58.196.238,在国外服务器上ping maps.google.com的ip是172.217.25.110,虽然这两个IP都是位于美国Mountain View的Google 公司所属IP地址,但前面一个并不提供Maps API,自然造成地图无法显示。
然后在网上搜索解决办法,并且自己在网站中试验了,主要有两种方式可以采用:
方法一、统一修改网址为IP地址:
修改调用API的URL中的maps.google.com,改为直接写一个可用的IP,例如把调用google maps api程序中的
改为:
<script type='text/j