IONIC 添加GOOGLE地图(angularJs+googleMap)

最新推荐文章于 2024-06-07 09:44:21 发布

戴子

最新推荐文章于 2024-06-07 09:44:21 发布

阅读量3.9k

点赞数 2

分类专栏： ANGULARJS 移动开发文章标签： IONIC GOOGLE MAP ANGULARJS 谷歌地图

本文链接：https://blog.csdn.net/dailuwen/article/details/49796575

版权

ANGULARJS 同时被 2 个专栏收录

7 篇文章

订阅专栏

移动开发

7 篇文章

订阅专栏

本文介绍如何在IONIC项目中集成Google Maps插件，并通过示例代码演示如何加载地图、设置地图属性及通过地址获取经纬度并显示在地图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个IONIC的移到开发，需添加地图；因为国外应用所以地图插件选择GOOGLE；废话不多说，下面开始上代码；

1、准备条件

angular.module('myApp', ['ngCordova', 'ionic', 'myApp.controllers'])

2、在controller.js文件自定义Controller

.controller('GoogleMapCtrl', ['$scope', function($scope){
			var mapOptions = {
			        zoom: 14,
			        mapTypeId: google.maps.MapTypeId.TERRAIN
			    }

		    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
			$scope.geocoder =new google.maps.Geocoder();
		
		    $scope.infoWindow = new google.maps.InfoWindow();
		    
		    $scope.codeAddress = function() {
				$scope.geocoder.geocode({ 'address': '上海市' }, function(results, status) {
		            if(status == google.maps.GeocoderStatus.OK) {
		            	$scope.map.setCenter(results[0].geometry.location);
		                this.marker =new google.maps.Marker({
		                    title: '上海市',
		                    map: $scope.map,
		                    position:results[0].geometry.location
		                });
		                $scope.infowindow =new google.maps.InfoWindow({
		                    content: '<strong>'+ '上海市' +'</strong><br/>'+'纬度: '+ results[0].geometry.location.lat() +'<br/>经度: '+ results[0].geometry.location.lng()
		                });
		                $scope.infowindow.open($scope.map, marker);
		            }
		        });
		    };
	}])

3、html 页面

<ion-content ng-controller="GoogleMapCtrl">
		<input type="button" ng-click="codeAddress();" value="点击显示上海"/>
		<div id="map" style='height:800px;width:100%;'></div>
	</ion-content>

以上代码经测试，显示正确；