谷歌地图API v3停止信息框从平移地图
Google Maps API v3 stop info box from panning map
我正在创建一个带有Fusion Layer的谷歌地图,这样网站的访问者就可以获得不同州技术人员的信息。以下是可供参考的网站:http://horizonwebtest.zxq.net/techmap.html地图需要锁定到美国大陆,所以我禁用了默认的UI、可拖动、双击缩放、键盘快捷键、滚动轮和自动平移。问题是,当信息窗口弹出时,它仍然会强制地图平移。有人知道解决这个问题的方法吗?这是JavaScript:
// JavaScript Document
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(38.816223025492505, -94.15954943749999),
zoom: 4,
disableDefaultUI: true,
draggable: false,
disableDoubleClickZoom: true,
keyboardShortcuts: false,
scrollwheel: false,
disableAutoPan: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var horizonStyles = [
{
featureType: "water",
stylers: [
{ hue: "#0077ff" },
{ saturation: 20 },
{ lightness: -50 },
]
},{
featureType: "administrative.locality",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.province",
elementType: "labels.text.fill",
stylers: [
{ lightness: -80 }
]
}
];
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '18KqZR_1Nd39CyWN1kKt8Pufd6wlLS2oQArpCugw'
},
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setOptions({styles: horizonStyles});
layer.setMap(map);
}
任何想法都将不胜感激。
经过大量的搜索和尝试,融合层似乎不包含可编辑元素。要编辑信息框,您需要设置suppressInfoWindows:true,然后创建您的信息窗口。以下是完成的代码供参考:
// JavaScript Document
function initialize() {
var latlng = new google.maps.LatLng(38.816223025492505, -94.15954943749999);
var infoposition = new google.maps.LatLng(40, -81);
var infowindow = new google.maps.InfoWindow({
disableAutoPan: true,
position: infoposition,
});
var infoWindowContent = '';
var mapOptions = {
center: latlng,
zoom: 4,
disableDefaultUI: true,
draggable: false,
disableDoubleClickZoom: true,
keyboardShortcuts: false,
scrollwheel: false,
disableAutoPan: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var horizonStyles = [
{
featureType: "water",
stylers: [
{ hue: "#0077ff" },
{ saturation: 20 },
{ lightness: -50 },
]
},{
featureType: "administrative.locality",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative.province",
elementType: "labels.text.fill",
stylers: [
{ lightness: -80 }
]
}
];
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '18KqZR_1Nd39CyWN1kKt8Pufd6wlLS2oQArpCugw',
},
suppressInfoWindows: true,
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
map.setOptions({styles: horizonStyles});
layer.setMap(map);
//click listener on layer
google.maps.event.addListener(layer, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow;
//create info window layer
infoWindowContent = infowindow.setContent(
'<p class="info_window" style="font-weight: bold">' + e.row['State'].value + '</p>' +
'<p class="info_window">' + e.row['Number of Technicians'].value + ' technicians available<br>' +
'<a href="http://horizonwebtest.zxq.net/contact/">Click here to schedule a service call or installation<br>' +
'or <style="font-weight:bold">CALL 727-845-4444 NOW</style> for a live help desk<br>' +
'person to assist you over the phone or to dispatch<br>' +
'a technician to your site.</a></p>'
);
map.setCenter(latlng);
infowindow.open(map);
});
}
我希望这能帮助其他人。。。
相关文章:
- 将FlowPlayer嵌入谷歌地图信息窗口
- 当我浏览回页面时,谷歌地图信息窗口不会弹出
- 谷歌地图信息窗口Z索引
- 谷歌地图信息窗口为每个标记显示相同的内容
- 更新打开的谷歌地图信息窗口
- Google 地图信息窗口仅显示首次点击时的信息
- 角度:编译谷歌地图信息窗口内容以使用ng-click
- 如何从数据库中填充谷歌地图信息框
- 一些原型与谷歌地图信息窗口
- 谷歌地图信息框位于标记旁边,而不是标记上方
- 谷歌地图信息窗口事件打开
- 将 on('change') 的事件侦听器添加到 Google 地图信息窗口
- 为 Google 地图信息框创建自定义关闭按钮
- 流星 - 谷歌地图信息窗口事件未触发
- 将加载指示器添加到谷歌地图信息窗口
- 谷歌地图信息框能够显示JQuery UI小部件
- 无法读取未定义的属性“打开”.谷歌地图信息窗口循环
- 谷歌地图信息窗口未从变量加载内容
- 谷歌地图信息窗口未打开
- 自动打开谷歌地图信息窗口