Cordova在<a href=""></a>中包含GoogleMaps

时间:2014-05-24 13:18:07

标签: html html5 cordova maps

我是Stackoverflow的新手,但我已经阅读了很多内容!

我来自德国,很抱歉,如果不清楚的话。

我是科尔多瓦的新手。我正在为游客编写应用程序。我的应用程序中有一个名为“Card”的按钮。当有人点击按钮时,我想在应用程序中显示我的位置,但这不起作用: - /

我试过的是:

<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';

document.querySelector('article').appendChild(mapcanvas);

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

var marker = new google.maps.Marker({
  position: coords,
  map: map,
  title:"You are here!"
});
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}

</script>

然后在HTML中

<a href="#" onclick="success()"></a>

没有第一个空格,但没有它,堆栈不会显示代码。

我希望,有人可以帮助我。如何更改我的代码以使其工作的教程将非常棒!

问候!

编辑:如何解决这个问题: 伙计们...这很容易!!

我刚刚添加了<a href="#" onclick="window.open('http://www.maps.google.de/', '_blank', 'location=yes', 'presentationstyle=fullscreen')"></a>

到我的按钮......现在打开它就像我想打开它一样!

3 个答案:

答案 0 :(得分:3)

试试这些HTML。它的工作。

 <DOCTYPE html>
        <html>
            <head>
                <script type="text/javascript" src="cordova.js"></script>
        <script src="http://www.google.com/jsapi"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="js/jquery-2.0.2.js"></script>
        <script type="text/javascript">
            google.load('maps', '3', {
                        other_params: 'sensor=false'
                        });

       google.setOnLoadCallback(initialize);

    function initialize() {
                                  initializeMap();
       }

    function initializeMap()
    {
        $("#map").html("");
        map = new google.maps.Map(document.getElementById('map'), {
                                  zoom: 12,
                                  center: new google.maps.LatLng(32.083300, 34.800000),
                                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                                  mapTypeControl:false,
                                  streetViewControl:false,

                                  });
                                  alert("Map Started--------------------");
    }



function getlocation()
{
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
var lnglat;
   var mylocationpng = 'mylocation.png';
   var mymarker=null;
function onSuccess(position)
{
    var lng = position.coords.longitude;
    var lat = position.coords.latitude;

     lnglat = new google.maps.LatLng(lat,lng);
     var currentlocationpng = new google.maps.MarkerImage(mylocationpng,new google.maps.Size(42, 42));
     map.panTo(lnglat);

            if(mymarker==null)
            {
                mymarker = new google.maps.Marker({
                                                  position: lnglat,
                                                  draggable: false,
                                                  icon: currentlocationpng,
                                                  map: map
                                                  });

            }
            else
            {
                //alert('again');
                mymarker.setPosition(lnglat);

            }
        //alert('done');
}

function onError()
{
    alert("Can't show current location");
}


    </script>
</head>
    <body>

    <div id="temp">
    <img src="mylocation.png" width="30" height="30" id="mylocation" onclick="getlocation()"/>
    </div>
    <div id="map"></div>
</body>
</html>

答案 1 :(得分:0)

你的

  

function success(position)

,需要“位置”但是当你调用函数时你不发送它的一切吗?

<a href="#" onclick="success()"></a>

你可以创建函数ex:

> function get_location(){ 
>     if (navigator.geolocation) 
>     { 
>           navigator.geolocation.getCurrentPosition(success); 
>     } else 
>     {
>         error('Geo Location is not supported'); 
>     }  }

并将其称为用户点击

<a href="#" onclick="get_location()"></a>

答案 2 :(得分:0)

以下列方式使用HTML5地理位置:

function getPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (data) {
            var position = data.coords;
            //call your success function
            success(position);
        }, function (error) {
            //whatever
        });
    } else {
        //whatever
    }
}

在您的链接集中点击此功能:

<a href="#" onclick="getPosition()"></a>

在success()函数中使用这样的接收坐标:

var coords = new google.maps.LatLng(position.latitude, position.longitude);

这应该有用。