谷歌地图中的信息窗口无法在 iPhone Phonegap 应用程序中正确显示

发布于 2025-01-07 20:38:24 字数 1611 浏览 0 评论 0原文

我正在显示带有点击事件的自定义标记。当我点击时它会显示信息,但信息窗口显示得不好。我在里面使用了一些CSS。我还需要进一步定制它。该地图显示在 iPhone (iOS 5) 的 PhoneGap 应用程序中。所有其他可用的东西(包括方向、GPS)。 我使用过谷歌地图js v3 API。 我得到了这个输出。 output

如何显示正确的信息窗口?并根据我的需要进行定制。

这是代码

function setMap(myLat, myLng){
    // Define Marker properties
 var image = new google.maps.MarkerImage('images/pick.png',
      new google.maps.Size(30, 40),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 9,36.
      new google.maps.Point(9, 36)
      );

  var my_place = new google.maps.LatLng(myLat, myLng);
  var myOptions = {
  zoom:14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  center: my_place
  }
  mer_map = new google.maps.Map(document.getElementById("mer_map_canvas"), myOptions);
  mer_marker = new google.maps.Marker({
                              position: my_place, 
                              map: mer_map,
                              clickable : true,
                              animation: google.maps.Animation.DROP,
                              icon: image
                              });
var contentString = '<div id="mer_map_info" style="border:3px solid red; color:#FFF; background-color:#000;"><p>this is just a test...</p></div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(mer_marker, 'click', function(event) {
        infowindow.open(mer_map,mer_marker);
        });}

I am showing custom marker with click event on it. It shows information when I clicked but the info window is not showing well. I used some css in it. I also need to customize it further. This map is shown in phonegap app in iPhone (iOS 5). Every other thing working find (including direction, GPS).
I have used google map js v3 API.
I got this output.
output

How to show correct infoWindow? And customize as my need.

here is the code

function setMap(myLat, myLng){
    // Define Marker properties
 var image = new google.maps.MarkerImage('images/pick.png',
      new google.maps.Size(30, 40),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 9,36.
      new google.maps.Point(9, 36)
      );

  var my_place = new google.maps.LatLng(myLat, myLng);
  var myOptions = {
  zoom:14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  center: my_place
  }
  mer_map = new google.maps.Map(document.getElementById("mer_map_canvas"), myOptions);
  mer_marker = new google.maps.Marker({
                              position: my_place, 
                              map: mer_map,
                              clickable : true,
                              animation: google.maps.Animation.DROP,
                              icon: image
                              });
var contentString = '<div id="mer_map_info" style="border:3px solid red; color:#FFF; background-color:#000;"><p>this is just a test...</p></div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(mer_marker, 'click', function(event) {
        infowindow.open(mer_map,mer_marker);
        });}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

柠北森屋 2025-01-14 20:38:24

尝试一下。我在使用phonegap 和谷歌地图时遇到了类似的问题。

#map_canvas img {
max-width: none;
}

Give this a try. I had a similar problem with phonegap and google maps.

#map_canvas img {
max-width: none;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文