gpt4 book ai didi

javascript - 谷歌地图定位问题

转载 作者:行者123 更新时间:2023-11-28 04:26:32 25 4
gpt4 key购买 nike

我正在使用 LaravelGoogle map vue.j 结合使用,但在定位任何其他地点时遇到问题 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>

最佳答案

使用此fetchAddress函数而不是locateAddress。此功能有效并搜索所需的位置。

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

}
)}
});
}
}
});

关于javascript - 谷歌地图定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45007085/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com