Question

我正在使用 Laravel 与 vue.j 一起使用 Google地图，我在找到任何其他地方时遇到问题 map 并且在浏览器中没有显示任何错误。此外，谷歌标记也无法正常工作。代码如下。

var app = new Vue({

	el: '#app',
  mounted(){
  var self = this;
  	this.$on('google.maps:init', function(){
    	self.createMap()
    });
  },
  data:{
  	address : ''

  },
	methods: {
		createMap: function(){
			var map= new google.maps.Map(document.querySelector('#map'),{

		center: {lat: 35, lng: -85},
		zoom:5
	});
		}
	},

	locateAddress: function (){
		var geocoder = new google.maps.Geocoder();
		var vm = this;
		geocoder.geocoder({ address: this.address}, function(results, status){

			if (status === google.maps.GeocoderStatus.OK){
				vm.map.SetCenter(result[0].geometry.location);
			}
			
			new google.maps,Markers({
				map: vm.map,
				position: results[0].geometry.location
			});
		});
	}
});

body, htl {
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}

#map{
	width:100%;
  	height:500px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document </title>
	<link rel="stylesheet" href="{{asset('main.css')}}">
	
</head>
<body>

	
	<div id="app">
	<form>
		<input type="text" id="address" v-model="address" name="">
		<button type="submit">Locate</button>
	</form>
  	<div id="map"></div>
  	<pre>@{{$data | json}}</pre>
	</div>
	 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
	<script src="{{asset('google.js')}}"></script>

	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAm7TbF3tnErWC0U-Kwdp_8FfdJIbgZBqU &callback=app.createMap" async defer></script>
	
	
</body>
</html>

Answer 1

使用此 fetchAddress 功能代替 locateAddress 。此功能可以工作并搜索所需的位置。

＆＃13;

fetchAddress: function(address){
		new google.maps.Geocoder().geocode({ address: this.address }, function(results, status) {
			if(status === google.maps.GeocoderStatus.OK) {
                		var map = new google.maps.Map(document.getElementById('map'), {
                    	    center: results[0].geometry.location,
                            zoom: 5

                        }
                     )}
            });
        }
	}
});

＆＃13;

在查找谷歌地图时出现问题

1 个答案: