使用来自 mysql (laravel) 的数据显示带有标记的谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35471128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying google map with markers using data from mysql (laravel)
提问by mercyFREAK
I'm working on a web app that includes google map and a bunch of markers. This morning I had working map+markers from db (but I used only one table with data).
我正在开发一个包含谷歌地图和一堆标记的网络应用程序。今天早上我有来自 db 的工作地图 + 标记（但我只使用了一张带有数据的表）。
ss this morning:
今天早上ss：
Now I'm trying to put marker custom icons and info windows to get something like this (this was made without laravel, only php).
现在我正在尝试放置标记自定义图标和信息窗口来获得类似的东西（这是在没有 laravel 的情况下制作的，只有 php）。
This is my code:
这是我的代码：
@extends('layouts.app')
@section('content')
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.327168, lng: 14.442902},
zoom: 13
});
var infoWindow = new google.maps.InfoWindow;
@foreach($markers as $marker)
var sadrzaj = {{$marker->nazivMarkera}};
var adresa = {{$marker->adresa}};
var grad = {{$marker->nazivGrada}};
var postanskibroj = {{$marker->postanski_broj}};
var zupanija = {{$marker->nazivZupanije}};
var html = "<b>" + sadrzaj + "</b> <br/>" + adresa +",<br/>"+postanskibroj+" "+grad+",<br/>"+zupanija;
var lat = {{$marker->lat}};
var lng = {{$marker->lng}};
var image = {{$marker->slika}};
var markerLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var mark = new google.maps.Marker({
map: map,
position: markerLatlng,
icon: image
});
bindInfoWindow(mark, map, infoWindow, html);
@endforeach
}
function bindInfoWindow(mark, map, infoWindow, html){
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent(html);
infowWindow.open(map, mark);
});
}
function doNothing(){}
//]]>
</script>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Dobro do?li!</div>
<div class="panel-body">
<!-- Moj kod -->
<div id="map"></div>
<!-- DO TU -->
</div>
</div>
</div>
</div>
</div>
@endsection
When I inspect the page I can see that my array with data is filled and I have all the data from db.
当我检查页面时，我可以看到我的数据数组已填充，并且我拥有 db 中的所有数据。
Can someone help me and explain to me where is the problem? Why when I remove functions for markers, and set only map init, I get map view with no problem, and now I don't even get the map.
有人可以帮助我并向我解释问题出在哪里吗？为什么当我删除标记的函数并仅设置地图初始化时，我可以毫无问题地获得地图视图，而现在我什至没有获得地图。
Now:
现在：
采纳答案by Jered
It looks like load() is not getting called anywhere.
看起来 load() 没有在任何地方被调用。
Also I noticed in your screen shots, the variables which have been echoed in by laravel don't have quotes around them.
我还注意到在你的屏幕截图中，被 laravel 回显的变量周围没有引号。
I would leave laravel(blade) out of the javascript. Currently, your foreach loop will dump heaps of javascript code which will be overriding and re-declaring variables. This is generally messy, and considered bad practice.
我会将 laravel(blade) 排除在 javascript 之外。目前，您的 foreach 循环将转储大量 javascript 代码，这些代码将覆盖和重新声明变量。这通常是混乱的，并且被认为是不好的做法。
I would also make map a global variable, incase you want to manipulate it later.
我也会让 map 成为一个全局变量，以防你以后想操作它。
Try this:
尝试这个：
var map;
var markers = {!! json_encode($markers) !!}; //this should dump a javascript array object which does not need any extra interperting.
var marks = []; //just incase you want to be able to manipulate this later
function load() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.327168, lng: 14.442902},
zoom: 13
});
for(var i = 0; i < markers.length; i++){
marks[i] = addMarker(markers[i]);
}
}
function addMarker(marker){
var sadrzaj = marker.nazivMarkera};
var adresa = marker.adresa;
var grad = marker.nazivGrada;
var postanskibroj = marker.postanski_broj;
var zupanija = marker.nazivZupanije;
var html = "<b>" + sadrzaj + "</b> <br/>" + adresa +",<br/>"+postanskibroj+" "+grad+",<br/>"+zupanija;
var markerLatlng = new google.maps.LatLng(parseFloat(marker.lat),parseFloat(marker.lng));
var mark = new google.maps.Marker({
map: map,
position: markerLatlng,
icon: marker.slika
});
var infoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(mark, 'click', function(){
infoWindow.setContent(html);
infoWindow.open(map, mark);
});
return mark;
}
function doNothing(){} //very appropriately named function. whats it for?
I also fixed up several small errors in the code, such as
我还修复了代码中的几个小错误，比如
- info window was spelt wrong inside your bind function "infowWindow"
- your infoWindow listener need to bind to mark not marker
- you don't really need to individually extract out each variable from marker
- 信息窗口在您的绑定函数“infowWindow”中拼写错误
- 您的 infoWindow 侦听器需要绑定以标记而不是标记
- 你真的不需要从标记中单独提取每个变量
Also, you need to call the load() function from somewhere. Maybe put onLoad="load()" on your body object or top level div. Or use the google DOM listener:
此外，您需要从某处调用 load() 函数。也许把 onLoad="load()" 放在你的身体对象或顶级 div 上。或者使用谷歌 DOM 侦听器：
google.maps.event.addDomListener(window, 'load', load);
This will execute your load() function when the window is ready.
这将在窗口准备好时执行您的 load() 函数。
回答by phaberest
You have lo leave
你可以请假
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.327168, lng: 14.442902},
zoom: 13
});
out of the commented area, otherwise you're not initializing it.
在评论区之外，否则你不会初始化它。
