Google Maps API;禁止地图平移以启用页面滚动 [英] Google Maps API; Suppress Map Panning to enable Page Scrolling
问题描述
我有一个移动网页，客户可以通过表单提交或当前位置弹出框输入他们的邮政编码，然后找到附近的中心。响应包括这些中心的列表以及谷歌地图插入，显示它们的位置和引脚，指示列表中显示的中心。
问题是地图占用页面上的很多房地产。它很难滚动到地图下方的列表中。
我想停用Google地图上的平移功能，以便人们可以触摸地图并向上滚动并在页面下方。但是，我不想完全禁止地图上的所有触摸事件，因为我仍然希望人们能够点击引脚并查看与这些标记一起出现的弹出信息框。 Hense为什么我认为静态图像实现可能不是最佳选择。
这是一个指向页面的链接：
http://cs.sandbox.millennialmedia.com /〜tkirchner/sites/K/kumon/zip_page.php
我对Google API还比较陌生，所以我确定有一些选项或事件侦听器我需要自定义，我似乎无法在文档中找到它。
任何帮助或链接，将不胜感激。
函数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 '
}）;
移动= 0;
if（！config.panning&&& event =='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）;
}
}
函数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，从平移的地图。现在我可以想出如何在地图上拖动并拖动页面时滚动页面。我很乐意去。
更新：明白了！我将触摸事件附加到Google地图容器地图上，并且工作正常！
更新：其实，我仍然不足。它在我的桌面上工作正常，但不在我的iPhone上。它可以让我上下滚动，但我似乎无法点击任何标记。在我的桌面上，它的效果很好。页面上下滚动，我可以点击我的图标。我注意到我的标记图标上的点击事件似乎没有被解雇。有些事情必须阻止它。
我明白了！虽然我不确定为什么会出现这种情况。
通过将map参数设置为false，然后将触摸事件添加到地图容器中，我将手指向上移动并向下。但是，这引发了一个新问题，现在我无法再点击标记了。为了让我点击标记并获得信息窗口，我必须点击屏幕上的任意位置。这个问题并没有发生在Droid上，只发生在iPhone上。另外，我注意到如果我将地图移动到屏幕的左上角，问题就不会发生。
在各种iPhone周围进行测试后办公室，从iPhone 3G - 4和iOS 3.1 - 4.2我发现，问题似乎来了，当我得到客户的当前地址。
为了获取客户的当前位置，我首先尝试使用iPhone和Android浏览器本机的获取当前位置弹出窗口。如果他们点击不允许，那么他们可以输入他们的邮政编码并以此方式获得。
每次我通过表单提交使用当前位置时，都会出现这个问题，而不是弹出窗口，所以我将调试工作集中在这一点上。 p>
一旦我有了需要将其转换为纬度/经度的邮政编码，最初，我为它设置了插件来查询我称之为dataManager.php的php脚本。经理程序将采取邮政编码并向谷歌地图发出curl请求，将其转换为邮政编码。然后它会将转换后的位置返回给我的插件。
我没有意识到您可以从Google Maps API中直接对邮政编码进行地理编码。我所知道的就是那个我可以运行查询的网址。所以我编辑我的代码，使用API进行地理编码，让流程正常运行。
像魅力一样工作。现在我点击标记，信息窗口即将到来。虽然，我仍然不确定为什么这会修复它。这些事情得到处理的顺序没有任何变化。数据没有什么不同。所有不同的是第一步。也许这是一个时间问题。 API调用比创建两个HTTP请求跃点要快得多。
I have a mobile webpage in which a customer can enter in their zip code either by a form submit or the current location popup and then find centers that are nearby. The response includes a list of these centers as well as a google maps insert showing their location and pins indicating the centers indicated in the list.
The problem is the map takes up a lot of real estate on the page. Its difficult to scroll down to the listing just below the map.
I'd like to disable the panning feature on the Google Maps so people can touch the map and scroll up and down the page. However, I don't want to completely suppress all touch events on the map because I still want people to be able to click on the pins and view the pop up info box that goes along with those markers. Hense why I thought a static image implementation might not be the way to go.
Here's a link to the page:
http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php
I'm still relatively new to the Google API, so I'm sure there's some option or event listener I need to customize and I can't seem to find it in the documentation just yet.
Any help or links would be appreciated.
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 );
});
}
UPDATE: Well I figured out that if I set draggable : false that it prevents the map from panning. Now I can figure out how to get the page to scroll when I touch and drag on the map I'll be good to go.
UPDATE: Got it! I attached touch events to the google map container "map" and that worked!
UPDATE: Actually, I'm still falling short. Its working on my desktop fine, but not on my iPhone. It lets me scroll up and down fine, but I can't seem to click on any of the markers. On my desktop, it works great. The page scrolls up and down and I can click on my icons. I noticed that the click event on my marker icons doesn't seem to be firing. Somethings gotta be preventing it.
I got it! Although I'm not sure why this is the case.
I solved my original problem by setting the map argument to false and then adding touch events to the map container that would scroll the page up and down as I moved my finger up and down. However, that introduced a new problem in that now I couldn't click on markers anymore. In order for me to click on the markers and get the info window I had to click some arbitrary place on the screen. The problem wasn't occurring on Droid, only on iPhone. Plus, I noticed that if I moved the map to the upper left corner of the screen, the problem didn't occur.
After testing it on a variety of iPhones around the office, ranging from iPhone 3G - 4 and iOS 3.1 - 4.2 I found out that the problem seemed to be coming when I got the customer's current address.
In order to get the customer's current location, I first try to use the "Get Current Location" popup that's native to the iPhone and Android browsers. If they click "Don't Allow" then they can enter in their zip code and get it that way.
The problem seemed to be occurring every time I tried using my current location via the form submit than from the popup window, so I concentrated my debug efforts on that.
Once I had that zip code I needed to convert it to lat/long. Originally, I had it set up for my plugin to query a php script that I made called dataManager.php. The manager program would take the zip and make a curl request to google maps to convert that into a zip code. It would then return the converted location back to my plugin.
I didn't realize that you could geocode zip codes right from the google maps API. All I knew was that url that I could run queries off of. So I edited my code to geocode using the API and let the process run the rest of the way normally.
Worked like a charm. Now I'm clicking the markers and the Info Windows are coming right up. Although, I'm still not sure why this fixed it. Nothing changed in the order that these things get processed. The data wasn't different. All that was different was that first step. Maybe it was a timing issue. The API call is much faster than making two HTTP request hops.
这篇关于Google Maps API;禁止地图平移以启用页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
