关于谷歌Google Maps JavaScript API 的学习与分享

HackerShell 发布于2019-08-02 15:20 / 1203人阅读

摘要：最近参与页面插入谷歌地图的项目，因此在此分享下我的学习经验，第一次写，请多担待首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现，展示详细信息以及对应的产品。

最近参与页面插入谷歌地图API的项目，因此在此分享下我的学习经验，第一次写，请多担待！

首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现model，展示详细信息以及对应的产品。

加载谷歌API并插入页面



  
    
  
  
    My Google Maps Demo

并且公司需要我们在地图高度变高时，需要对标签进行统计，正好Google maps api中正好有对这一方面进行设计，就是‘Marker Clustering’ 【标记聚类】

如果需要对聚类标签进行样式修改，可以使用：

map.data.Setstyle(function(){
          var magitude = featrue.getProperty("map");
          return {
             icon:getCircle(magitude);
            
          }
});
function gitCircle(magitude){
         var circle = {
               path:google.maps.Symbolpath.CIRCLE,
               scale:magnitude,
         };
         return circle;
  }

gitCircle() 绘制了一个自定义的圆形，并且回调会maps作为自定义标签。

初始化渲染完地图后，需要对地图的交互动作进行监听

自我认为经常用到的动作事件：

bounds-changed：界面发生变化

center-changed：中心点发生变化

click：单击

dbclick:双击

drag:拖动

heading-changed:标题改变

maptypeid：地图样式改变

mousemove：在地图中移动

rightclick:高度点击

zoom-changed:地图高度发生改变

添加事件：

map.addListener("dbclick",function(){})

标记点添加事件：

markers.map(function(v){
    v.addListener("click",function(){})
})

删除事件：[removeListener]

并且项目中有一需求，需要对详细地址进行转换为经纬度，因此需要采用Google Maps Geocoding API请求接口

将地址信息转换为经纬度：

$.get("https://maps.googleapis.com/maps/api/geocode/json?address="地址信息"&key=YOUR_API_KEY"，(data)=>{
        latLng = data.results[0].geomety.location
})

将经纬度转换为地址信息

$.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=经度,纬度&key=YOUR_API_KEY",=>(data){
     inWhere = data.plus_code.compound_code 
})

以上是我在一个小项目中主要参考的google maps API 以及 Google Maps Geocoding API 的地方

具体文档：
google maps API

Google Maps Geocoding API

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54059.html

关于谷歌Google Maps JavaScript API 的学习与分享

摘要：最近参与页面插入谷歌地图的项目，因此在此分享下我的学习经验，第一次写，请多担待首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现，展示详细信息以及对应的产品。最近参与页面插入谷歌地图API的项目，因此在此分享下我的学习经验，第一次写，请多担待！首先，讲下项目的需求，在网页进行点击产品列表，渲染对应的地图信息以及对...

silenceboy 2019-08-23 18:09 评论0 收藏0
谷歌服务：Google Maps JavaScript API

摘要：使用前准备能访问外网，有账户。进入开发者控制台谷歌开发者控制台创建项目初次需要创建一个项目，作为使用的依托。我们创建名为的项目，进入后再选择和服务模块。密钥是使用的必须的标识符，可以多地多方使用。的很多服务不是静态的可以与对比。使用前准备能访问外网，有Google账户。进入开发者控制台谷歌开发者控制台 showImg(https://segmentfault.com/img/b...

since1986 2019-08-22 17:01 评论0 收藏0
谷歌地图 API 开发之新建地图

摘要：最近项目用到谷歌地图，但是看谷歌文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。显示了整个地球地图的完全缩放。最近项目用到谷歌地图，但是看谷歌api文档，对于国人来说，还是比较吃力的，网上找资料也并没有太多的资料，所以就想分享给大家。但是因为本人太懒了，每次研究技术完事时间一久就忘了，更别提分享了，在朋友的鼓励支持之下，重新开始写博客，共享给大家...

Winer 2019-08-22 10:34 评论0 收藏0
谷歌地图 API 添加形状

摘要：谷歌地图形状官网简介您可以向地图添加各种形状。移除园如需移除地图中的圆，请调用方法，并传递作为其自变量。将形状设置为可拖动默认情况下，在地图上绘制的形状位置固定。最近加班真是累成狗啊，天天10点以后下班。还有其他的事情，总之都是要死要死的感觉，苦逼的程序员。谷歌地图形状官网：https://developers.google.com... 简介您可以向地图添加各种形状。形状是地图上...

xiaoxiaozi 2019-08-21 14:21 评论0 收藏0