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

简介: 技术心得记录:如何使用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

相关文章
|
2月前
|
机器学习/深度学习 JSON 监控
如何通过API技术提升电商客户忠诚度:构建智能化客户关系引擎
在电商竞争激烈的当下,客户忠诚度成为核心壁垒。通过API技术构建智能化客户关系系统,整合全渠道数据,实现个性化推荐与自动化运营,提升用户黏性与复购率。结合实时行为分析、差异化定价、积分系统等手段,打造高效忠诚度管理体系,助力企业实现长期增长。
56 1
|
2月前
|
JSON API 开发者
天猫商品详情API接口技术解析与Python实现
天猫商品详情API(tmall.item_get)通过商品ID获取商品标题、价格、库存、图片、SKU及评价等详细信息,支持HTTP请求与JSON格式返回,适用于电商数据分析与运营。本文提供Python调用示例,实现快速接入与数据解析。
|
2月前
|
自然语言处理 供应链 前端开发
深度解析与技术实践:高效调用淘宝商品评论API的策略与代码实现
本文深入解析淘宝开放平台商品评论接口(Taobao.item_review),涵盖接口功能、调用逻辑与实战代码,助力开发者高效获取用户评价数据,提升电商数据分析能力。
|
3月前
|
缓存 安全 API
RESTful与GraphQL:电商API接口设计的技术细节与适用场景
本文对比了RESTful与GraphQL这两种主流电商API接口设计方案。RESTful通过资源与HTTP方法定义操作,简单直观但可能引发过度或欠获取数据问题;GraphQL允许客户端精确指定所需字段,提高灵活性和传输效率,但面临深度查询攻击等安全挑战。从性能、灵活性、安全性及适用场景多维度分析,RESTful适合资源导向场景,GraphQL则适用于复杂数据需求。实际开发中需根据业务特点选择合适方案,或结合两者优势,以优化用户体验与系统性能。
|
3月前
|
JSON 数据可视化 API
产品经理的技术必修课:四步掌握API设计核心逻辑
产品经理的技术必修课:四步掌握API设计核心逻辑
195 83
|
3月前
|
缓存 负载均衡 网络协议
电商API接口性能优化技术揭秘:缓存策略与负载均衡详解
电商API接口性能优化是提升系统稳定性和用户体验的关键。本文聚焦缓存策略与负载均衡两大核心,详解其在电商业务中的实践。缓存策略涵盖本地、分布式及CDN缓存,通过全量或部分缓存设计和一致性维护,减少后端压力;负载均衡则利用反向代理、DNS轮询等技术,结合动态调整与冗余部署,提高吞吐量与可用性。文中引用大型及跨境电商平台案例,展示优化效果,强调持续监控与迭代的重要性,为电商企业提供了切实可行的性能优化路径。
|
2月前
|
人工智能 算法 数据挖掘
API技术助力跨境电商破解物流困局
跨境电商物流效率影响复购与口碑。传统模式存在信息割裂、清关慢、配送不可控等问题。API技术通过数据联通与自动化,重构物流体验:实现全链路追踪、智能清关、动态路由,提升效率,降低成本,助力构建全球智能供应链。
43 0
|
2月前
|
人工智能 自然语言处理 测试技术
AI时代,Apipost和Apifox如何利用AI技术赋能API研发测试管理所需?
在数字化转型加速背景下,API成为企业互联互通的关键。Apipost与Apifox作为主流工具,在AI赋能方面差异显著。Apipost通过智能参数命名、接口设计自动化、测试用例生成、断言自动化等功能大幅提升研发效率和质量,尤其适合中大型企业及复杂业务场景。相比之下,Apifox功能依赖手动操作较多,适用性更偏向初创或小型项目。随着AI技术发展,Apipost展现出更强的智能化与前瞻性优势,为企业提供高效、稳定的API管理解决方案,助力其在竞争激烈的市场中实现创新突破。
93 0
|
3月前
|
存储 安全 API
区块链技术:为电商API接口应用前景筑牢安全与效率之基
区块链技术凭借其去中心化、透明性、安全性和不可篡改性,为电商API接口带来了全新机遇。它可提升数据安全性、增强交易透明度、优化供应链管理,并降低运营成本。应用场景包括数据加密传输、分布式存储、智能合约权限管理、商品溯源防伪及实时结算。尽管面临性能、隐私保护与监管等挑战,随着技术进步与融合创新,区块链将在电商API中实现更智能、高效的应用,推动行业变革升级。