我有简单的应用程序，应用程序将显示地图。我和科尔多瓦一起建造。我成功获取了我的位置，但没有成功显示地图。
这是我的代码：
<script>
function onDeviceReady() {
var options = { frequency: 3000 }; //THIS I SPECIFY INTERVAL TIME TO SEND POSITIONS
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 3000 });
}
function onSuccess(position) //IF SUCCESS
{
var element = document.getElementById('location_note');
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions={center : new google.maps.LatLng(lat,lang),zoom :4,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+','+position.coords.longitude+'&sensor=false', function(data) {
alamats = data.results[0];//aRRAy to capture address details
al=alamats.formatted_address; //variable to capture Address
});
element.innerHTML="";//APPEND ADDRESS INFO
element.innerHTML = '<center><p><font color="#FFFFFF" face="arial" size="4"> ' + al + '</font><br />' + '</p></center>'; //Success to Display My Address
}
function onError(error) {
alert('code: ' + error.code + 'n' +'message: ' + error.message + 'n');
}
</script>
<body>
<div id="my_location">Address Info here</div>
<div id="map_canvas">PETA</div>
</body>
我得到了地址信息，但地图没有显示。
向地图添加样式：
<style>
#map_canvas {
height: 100%;
width: 100%;
}
</style>
此外，由于 Google 地图不需要设备即可工作，因此您可以在浏览器中对其进行测试和调试。从您的应用程序目录执行以下操作：
ionic serve -c -s
在浏览器中按 F12 并根据需要对其进行编辑。并且不要忘记监视Console选项卡以查看任何可能的错误(例如您发布的代码中的错误，my_location -> location_note(。查看测试文档。
无论如何，我会将应用程序简化到最小的表达式，以尝试使其工作并避免错误(删除地理位置代码、硬编码中心位置等(。
以这个 plunker 为例：https://plnkr.co/edit/gEm60LZwxS2tggceBKOf?p=preview，以及谷歌地图 hello world 的例子。