如何在android中的phonegap中显示地图上的标记?

时间:2014-04-25 18:26:33

标签: google-maps google-maps-markers

enter image description here我正在为Android开发一个phonegap应用程序,其中我必须显示地图以显示标记,当点击标记时,我想在当前标记上显示气球类型的小窗口,其中包含图像和一些细节

2 个答案:

答案 0 :(得分:0)

根据您的要求尝试此完整代码。在地图上有完整的代码用于创建动态标记。

function initmap(){

function getoverlayer(imageurl,storename,distance){
    var s=   '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+      
  '<div id="bodyContent">'+
  '<div class="map_text_container">'+
  '<div class="map_user_img">'+
  '<img src="'+imageurl+'">'+
  '</div>'+
  '<div class="map_text_div">'+
  '<h3 id="firstHeading" class="">'+storename+'</h3>'+
  '<h4 id="firstHeading" class="">'+distance+' miles </h4>'+
  '<div class="more1">'+
  '<a href="checkin.html" target="_parent" >'+
  'Check in</a> '+
  '</div>'+
  '<div class="more">'+
  '<a href="" onclick="more();" >'+
  'More</a> '+
  '</div>'+
  '</div>'+
  '</div>'+

  '</div>'+
  '</div>';
  return s;
  }


  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {


        //var picurl="http:\/\/sp1\/rippr.wcfservices\/ripprdata\/sellers\/388\/testseller1237899.jpg";
        //var a=picurl.replace('\\','');
        //alert(a);
        var picurl=storedata[i].storelogo;
        //alert(picurl);
        var storename=storedata[i].sellername;
        var lat=currentlocation.coords.latitude;
        var lon=currentlocation.coords.longitude;
        var distance=getDistanceFromLatLonInMile(lat, lon,storedata[i].latitude, storedata[i].longitude);
        //alert(picurl,distance);
        if(distance<=2){
            infowindow.setContent(getoverlayer(picurl,storename,distance));
            infowindow.open(map, marker);
        }
        else{
            infowindow.setContent(getoverlayer(picurl,storename,distance));
            infowindow.open(map, marker);

        }
        //alert('marker id'+ marker.id);
        localStorage.setItem('markerid',marker.id);
    }
  })(marker, i));
}

}

答案 1 :(得分:0)

Google Maps JavaScript API v3在PhoneGap应用中运行,该应用具有许多功能,但运行速度有点慢,因为该API专为PC浏览器而非移动浏览器设计。

Google提供的Google Maps Android API v2运行速度更快,适合移动应用。

phonegap-googlemaps-plugin插件可让您轻松实施Google地图。所以看看吧! enter image description here