标签：javascript mobile-safari google-maps-api-3
我有一个移动网页,客户可以通过表单提交或当前位置弹出窗口输入他们的邮政编码,然后找到附近的中心.响应包括这些中心的列表以及显示其位置的谷歌地图插页以及指示列表中指示的中心的引脚.
问题是地图占用了页面上的大量空间.很难向下滚动到地图下方的列表.
我想在Google地图上停用平移功能,以便人们可以触摸地图并在页面上下滚动.但是,我不想完全抑制地图上的所有触摸事件,因为我仍然希望人们能够点击引脚并查看与这些标记一起出现的弹出信息框. Hense为什么我认为静态图像实现可能不是可行的方法.
这是该页面的链接：
http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php
我还是相对较新的Google API,所以我确定我需要自定义一些选项或事件监听器,而我似乎还没有在文档中找到它.
任何帮助或链接将不胜感激.
function setMap(map) {
if ( typeof googleMap != 'undefined' && !changeFlag ) return;
var current = new google.maps.LatLng( f.current.latitude,
f.current.longitude );
var dragFlag = false;
var start = 0, end = 0, windowPos = 0;
zoom = zoom == 0 ? bestZoom() : zoom;
map.html('');
var mapArgs = {
zoom : zoom,
center : current,
mapTypeId : google.maps.MapTypeId.ROADMAP,
backgroundColor : '#FFFFFF',
mapTypeControl : false,
};
if ( !config.panning ) mapArgs['draggable'] = false;
googleMap = new google.maps.Map(map.get(0), mapArgs);
new google.maps.Marker({
position : current,
map : googleMap,
title : 'You Are Here',
icon : 'youarehere.png'
});
movement = 0;
if ( !config.panning && events == 'touch' ) {
map.get(0).addEventListener('touchstart', function(e){
dragFlag = true;
start = events == 'touch' ? e.touches[0].pageY : e.clientY;
},true);
map.get(0).addEventListener('touchend', function(){
dragFlag = false;
}, true);
map.get(0).addEventListener('touchmove',function(e){
if ( !dragFlag ) return;
end = events == 'touch' ? e.touches[0].pageY : e.clientY;
window.scrollBy( 0,( start - end ) );
}, true);
}
for( var i in f.locations ) {
var location = new google.maps.LatLng( f.locations[i].latitude,
f.locations[i].longitude );
var args = {
position : location,
map : googleMap,
};
var marker = new google.maps.Marker(args);
var infoBox = config.infoBox;
var msg = config.infoBox;
for( var x in propertyList ) {
var myExp = new RegExp('{{'+propertyList[x]+'}}');
if( myExp.test(msg) && typeof(f.locations[i][propertyList[x]]) != 'undefined' && f.locations[i][propertyList[x]] != "" )
msg = msg.split('{{'+propertyList[x]+'}}').join(f.locations[i][propertyList[x]]);
else if( myExp.test(msg) )
msg = msg.split('{{'+propertyList[x]+'}}').join('');
}
setMessage(marker,msg);
}
}
function setMessage(marker, msg) {
var infoWindow = new google.maps.InfoWindow({ content : msg });
google.maps.event.addListener(marker,'click',function(){
if ( openBoxes.length > 0 )
openBoxes.pop().close();
infoWindow.open(googleMap,marker);
openBoxes.push( infoWindow );
});
}
更新：我发现如果我设置draggable：false它会阻止地图平移.现在我可以弄清楚当我触摸并拖动地图时如何让页面滚动我会很高兴.
更新：知道了！我将触摸事件附加到谷歌地图容器“地图”,这是有效的！
更新：实际上,我仍然不足.它在我的桌面上工作很好,但不在我的iPhone上.它让我可以向上和向下滚动,但我似乎无法点击任何标记.在我的桌面上,它很棒.页面上下滚动,我可以点击我的图标.我注意到我的标记图标上的点击事件似乎没有被触发.有些事情要阻止它.
解决方法:
我知道了！虽然我不确定为什么会这样.
我通过将map参数设置为false来解决我原来的问题,然后将触摸事件添加到地图容器中,当我上下移动手指时,该容器将向上和向下滚动页面.然而,这引入了一个新问题,现在我再也无法点击标记了.为了让我点击标记并获取信息窗口,我必须点击屏幕上的任意位置. Droid上没有出现问题,仅在iPhone上.另外,我注意到如果我将地图移动到屏幕的左上角,则问题不会发生.
在办公室周围的各种iPhone上进行测试后,从iPhone 3G – 4和iOS 3.1 – 4.2开始,我发现当我得到客户的当前地址时问题就出现了.
为了获得客户的当前位置,我首先尝试使用iPhone和Android浏览器原生的“获取当前位置”弹出窗口.如果他们点击“不允许”,那么他们可以输入他们的邮政编码并以此方式获取.
每次我通过表单提交尝试使用当前位置时,问题似乎都发生了,而不是从弹出窗口,所以我将调试工作集中在那里.
一旦我有了这个邮政编码,我需要将其转换为lat / long.最初,我设置了我的插件来查询我做的名为dataManager.php的php脚本.经理程序将获取zip并向谷歌地图发出卷曲请求以将其转换为邮政编码.然后它会将转换后的位置返回给我的插件.
我没有意识到你可以直接从谷歌地图API地理编码邮政编码.我所知道的只是那个我可以运行查询的网址.因此,我使用API编写了代码以进行地理编码,让流程正常运行.
工作就像一个魅力.现在我点击标记,信息窗口即将出现.虽然,我仍然不确定为什么要修复它.这些东西得到处理的顺序没有任何改变.数据没有不同.所有不同的是第一步.也许这是一个时间问题. API调用比发出两个HTTP请求跃点要快得多.
标签：javascript,mobile-safari,google-maps-api-3 来源： https://codeday.me/bug/20190518/1128436.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。