Question

我正在尝试在GoogleMaps中实现弹出式上下文菜单。我发现的最好的Google搜索结果是2012年的StackOverflow帖子

（在顶部给出的四个示例中，两个URL不再起作用 - 但在后面的评论中给出了一些其他选项）

我调查了那里提到的四个代码选项，决定了

中提到的Pearman代码

http://googlemapsmania.blogspot.com/2012/04/create-google-maps-context-menu.html

最适合我的情况。然而，当我实现它时，我发现了一个问题 - 我后来确定它也出现在他原来的例子中

http://code.martinpearman.co.uk/googlemapsapi/contextmenu/1.0/examples/advanced_example.htm

当一个人知道要寻找什么。（这也发生在我找到的原始代码的后续分支中）。只要不移动地图，所有工作都按预期工作，弹出菜单位置由鼠标单击的位置改变，使得整个菜单在地图区域内始终可见。但是如果移动了地图，则可以按照下面示例中的左下角切换弹出窗口（我首先将Norwich移动到角落，然后右键单击它）

查看代码，我看到它使用了GoogleMaps Overlay。稍微阅读一下，我得到的印象是，当移动叠加层时，需要完成/更新“某些东西”。但是我超出了我的知识水平和完全理解我正在阅读的内容的能力，所以我希望能在这里找到一些帮助/见解。希望找出一个通用的解决方案，以帮助实施Pearman代码的其他人。

Answer 1

解决方案

在研究这个问题时进行了大量的搜索和测试以及错误的转变，但最终得到了一个解决方案 - 当然看起来很明显＆＃34;在一个人最终排除了正在发生的事情之后。

简短回答：GM Overlay＆＃34; fromLatLngToDivPixel＆＃34;返回的值功能代表＆＃34; GM DIV＆＃34;因此在GM地图上的位置，而＃34; fromLatLngToContainerDiv＆＃34;值代表＆＃34; map_canvas DIV＆＃34;因此观察到的地图边界。因此，菜单的实际放置必须基于＆＃34; fromLatLngToDivPixel＆＃34;但是测试它在map_canvas DIV中的可见性必须基于来自＆＃34; fromLatLngToContainerDiv＆＃34;的值。有时候，不同函数返回的值是相同的，但有时候不一样 - 前者似乎是在地图是静态的时候发生的，后者则是在移动/拖动地图时发生的。

答案很长：

原始Pearman代码的相关部分是，＆＃34; left＆＃34; ＆＃34; top＆＃34;稍后在菜单的CSS样式中使用，以设置其位置：

var mousePosition=this.getProjection().fromLatLngToDivPixel(this.position_);
var left=mousePosition.x;
var top=mousePosition.y;
if(mousePosition.x>mapSize.width-menuSize.width-this.pixelOffset.x){
  left=left-menuSize.width-this.pixelOffset.x;
} else {
  left+=this.pixelOffset.x;
}
if(mousePosition.y>mapSize.height-menuSize.height-this.pixelOffset.y){
  top=top-menuSize.height-this.pixelOffset.y;
} else{
 top+=this.pixelOffset.y;
}

我发现了以下关于＆＃34; fromLatLngToContainerPixel＆＃34;的有用评论。在How to call fromLatLngToDivPixel in Google Maps API V3?，这导致我修复

...这对我来说最适合我，但如果我把地图平移了   像素位置未更新。 ...
  ...使用fromLatLngToContainerPixel而不是fromLatLngToDivPixel   解决了我在平移地图后像素位置未更新的问题。   Roger Ertesvag

查看＆＃34; fromLatLngToDivPixel＆＃34;返回的值，它们有时对包含地图的map_canvas DIV无效（即有时大于DIV的大小），而＆＃34; fromLatLngToContainerPixel＆＃34 ; DID产生明显有效的值。但看似明显的＆＃34;修复＆＃34;简单地替换＆＃34; fromLatLngToDivPixel＆＃34;与＆＃34; fromLatLngToContainerPixel＆＃34;菜单没有出现，经常产生很多怪异。

我现在收集了＆＃34; mousePosition＆＃34; ＆＃34; fromLatLngToDivPixel＆＃34;返回的值适用于＆＃34; GoogleMaps DIV＆＃34; （仍然不清楚究竟是什么）但不适合map_canvas DIV。因此，我的修复＆＃34;是使用＆＃34; fromLatLngToDivPixel＆＃34;为＆＃34;基地＆＃34;菜单位置，但使用来自＆＃34; fromLatLngToContainerPixel＆＃34;的值在map_canvas DIV中测试和改变它的显示。

具体而言，我现在使用以下代码而不是原作，而是成功运作。

var mousePosition=this.getProjection().fromLatLngToDivPixel(this.position_);
var left=mousePosition.x;
var top=mousePosition.y;
// my fix below, adjusting location based on nearness of map area boundary
var containerPosition=this.getProjection().fromLatLngToContainerPixel(this.position_);
if(containerPosition.x>mapSize.width-menuSize.width-this.pixelOffset.x){
  left=left-menuSize.width-this.pixelOffset.x;
} else {
  left+=this.pixelOffset.x;
}
if(containerPosition.y>mapSize.height-menuSize.height-this.pixelOffset.y){
  top=top-menuSize.height-this.pixelOffset.y;
} else {
  top+=this.pixelOffset.y;
}

Answer 2

PS：作为对想要将Pearman代码用于其上下文菜单的人的说明，我实际上是使用基于它的分支代码（现在已更改）

https://github.com/knezmilos13/google-maps-api-contextmenu

fork增加了为菜单项设置全局类名的功能，但这并不是我使用它的原因。对我来说，原始的Pearman代码有时产生一个“粘性”菜单，即菜单在应该关闭之后仍然显示，特别是在第一次使用菜单时，但是使用分叉代码没有发生这种行为。不知道差异的原因，没有进一步调查。

Google地图上下文菜单 - Pearman代码

2 个答案: