艺灵设计

全部文章
×

摸索谷歌地图之实现定位及搜索地点功能

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2018-07-23 11:35:07 - 阅: - 评:0 - 积分:0

摘要:
昨天的文章中介绍了如何申请谷歌地图API的密钥和对密钥进行一些限制,今天接着来实现一个小案例。我们来调用Google地图和进行实现搜索地点功能。文章末尾有源码下载链接,有需要的看官可以进行下载。

天下武功,唯快不破!欲上谷歌,必先翻墙!如果看官仍没有学会“飞檐走壁”,那就等学会了再来看这篇教程吧~

接着昨天的说,昨天说完了申请谷歌地图密钥的事情,今天就是来进行demo演示了。不知道怎么申请密钥的可以看上一篇文章《戳我看如何申请谷歌地图密钥

一、页面加载maps.googleapis.com/xxx.js

新建一个html页面,引入jquery库后在页面中接着加载Google地图的jshttps://maps.googleapis.com/maps/api/js?key=你的Google地图密钥&callback=initMap&sensor=false 其实jq库不引入也是可以的。不过为了方便,还是引入下吧。

注意上面Google地图js中黄色高亮的部分,第一处用汉字标明了,看官应该知道怎么修改了。第二处的initMap是一个自定义的回调函数,也可以不写&callback=xxxx。如果写了就需要定义,否则控制台会报如下错误:message:"initMap is not a function" ,如图:不提前定义回调函数的话会报错不提前定义回调函数的话会报错至于怎么使用这个回调函数,可以看下谷歌官方的教程,Maps JavaScript API Overview (把密钥使用到项目中)。咳咳,括号中的中文仅仅是艺灵私自添加的提示,方便看官理解这个链接是要干嘛的,跟英文无关!

二、简单的案例演示

如果看官戳了上面的那个链接的话,会看到一些例子的源代码并且还有在线演示链接哦!都不用写代码了,直接复制到本地换下密钥就能跑!是不是很赞!?如图:修改源码中key为自己的密钥即可看到效果修改源码中key为自己的密钥即可看到效果当然了,这一切的前提都是:看官已经练成了“飞檐走壁”这种入门级的武功。为了照顾部分还没有练成飞檐走壁武功的看官,艺灵在这里提供一张渲染后的截图。如图:修改密钥后成功加载指定经纬度地图修改密钥后成功加载指定经纬度地图

三、解决谷歌地图缩放问题

上面的地图上光秃秃的,也没个icon图标提示啥的。看官别急,我们可以通过设置参数来实现。谷歌官方api是有提供的, Adding a Google Map with a Marker to Your Website(戳我看如何设置标记),同样,我们可以把官方的代码拷贝到本地,修改下密钥就能跑。但此时有新的问题了,什么问题呢?那就是:鼠标滚轮缩放需要同时按钮Ctrl键,如图:按住Ctrl并滚动鼠标滚轮才能进行地图缩放按住Ctrl并滚动鼠标滚轮才能进行地图缩放艺灵感觉这种操作的用户体验不是太好,于是又在官网找到了一篇文章, Controlling Zoom and Pan(解决Ctrl+滚轮缩放地图),其实我们只需要配置一个参数:gestureHandling: 'greedy'即可。核心代码如图:gestureHandling-greedy解决按住Ctrl才能缩放的问题gestureHandling-greedy解决按住Ctrl才能缩放的问题

四、搜索定位功能

因为这个项目需要在前台展示谷歌地图,所以后台也需要提供谷歌地图进行搜索位置的功能。啥意思呢?如图:谷歌地图搜索白宫后显示经度和纬度以及更新地图谷歌地图搜索白宫后显示经度和纬度以及更新地图就是在输入框中输入地点,然后点击后面的搜索按钮,此时会更新经度纬度,以及下方地图和标识。当然了,这个操作也是需要调用API接口的。具体是Geocoding API 这个api,戳我看官方使用教程。说直白点,就是一个ajax异步请求的操作。当我们点击搜索按钮时,向https://maps.googleapis.com/maps/api/geocode/json?address=要搜索的地址&key=上一篇中获取的密钥这个接口发送一个请求,然后根据返回状态进行渲染页面。来看下相关代码截图吧!如图:搜索功能相关源码搜索功能相关源码

五、在线体验谷歌地图搜索功能

至此,一个带预览及实现搜索功能的谷歌地图就这么搞定了。已练成“飞檐走壁”的看官可以戳我体验下谷歌地图的搜索及定位功能吧!

六、源码下载

下载地址:[源码]最新Coogle地图使用及实现搜索功能  积分:30因为艺灵对密钥key做了限制,所以看官在下载后并不一定在本地都能跑。至于为什么要加限制,因为调用 接口要钱啊!而且钱不是由艺灵出的。看官只需要更新key值即可在本地跑程序了。

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2018-07-23/google-maps-search.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: Google地图 API密钥 ctrl缩放 gestureHandling callback 翻墙vpn InfoWindow google.maps Geoc

上一篇: 摸索谷歌地图之申请Google地图及创建API密钥   下一篇: 摸索谷歌地图之密钥使用HTTP引荐来源时报错

评论区