Google Map V3--geocode与fitBounds方法的同步操作
google.maps.Geocoder类的geocode方法与google.maps.Map类的fitBounds都是异步方法, 在页面上添加google map的引用就可以使用这些类, 现在的一个问题是我想页面上所有map相关的数据加载完再进步下一步操作该如何实现?
场景
- 页面中有一个Select标签, 存放全国各城市的信息,
- 一个640px高度和宽度的正方型div, 用来加载地图.
- 一个输出按钮
在select标签中选择一个城市后, 用异步方式与服务器会话并取回这个城市所有的苹果专卖店的地址, div中显示被选中的城市并用Marker标出所有的苹果专卖店, 点击输入按钮将适合的zoom level和地图中心点坐标传回服务端生成报表再输出到客户端
理想操作
- 选择一个城市
- div中显示对应的城市并标出所有苹果专卖店
- 点击输出按输出一张报表并内嵌一个地图
上面按1, 2, 3的顺序是一个理想化操作, 但实际情况是对地址进行geocode的过程是异步的, 调用的fitBounds方法也是异步的。也就是说当你点击输出按钮时, 地图并没有完全设置好,这些苹果专卖店的Marker可能在地图上还没有表示出来, 而且一个城市的苹果专卖店都比较分散, 可能不会在地图中显示所有的Marker。想解决这个问题就要同步gecode和fitBounds方法. 但是这两上方法原生就是异步的, 没有同步方法
解决办法
添加2个int型变量, loadingItems和loadedItems。当添加Marker时将loadingItems的值自增1。调用geocode方法解析地址为LatLng对象,在回调函数中将loadedItems值自增1,并执行mapObj.fitBounds(results[0].geometry.viewport) 方法, fitBounds方法会引发bounds_changed事件. 在bounds_changed事件中, 如果loadingItems和loadedItems相等就证明所有Marker加载完毕, 并执行输出按钮的相应逻辑, 代码如下
var mapObj = new google.maps.Map(document.getElementById(targetContainer), mapOptions);var bounds = new google.maps.LatLngBounds();bounds.count = 0;bounds.extendNew = function (latLng) {this.extend(latLng);this.count++;};
function EventBind(target, eventName, func) {var f = func; google.maps.event.addListener(target, eventName, function (event) { func(event); }); }
EventBind(mapObj, "bounds_changed", function () {if (loadingItems == loadedItems) {if (allLoadedEvent != null) { loadedItems = -1; allLoadedEvent(); } } });
function AddMarkerWithBlurIcon(strAddress) {var geocoder1 = new google.maps.Geocoder(); loadingItems++; geocoder1.geocode({ "address": strAddress }, function (results, status) {if (status == google.maps.GeocoderStatus.OK) {var markerImage = new google.maps.MarkerImage( "http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png",new google.maps.Size(20, 32),new google.maps.Point(0, 0),new google.maps.Point(0, 32) ); loadedItems++; mapObj.fitBounds(results[0].geometry.viewport); bounds.extendNew(results[0].geometry.location); var markerObj = new google.maps.Marker( { map: mapObj, position: results[0].geometry.location, icon: markerImage, draggable: true }); } }); }
allLoadedEvent就是输出按钮的逻辑,allLoadedEvent在下面的方法中添加进来
function ExecuteWhenMapLoadedAll(action, runNow) { allLoadedEvent = action;if (runNow == true) mapObj.fitBounds(bounds); }
在bounds_changed事件中当loadingItems == loadedItems条件成立时就会自动执行allLoadedEvent 。
另一个问题: 当页面有多个地图, 只有所有地图的数据全部加载完以后再执行相应的代码
将上面的代码封装为一个名为GoogleMapHelper的函数, 假设有2个地图,那么
var m1 = new GoogleMapHelper();var m2 = new GoogleMapHelper(); m1.Initialize();m2..Initialize(); m1.ExecuteWhenMapLoadedAll(function (){/*m1的逻辑代码*/ m2.ExecuteWhenMapLoadedAll(function (){/*最终需要执行的代码*/ __doPostBack(“<%= this.btnReport.ClientID %>", ""); }, true);}, false);
转载于:https://www.cnblogs.com/terrysun/archive/2012/01/13/2321346.html
Google Map V3--geocode与fitBounds方法的同步操作相关推荐
- wordpress中Google Map V3 for IDN 插件的使用
一.配置 插件安装成功之后,可在"settings" 下找到"Google Map V3 for IDN " 的配置.见下图 在配置中需要输入GoogleMap ...
- 使用google map v3 api 开发地图服务
API学习地址 其实google map的api很简单的,这里是学习文档的传送门http://code.google.com/intl/zh-CN/apis/maps/documentation/ja ...
- google map v3 地图搜索功能
第一次做google map 开发,对很多东西不熟习,除了看api外,就是各种尝试.也谢谢帮我的 睥睨 在下班前,把这些整理了下传上来,方便自己以后用到,同时也给做map开发的新人一点提示吧 func ...
- google map v3离线版地图
包含的文件夹格式如下: 程序运行效果如下: 页面代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 2021年在vue中使用 Google Map
目前在vue中使用google map有以下两种方法: 一.使用 JavaScript 创建地图实例 该方法优点在于可配置项多,方便自定义,缺点是较复杂,且文档为英文,有一定学习难度. 在开始之前确保 ...
- java google map_java如何通过google map api实现地址解析
地址解析就是将地址(如:广东省广州市)转换为地理坐标(如经度:113.26442,纬度:23.129074)的过程.google map api提供两种方法实现地址解析. 第一种,是通过使用 GCli ...
- google map api v3 的marker使用label的方法(markerwithlabel的使用)
简介 公司有个需求就是需要实现在marker下面显示标题的名称,百度地图api里面这些东西都有,但是google查了一遍api,却没有找到,通过搜索发现了markerwithlabel这样一个组件,能 ...
- Google Map API v3 - 设置边界和中心
本文翻译自:Google Map API v3 - set bounds and center I've recently switched to Google Maps API V3. 我最近切换到 ...
- Google Map API V3开发(5)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
最新文章
- 《C++成员函数重载、覆盖与隐藏》
- jittor和pytorch生成网络对比之wgan_gp
- java框架篇---Struts2的处理流程
- 利用java实现的一个发送手机短信的小例子
- .NET Core 管道
- bzoj 3101: N皇后
- 【毕业设计/Matlab系列】基于matlab的线性调频信号的仿真
- Godot 2D碰撞体节点
- 修改title旁边的小图标
- Orcad Schematic常用功能
- 华为云照片的爬虫程序更新(python3.6)
- php处理emoji表情方法,PHP实战:3种方法轻松处理php开发中emoji表情的问题
- 怎样在线将图片制作成圆角图样式
- acorr_ljungbox(data, lags = 1)报错:ufunc 'isnan' not supported for the input types, and the inputs cou
- 事件监听中的冒泡流和捕获流有趣现象
- NOTIFIER诺帝菲尔消防主机电源维修及日常维护
- Suzy找到实习了吗Day 18 | 二叉树进行中:513 找树左下角的值,112 路径总和 ,106.从中序与后序遍历序列构造二叉树
- 幻影显示连接不到服务器,魂之幻影进不去怎么办 魂之幻影进不去解决方法
- go遍历目录对lua进行xxtea加密工具
- Funcode桌球游戏源代码(可直接复制运行)
热门文章
- python协程编程实例_Python异步编程之协程任务的调度操作实例分析
- 两个数组进行比较_LeetCode 718. 最长重复子数组 | Python
- mybatis学习笔记(3)—数据库和bean名称不一样处理方案
- python编程实战(二):一文教你生成随机验证码!大小写字母与数字组合,位数可以控制
- 排序算法系列:插入排序算法
- ar9344 9382 8035 编程器固件_沈阳熔铜炉设计,紧固件加热炉_宏祥电炉
- 微信小程序 与后台服务器交互,微信小程序 与后台交互----传递和回传时间
- html获取xml分页,JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
- 收益 or 挑战?Serverless 究竟给前端带来了什么
- oracle中常见ck和fk是什么,Oracle常用知识总结