Google Maps API的哪些组件用于生成绘制许多地址的地图？ [英] What component(s) of the Google Maps API is used to generate maps plotting many addresses?
本文介绍了Google Maps API的哪些组件用于生成绘制许多地址的地图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个与此页面右侧功能非常相似的地图： https： //spacelist.ca/search
- 从地理编码地址组件数据库中绘制地址
- 当缩小时，它显示附近的地址数作为可点击的数字
- 点击数字放大，数字分成较小的辖区
- 侧面板列出了地图边缘可见的城市/社区/校区/地址。
- 点击一个针脚会显示有关该地址的信息侧面板
- 选择侧面板上的东西将显示在地图上的相应区域或针脚上
我正在使用Django作为后端。
我打开了他们的 /application.c720f8945a.js 并滚动水平在VS引起幻灯片。即使是正确的地方，也有太多的东西，我不知道我在找什么。
我没有任何关于如何开始或在哪里开始的想法，或者我应该使用哪种搜索字词来使用这种地图。如果有人可以指出我正确的方向如何开始，我真的很感激。
models.py
类地址（models.Model）：
created = models.DateTimeField（auto_now_add = True）
creator = models.ForeignKey（User，related_name ='Address_created'）
owner = models.ForeignKey（User，null = True，related_name ='Address_owned'）
visible = models.BooleanField（default = False）
street_number = models.CharField（max_length = 255）
route = models.ForeignKey（Route）
postal_code = models.CharField（max_length = 7，blank = True）
lat = models.FloatField（）
lng = models.FloatField（）
rating = models.FloatField（default = 0）
class Meta：
unique_together =（'street_number' 'route'）
解决方案
我必须回答php& mySQL，对不起。
我想这是一个捕捉大部分问题的例子。与比利时的城镇。
小出口：
CREATE TABLE IF NOT EXISTS city（id bigint（15）NOT NULL，alpha varchar（255）CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL，longitude decimal（12,10）DEFAULT NULL，纬度十进制（12,10）DEFAULT NULL，代码varchar（30）CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL，name varchar（255）CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL，省bigint（15）NOT NULL DEFAULT'0'，PRIMARY KEY（id），KEY region（省），KEY代码（代码） KEY alpha（alpha））ENGINE = MyISAM DEFAULT CHARSET = latin1 COLLATE = latin1_general_ci; INSERT INTO城市（id，alpha，经度，纬度，代码，名称，省）VALUES（2753，'vodele'，4.7319823000，50.1700235000，'5680'，'Vodelée'，10），（2752，'vaucelles'，4.7435856000， ，5680，Vaucelles，10），（2751，soulme，4.7362843000，50.1875880000，'5680'，'Soulme'，10），（2750，'romere'，4.6751612000,50.1349753000,56980' 'Romerée'，10），（2749，'niverle'，4.7009273000，50.1176372000，'5680'，'Niverlée'，10），（2748，'matagne-la-petite'，4.6466011000，50.1187174000，'5680'，'Matagne -la-Petite'，10），（2747，'matagne-la-grande'，4.6230829000，50.1171994000，'5680'，'Matagne-la-Grande'，10），（2746，'gochene'，4.7598303000,50.1838389000， '5680'，'Gochenée'，10），（2745，gimne，4.7141846000，50.1322987000，'5680'，'Gimnée'，10），（2744，'doische'，4.7451565000，50.1354941000，'5680'，'Doische '，10），（2743，'viroinval'，4.6059942000，50.071472 2000，'5670'，'Viroinval'，10），（2742，'vierves-sur-viroin'，4.6342325000,50.0803073000''5670'，'Vierves-sur-Viroin'，10），（2741，'treignes' （2740，'olloy-sur-viroin'，4.6073551000,50.0734406000，'5670'，'Olloy-sur-Viroin'，10），（2739，oignies ，6370911000，50.0237916000，5670，Oignies-en-Thiérache，10），（2738，'nismes'，4.5483014000，50.0747916000，'5670'，'Nismes'，10） 迷宫，4.6962280000，50.1013002000，'5670'，'Mazée'，10），（2736，'le-mesnil'，4.6714057000，50.0315066000，'5670'，'Le Mesnil'，10）（2735，'dourbes' ，45911852000,50.0915244000，'5670'，'Dourbes'，10），（2734，'presgaux'，4.4198508000,50.0251800000''5660'，'Presgaux'，10），（2733，'petite-chapelle'，4.5051169000,49.9501137000 ，'5660'，'Petite-Chapelle'，10），（2732，'petigny'，4.5329342000,50.0588019 000，'5660'，'Petigny'，10），（2731'pesche'，4.4587268000,50.0423745000，'5660'，'Pesche'，10），（2730，'mariembourg'，4.5221759000,50.0949510000''5660' 'Mariembourg'，10），（2729，'gonrieux'，4.4262188000，50.0360473000，'5660'，'Gonrieux'，10），（2728，'frasnes-namur'，4.5089143000，50.0767425000，'5660'，'Frasnes，Namur '，10），（2727，'dailly'，4.4357088000，50.0574819000，'5660'，'Dailly'，10），（2726，'cul-des-sarts'，4.4546930000，49.9620803000，'5660'，'Cul-des （2725，'couvin'，4.4971552000，50.0516936000，'5660'，'Couvin'，10），（2724，'brly-de-pesche'，4.4607012000，50.0009904000，'5660'，'Brûly -de-Pesche'，10），（2723，'brly'，4.5276734000,49.9700584000，'5660'，'Brûly'，10），（2722，'boussu-en-fagne'，4.4718043000,50.0762654000''5660' 'Boussu-en-Fagne'，10），（2721，'aublain'，4.4090755000，50.0675767000，'5660'，'Aublain' ，10），（2720，'你的城堡'，4.4259158000，50.2823570000，'5651'，'Thy-le-Château'，10），（2719，'tarcienne'，4.4978154000，50.3121148000，'5651'，' （2718，'somze'，4.4831638000，50.2950667000，'5651'，'Somzée'，10），（2717，'rogne'，4.3890376000，50.2696666000，'5651'，'Rognée'，10） （2716，'laneffe'，4.4945456000,50.2776590000''5651'，'Laneffe'，10），（2715，'gourdinne'，4.4562301000,50.2901206000''5651'，'Gourdinne'，10），（2714，'berze' ，43991598000,50.2906721000，'5651'，'Berzée'，10），（2713，'yves-gomeze'，4.4942942000,50.2394220000''5650'，'Yves-Gomezée'，10），（2712，'walcourt'，4.4316899000 ，5650，Walcourt，10），（2711，'基因'，4.4523807000，50.2388380000，'5650'，'Vogenée'，10），（2710，'pry'，4.4292602000,50.2702052000''5650' ，'Pry'，10），（2709，'fraire'，4.5075507000，50.2612928000，'5650' ，Fraire，10），（2708，fontenelle，4.3820441000,50.2480932000，'5650'，'Fontenelle'，10），（2707，'clermont-namur'，4.3166534000,50.2602509000,52602509000,55502509000'，' （2706，'chastrs'，4.4594299000,50.2649875000''5650'，'Chastrès'，10），（2705，'castillon'，4.3535680000，50.2469600000''5650'，'Castillon'，10） （2704，'stave'，4.6595389000，50.2823372000，'5646'，'Stave'，10），（2703，'ermeton-sur-biert'，4.7220269000,50.2886049000，'5644'，'Ermeton-sur-Biert'，10 ），（2702，'furnaux'，4.7035401000,50.3074423000，'5641'，'Furnaux'，10），（2701，'saint-grard'，4.7402044000,50.3459587000''''''''，''4040'，'Saint-Gérard'，10） （2600，'oret'，4.6155651000，50.2998711000，'5640'，'Oret'，10），（2699'mettet'，4.6579476000，50.3201538000，'5640'，'Mettet'，10） ，4.7188075000，50.3256276000，'5640'，'Graux'，10），（2697，'biesmere'，4。 （2696，'biesme'，4.6084738000，50.3341410000''5640'，'Biesme'，10），（2695，'villers-deux-eglises'，4.4827135000，'5640'，'Biesmerée'，10） （2694，soumoy，4.4374719000，50.1893197000，5630，Soumoy，10），（2693，silenrieux，4.4101535000,50.2247693000，5630，Villers-Deux-Eglises '5630'，'Silenrieux'，10），（2692，'senzeille'，4.4654506000,50.1773954000''5630'，'Senzeille'，10），（2691，'daussois'，4.4538610000,50.2215797000''5630'，'Daussois '，10），（2690，'cerfontaine'，4.4123064000，50.1706980000''5630'，'Cerfontaine'，10），（2689，'你的'b''，4.5236966000，50.2951273000，'5621'，'Thy-le （2688，'morialm'，4.5659309000,50.2750372000''5621'，'Morialmé'，10），（2687，'hanzinne'，4.5431971000，50.3100157000，'5621'，'Hanzinne'，10） ，（2686，'hanzinelle'，4.5564457000,50.296069 0000，'5621'，'Hanzinelle'，10），（2685，'saint-aubin'，4.5775596000,50.2480443000''5620'，'Saint-Aubin'，10），（2684，'rose'，4.6867744000,50.2321287000， '5620'，'Rosée'，10），（2683，'morville'，4.7449983000，50.2334567000，'5620'，'Morville'，10），（2682，'hemptinne-lez-florennes'，4.5626703000,50.2285443000，'' '，'Hemptinne-lez-Florennes'，10），（2681，florennes，4.6037449000，50.2508165000，'5620'，'Florennes'，10），（2680，'flavion'，4.7122250000，50.2492740000''5620' 'Flavion'，10），（2679，'corenne'，4.6787666000，50.2522483000，'5620'，'Corenne'，10）;
更大的文件： http://www.manutechnica.com/stackoverflow/city.sql
data.php
<？php
//连接，选择数据库
$ link = mysql_connect（'localhost'，'root' ，''）或死亡（'无法连接'）;
mysql_select_db（'stackoverflow'）或死（'无法选择数据库'）;
mysql_set_charset（'utf8'，$ link）;
$ query ='SELECT id，纬度为lat，经度为lng，名称，代码FROM city';
$ res = mysql_query（$ query）;
$ my_array = array（）;
while（$ row = mysql_fetch_assoc（$ res））{
array_push（$ my_array，$ row）;
}
//打印结果
echo json_encode（$ my_array）;
//免费结果集
mysql_free_result（$ res）;
//关闭连接
mysql_close（$ link）;
？>
index.php
<风格>
#map {
height：400px;
}
#display {
max-height：400px;
overflow-y：auto;
cursor：pointer;
}
< / style>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
< script src =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js>< / script>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script>
< script type =text / javascript>
var mc;
var map;
var markers = [];
var markerData = [];
函数initialize（）{
map = new google.maps.Map（document.getElementById（'map'），{
zoom：12，
center：新的google.maps.LatLng（51，4），//比利时
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
//从数据库中读取位置，使用Ajax调用
getData（function（data）{
markerData = data;
// infowindow
var infowindow = new google.maps.InfoWindow（{
map：map，
content：''
}）;
for（var i in data）{
var marker = new google.maps.Marker（{
map：map，
position：new google.maps.LatLng（data [i] .lat，data [i] .lng），
标题：data [i] .name
}）;
markers.push（marker）;
marker.addListener（'click'，function（）{
// first看到哪个标记被点击
var index = markers.indexOf（this）;
var content = markerData [index] .name +'& br>邮政编码：'+ markerData [index] .code ; //随意添加标签
infowindow.open（map，markers [index]）;
infowindow.setContent（content）;
}）;
}
//现在集群标记
var mcOptions = {}; // {gridSize：50，maxZoom：15};
mc = new MarkerClusterer（map，markers，mcOptions）;
google.maps.event.addListener（map，'bounds_changed'，function（）{
document.getElementById（'display'）。innerHTML ='';
var newContent =''
for（var i in markers）{
if（markerIsInSight（markers [i]））{
newContent + ='< li onclick =zoomTo（'+ i +'） >'+ markerData [i] .name +' - 邮政编码：'+ markerData [i] .code +'< / li>';
}
}
document.getElementById （'display'）innerHTML = newContent;
}）;
}）;
函数markerIsInSight（marker）{
//让我们考虑一个矩形，我们有地图边界。
//注意，对于像加拿大这样的大国家（特别是当他们靠近极点）时，梯形会更好;由于地球的曲率，该地图显示出北部的经度与南方的差距更大。
return（//返回true或false
marker.getPosition（）。lat（）< = map.getBounds（）。getNorthEast（）。lat（）&&
标记.getPosition（）。lat（）> = map.getBounds（）。getSouthWest（）。lat（）&&
marker.getPosition（）。lng（）< = map.getBounds（）。 getNorthEast（）。lng（）&&
marker.getPosition（）。lng（）> = map.getBounds（）。getSouthWest（）。lng（）
）;
}
}
//从数据库中读取位置，使用Ajax调用
// callback是一个函数，当Ajax返回时，数据将从服务器
函数getData（callback）{
$ .ajax（{
url：'data.php'，
dataType：'json'，
success：function （数据）{
回调（数据）;
}
}）;
}
函数zoomTo（index）{
map.setZoom（15）;
map.setCenter（markers [index] .getPosition（））;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< div id =map>< / div>
< ul id =display>< / ul>
data.php生成如下数据：
[{ ID： 1032， LAT： 51.1014829000， LNG： 2.8909046000， 名称： 勒克， 代码： 8600 }，{ ID ： 1031\" ， LAT： 51.0325201000， LNG： 2.7683533000， 名： Lampernisse， 代码： 8600}，{ ID ： 1030， LAT： 51.0814378000， LNG： 2.8821894000， 名： Keiem， 代码： 8600}，{ ID： 1029， LAT ： 51.0364146000， LNG： 2.8367637000， 名： Kaaskerke， 代码： 8600}，{ ID： 1028， LAT： 51.0294638000， LNG ： 2.9021306000， 名： 也先， 代码： 8600}，{ ID： 1027， LAT： 50.7064502000， LNG： 3.9865752000， 名 ： Driekapellen， 代码： 8600}，{ ID： 1026， LAT： 51.0317985000， LNG： 2.8637681000， 名： 迪克斯梅德， 代码 ： 8600}，{ ID： 1025， LAT： 51.0588750000， LNG： 2.8869089000， 名称： Beerst， 代码： 8600}];
所以随时以任何方式生成任何语言的数据。 p>
I'd like to create a map with very similar functionality to the one found on the right side of this page: https://spacelist.ca/search
- Plot the addresses from database of geocoded address components
- When zoomed out, it shows the number of addresses in a vicinity as a clickable number
- Clicking on a number zooms in, and the numbers split up into smaller jurisdictions
- The side panel lists the cities/neighborhoods/campuses/addresses that are visible within the edges of the map
- Clicking on a pin shows information about that address on the side panel
- Selecting something on the side panel will show to corresponding area or pin on the map
I'm using Django for the backend.
I opened their /application.c720f8945a.js and scrolling horizontally in VS caused a slideshow. Even if it is the correct place to look, there is too much stuff and I don't know what exactly I'm looking for.
I don't have any idea of how or where to start, or what search terms I should use for this kind of map. If someone could point me in the correct direction on how to get started, I would really appreciate it.
models.py
class Address(models.Model):
created = models.DateTimeField(auto_now_add=True)
creator = models.ForeignKey(User, related_name='Address_created')
owner = models.ForeignKey(User, null=True, related_name='Address_owned')
visible = models.BooleanField(default=False)
street_number = models.CharField(max_length=255)
route = models.ForeignKey(Route)
postal_code = models.CharField(max_length=7, blank=True)
lat = models.FloatField()
lng = models.FloatField()
rating = models.FloatField(default=0)
class Meta:
unique_together = ('street_number', 'route')
解决方案
I'll have to answer with php & mySQL, sorry.
Here is an example that captures most of your question, I think. With Belgian towns.
small export:
CREATE TABLE IF NOT EXISTS city ( id bigint(15) NOT NULL, alpha varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, longitude decimal(12,10) DEFAULT NULL, latitude decimal(12,10) DEFAULT NULL, code varchar(30) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, name varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, province bigint(15) NOT NULL DEFAULT '0', PRIMARY KEY (id), KEY region (province), KEY code (code), KEY alpha (alpha) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci; INSERT INTO city (id, alpha, longitude, latitude, code, name, province) VALUES (2753, 'vodele', 4.7319823000, 50.1700235000, '5680', 'Vodelée', 10), (2752, 'vaucelles', 4.7435856000, 50.1132065000, '5680', 'Vaucelles', 10), (2751, 'soulme', 4.7362843000, 50.1875880000, '5680', 'Soulme', 10), (2750, 'romere', 4.6751612000, 50.1349753000, '5680', 'Romerée', 10), (2749, 'niverle', 4.7009273000, 50.1176372000, '5680', 'Niverlée', 10), (2748, 'matagne-la-petite', 4.6466011000, 50.1187174000, '5680', 'Matagne-la-Petite', 10), (2747, 'matagne-la-grande', 4.6230829000, 50.1171994000, '5680', 'Matagne-la-Grande', 10), (2746, 'gochene', 4.7598303000, 50.1838389000, '5680', 'Gochenée', 10), (2745, 'gimne', 4.7141846000, 50.1322987000, '5680', 'Gimnée', 10), (2744, 'doische', 4.7451565000, 50.1354941000, '5680', 'Doische', 10), (2743, 'viroinval', 4.6059942000, 50.0714722000, '5670', 'Viroinval', 10), (2742, 'vierves-sur-viroin', 4.6342325000, 50.0803073000, '5670', 'Vierves-sur-Viroin', 10), (2741, 'treignes', 4.6692223000, 50.0928419000, '5670', 'Treignes', 10), (2740, 'olloy-sur-viroin', 4.6073551000, 50.0734406000, '5670', 'Olloy-sur-Viroin', 10), (2739, 'oignies-en-thirache', 4.6390911000, 50.0237916000, '5670', 'Oignies-en-Thiérache', 10), (2738, 'nismes', 4.5483014000, 50.0747916000, '5670', 'Nismes', 10), (2737, 'maze', 4.6962280000, 50.1013002000, '5670', 'Mazée', 10), (2736, 'le-mesnil', 4.6714057000, 50.0315066000, '5670', 'Le Mesnil', 10), (2735, 'dourbes', 4.5911852000, 50.0915244000, '5670', 'Dourbes', 10), (2734, 'presgaux', 4.4198508000, 50.0251800000, '5660', 'Presgaux', 10), (2733, 'petite-chapelle', 4.5051169000, 49.9501137000, '5660', 'Petite-Chapelle', 10), (2732, 'petigny', 4.5329342000, 50.0588019000, '5660', 'Petigny', 10), (2731, 'pesche', 4.4587268000, 50.0423745000, '5660', 'Pesche', 10), (2730, 'mariembourg', 4.5221759000, 50.0949510000, '5660', 'Mariembourg', 10), (2729, 'gonrieux', 4.4262188000, 50.0360473000, '5660', 'Gonrieux', 10), (2728, 'frasnes-namur', 4.5089143000, 50.0767425000, '5660', 'Frasnes, Namur', 10), (2727, 'dailly', 4.4357088000, 50.0574819000, '5660', 'Dailly', 10), (2726, 'cul-des-sarts', 4.4546930000, 49.9620803000, '5660', 'Cul-des-Sarts', 10), (2725, 'couvin', 4.4971552000, 50.0516936000, '5660', 'Couvin', 10), (2724, 'brly-de-pesche', 4.4607012000, 50.0009904000, '5660', 'Brûly-de-Pesche', 10), (2723, 'brly', 4.5276734000, 49.9700584000, '5660', 'Brûly', 10), (2722, 'boussu-en-fagne', 4.4718043000, 50.0762654000, '5660', 'Boussu-en-Fagne', 10), (2721, 'aublain', 4.4090755000, 50.0675767000, '5660', 'Aublain', 10), (2720, 'thy-le-chteau', 4.4259158000, 50.2823570000, '5651', 'Thy-le-Château', 10), (2719, 'tarcienne', 4.4978154000, 50.3121148000, '5651', 'Tarcienne', 10), (2718, 'somze', 4.4831638000, 50.2950667000, '5651', 'Somzée', 10), (2717, 'rogne', 4.3890376000, 50.2696666000, '5651', 'Rognée', 10), (2716, 'laneffe', 4.4945456000, 50.2776590000, '5651', 'Laneffe', 10), (2715, 'gourdinne', 4.4562301000, 50.2901206000, '5651', 'Gourdinne', 10), (2714, 'berze', 4.3991598000, 50.2906721000, '5651', 'Berzée', 10), (2713, 'yves-gomeze', 4.4942942000, 50.2394220000, '5650', 'Yves-Gomezée', 10), (2712, 'walcourt', 4.4316899000, 50.2517267000, '5650', 'Walcourt', 10), (2711, 'vogene', 4.4523807000, 50.2388380000, '5650', 'Vogenée', 10), (2710, 'pry', 4.4292602000, 50.2702052000, '5650', 'Pry', 10), (2709, 'fraire', 4.5075507000, 50.2612928000, '5650', 'Fraire', 10), (2708, 'fontenelle', 4.3820441000, 50.2480932000, '5650', 'Fontenelle', 10), (2707, 'clermont-namur', 4.3166534000, 50.2602509000, '5650', 'Clermont, Namur', 10), (2706, 'chastrs', 4.4594299000, 50.2649875000, '5650', 'Chastrès', 10), (2705, 'castillon', 4.3535680000, 50.2469600000, '5650', 'Castillon', 10), (2704, 'stave', 4.6595389000, 50.2823372000, '5646', 'Stave', 10), (2703, 'ermeton-sur-biert', 4.7220269000, 50.2886049000, '5644', 'Ermeton-sur-Biert', 10), (2702, 'furnaux', 4.7035401000, 50.3074423000, '5641', 'Furnaux', 10), (2701, 'saint-grard', 4.7402044000, 50.3459587000, '5640', 'Saint-Gérard', 10), (2700, 'oret', 4.6155651000, 50.2998711000, '5640', 'Oret', 10), (2699, 'mettet', 4.6579476000, 50.3201538000, '5640', 'Mettet', 10), (2698, 'graux', 4.7188075000, 50.3256276000, '5640', 'Graux', 10), (2697, 'biesmere', 4.6800577000, 50.2972765000, '5640', 'Biesmerée', 10), (2696, 'biesme', 4.6084738000, 50.3341410000, '5640', 'Biesme', 10), (2695, 'villers-deux-eglises', 4.4827135000, 50.1895479000, '5630', 'Villers-Deux-Eglises', 10), (2694, 'soumoy', 4.4374719000, 50.1893197000, '5630', 'Soumoy', 10), (2693, 'silenrieux', 4.4101535000, 50.2247693000, '5630', 'Silenrieux', 10), (2692, 'senzeille', 4.4654506000, 50.1773954000, '5630', 'Senzeille', 10), (2691, 'daussois', 4.4538610000, 50.2215797000, '5630', 'Daussois', 10), (2690, 'cerfontaine', 4.4123064000, 50.1706980000, '5630', 'Cerfontaine', 10), (2689, 'thy-le-bauduin', 4.5236966000, 50.2951273000, '5621', 'Thy-le-Bauduin', 10), (2688, 'morialm', 4.5659309000, 50.2750372000, '5621', 'Morialmé', 10), (2687, 'hanzinne', 4.5431971000, 50.3100157000, '5621', 'Hanzinne', 10), (2686, 'hanzinelle', 4.5564457000, 50.2960690000, '5621', 'Hanzinelle', 10), (2685, 'saint-aubin', 4.5775596000, 50.2480443000, '5620', 'Saint-Aubin', 10), (2684, 'rose', 4.6867744000, 50.2321287000, '5620', 'Rosée', 10), (2683, 'morville', 4.7449983000, 50.2334567000, '5620', 'Morville', 10), (2682, 'hemptinne-lez-florennes', 4.5626703000, 50.2285443000, '5620', 'Hemptinne-lez-Florennes', 10), (2681, 'florennes', 4.6037449000, 50.2508165000, '5620', 'Florennes', 10), (2680, 'flavion', 4.7122250000, 50.2492740000, '5620', 'Flavion', 10), (2679, 'corenne', 4.6787666000, 50.2522483000, '5620', 'Corenne', 10);
bigger file: http://www.manutechnica.com/stackoverflow/city.sql
data.php
<?php
// Connecting, selecting database
$link = mysql_connect('localhost', 'root', '') or die('Could not connect');
mysql_select_db('stackoverflow') or die('Could not select database');
mysql_set_charset('utf8',$link);
$query = 'SELECT id, latitude as lat, longitude as lng, name, code FROM city';
$res = mysql_query($query);
$my_array = array();
while ($row = mysql_fetch_assoc($res)) {
array_push ($my_array, $row);
}
// print the result
echo json_encode($my_array);
// Free resultset
mysql_free_result($res);
// Closing connection
mysql_close($link);
?>
index.php
<style>
#map {
height: 400px;
}
#display {
max-height: 400px;
overflow-y: auto;
cursor: pointer;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var mc;
var map;
var markers = [];
var markerData = [];
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(51, 4), // Belgium
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Read the locations from database, with an Ajax call
getData(function(data) {
markerData = data;
// infowindow
var infowindow = new google.maps.InfoWindow({
map: map,
content: ''
});
for (var i in data) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].name
});
markers.push(marker);
marker.addListener('click', function() {
//first see which marker was clicked upon
var index = markers.indexOf(this);
var content = markerData[index].name +'<br>postal code: '+ markerData[index].code; //feel free to add tags
infowindow.open(map, markers[index]);
infowindow.setContent(content);
});
}
// now cluster the markers
var mcOptions = {}; //{gridSize: 50, maxZoom: 15};
mc = new MarkerClusterer(map, markers, mcOptions);
google.maps.event.addListener(map, 'bounds_changed', function() {
document.getElementById('display').innerHTML = '';
var newContent = '';
for (var i in markers) {
if (markerIsInSight(markers[i])) {
newContent += '<li onclick="zoomTo(' + i + ')">' + markerData[i].name +' - postal code: '+ markerData[i].code +'</li>';
}
}
document.getElementById('display').innerHTML = newContent;
});
});
function markerIsInSight(marker) {
// Let's consider a rectangle, we have map boundaries.
// Notice, for big countries like Canada (especially when they're close to a pole), a trapezium would be better; the map shows more difference of longitude in the north than in the south, due to the curvature of earth.
return ( // returns true or false
marker.getPosition().lat() <= map.getBounds().getNorthEast().lat() &&
marker.getPosition().lat() >= map.getBounds().getSouthWest().lat() &&
marker.getPosition().lng() <= map.getBounds().getNorthEast().lng() &&
marker.getPosition().lng() >= map.getBounds().getSouthWest().lng()
);
}
}
// Read the locations from database, with an Ajax call
// callback is a function that will be executed when Ajax returns with data from the server
function getData(callback) {
$.ajax({
url: 'data.php',
dataType: 'json',
success: function(data) {
callback(data);
}
});
}
function zoomTo(index) {
map.setZoom(15);
map.setCenter(markers[index].getPosition());
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map"></div>
<ul id="display"></ul>
data.php produces data like this:
[{"id":"1032","lat":"51.1014829000","lng":"2.8909046000","name":"Leke","code":"8600"},{"id":"1031","lat":"51.0325201000","lng":"2.7683533000","name":"Lampernisse","code":"8600"},{"id":"1030","lat":"51.0814378000","lng":"2.8821894000","name":"Keiem","code":"8600"},{"id":"1029","lat":"51.0364146000","lng":"2.8367637000","name":"Kaaskerke","code":"8600"},{"id":"1028","lat":"51.0294638000","lng":"2.9021306000","name":"Esen","code":"8600"},{"id":"1027","lat":"50.7064502000","lng":"3.9865752000","name":"Driekapellen","code":"8600"},{"id":"1026","lat":"51.0317985000","lng":"2.8637681000","name":"Diksmuide","code":"8600"},{"id":"1025","lat":"51.0588750000","lng":"2.8869089000","name":"Beerst","code":"8600"}];
So feel free to generate data like this in any language, in any way you know about.
这篇关于Google Maps API的哪些组件用于生成绘制许多地址的地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
