技术心得记录:如何使用google地图的api(整理)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 技术心得记录:如何使用google地图的api(整理)

如何使用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

相关文章
|
16天前
|
缓存 监控 API
淘宝 API 接口使用的技术要点与注意事项
在数字化商业环境中,淘宝API为开发者提供了强大的工具,用于与淘宝平台交互,获取商品信息及处理交易等。本文总结了正确使用API的关键技术要点:注册认证、理解接口文档、遵守调用限制、确保参数准确性、保护数据安全、处理异常、性能优化、版本兼容、合规性及日志监控,帮助开发者实现高效、安全的程序开发。
|
11天前
|
设计模式 测试技术 API
Micronaut魔法书:揭秘构建超光速RESTful API的绝密技术!
【9月更文挑战第10天】在现代Web开发中,构建RESTful API至关重要。Micronaut作为一款轻量级框架,能够快速创建高效API。本文探讨使用Micronaut构建RESTful API的最佳设计模式与实践,涵盖注解(如`@Controller`、`@Get`)、代码组织、REST原则、数据验证及测试等方面,帮助开发者构建结构清晰、可维护性强的API服务。示例代码展示了如何使用Micronaut实现用户管理API,强调了良好设计模式的重要性。
26 3
|
1月前
|
弹性计算 API 开发工具
揭秘Python与阿里云API的神秘邂逅!流式处理的魔法之旅,一场颠覆想象的技术盛宴!
【8月更文挑战第15天】在数字世界的广阔舞台上,Python与阿里云API的相遇,就像是一场命中注定的邂逅。它们携手共舞,为我们带来了流式处理的魔法之旅。本文将揭开这场神秘邂逅的面纱,带你领略Python与阿里云API之间的奇妙互动。让我们一起踏上这场颠覆想象的技术盛宴,探索流式处理的无限可能!
72 7
|
1月前
|
缓存 JSON 监控
构建一个健壮的API:设计原则与技术实践
【8月更文挑战第10天】构建一个健壮的API需要遵循一系列的设计原则和技术实践。从明确API目标与范围、遵循RESTful原则、注重安全性设计、优化性能、实施监控与日志记录到版本控制,每一步都至关重要。通过不断迭代和优化,我们可以打造出更加稳定、高效、易用的API,为用户提供更好的服务体验。
|
25天前
|
Java API 网络安全
探索Java中的Stream API:从基础到高级应用云计算与网络安全:技术融合与挑战
【8月更文挑战第27天】在Java的海洋中,Stream API犹如一艘强大的船,让开发者能以声明式的方式处理集合数据。本文将启航,先带你了解Stream的基本概念和用法,再深入探讨其高级特性,如并行流、管道操作以及性能考量。我们将通过具体代码示例,展示如何高效利用Stream API简化数据处理流程,提升代码的可读性和性能。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往更优雅编程风格的大门。
|
2月前
|
安全 物联网 API
API技术之身份认证
【7月更文挑战第29天】身份认证是API安全的核心,确保API可信可控。
|
1月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
28 0
|
1月前
|
缓存 测试技术 API
电商平台 API 接入技术要点深度剖析
这段内容详述了电商API接入的关键步骤:首先,深入了解API文档以明确功能权限及数据格式;其次,选择恰当的接入方式如RESTful API或RPC;接着实施身份验证与授权保障数据安全;处理数据传输与异常情况;利用缓存和并发提升性能;采用加密手段和限流策略加强安全防护;持续监控API状态并记录日志;最后,通过充分测试确保稳定性和进行版本管理以适应API迭代。
|
2月前
|
人工智能 自然语言处理 API
深度融合与创新:Open API技术促进AI服务生态构建
【7月更文第21天】在数字化转型的浪潮中,人工智能(AI)已从概念探索走向实际应用,深刻改变着各行各业。Open API(开放应用程序接口)作为连接技术与业务的桥梁,正成为推动AI服务普及和生态构建的关键力量。本文将探讨Open API技术如何通过标准化、易用性和灵活性,加速AI服务的集成与创新,构建一个更加丰富多元的AI服务生态系统。
87 2