如何通过Google Maps Geocoding而不是lon和lat使用地址
[英]How to use an address with Google Maps Geocoding and not with lon and lat
问题描述
At the moment i am trying to find out how to use Google Maps Geocoding. 
目前，我正试图找出如何使用Google Maps Geocoding。 I allready have a database that can store a address and a longitude and latitude and i also have it working to output it with a longitude and latitude.. but.. i want it to use a address rather than using a lon and lat. 我已经有一个可以存储地址，经度和纬度的数据库，我也希望它可以输出经度和纬度的数据..但是..我希望它使用地址而不是lon和lat。 So let me explain what i want to do below: 因此，让我在下面解释我想做什么：
On http://www.bartnooijens.nl/school/webapp-eindopdracht/#acti-toe users can add a new entry and can also add an Address. 在http://www.bartnooijens.nl/school/webapp-eindopdracht/#acti-toe上，用户可以添加新条目，也可以添加地址。 I want my Google Maps to read the address and place it onto the map. 我希望我的Google地图读取地址并将其放置在地图上。 For now i have staticly stored the lon and lat into the database to get a marker on but that's not what i want. 现在，我已经将lon和lat静态存储到数据库中以获取标记，但这不是我想要的。
MYSQL: MYSQL：
- Address (needs to be used for the google maps) 地址（需要用于Google地图）
- lon (currently using for static lon, but not want to use a lon) lon（当前用于静态lon，但不想使用lon）
- lat (currently using for static lat, but not want to use a lat) lat（当前用于静态lat，但不想使用lat）
Below is my code that i have now and is working when i use a longitude and latitude. 以下是我现在拥有的代码，当我使用经度和纬度时，该代码可以正常工作。
I also tried to read from https://developers.google.com/maps/documentation/geocoding/intro but my coding experiences are not good enough to get it working. 我还尝试阅读https://developers.google.com/maps/documentation/geocoding/intro，但我的编码经验不足以使其正常工作。 So i hope you guys can help me out a little. 所以我希望你们能帮助我一点。 Thanks in advance! 提前致谢！
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAsh1JAlWZL0SBacR3N94aVzrp4PPGQQeg&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function initialize(lat,lon,label,tekst) {
// Instellen coordinaten uit de paramaters van de aanroep
var myLatlng = new google.maps.LatLng(lat,lon);
// Opties voor de kaart, de coordinaten worden het middelpunt
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Maak een nieuwe kaart aan met de ingestelde opties
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Maak een infowindow met de tekst die via de parameter binnen kwam
var infowindow = new google.maps.InfoWindow({
content: tekst
});
// Url van het icon dat op de kaart wordt gezet
var image = 'images/maps-marker.png';
// Plaats een marker op de opgegeven coordinaten
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: label,
icon: image
});
// Voeg een eventhandler toe voor het tonen van de info als iemand op de marker klikt
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function loadMap() {
initialize('51.584294','4.795296','','');
}
</script>
</head>
<body onload="loadMap()";>
<div id="map_canvas"></div>
</body>
</html>
2 个解决方案
解决方案1
0 2015-11-26 19:05:32
This code did the trick: 这段代码成功了：
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var address = 'London, UK';
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 6
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
});
</script>
解决方案2
0 2015-11-26 19:21:46
Using your example, but removing the first two arguments (lat,lon) and replacing them with the address, then using a modified codeAddress from the google "simple geocoder" example : 使用您的示例，但删除前两个参数（纬度，经度），然后将其替换为地址，然后使用来自Google“简单地址解析器”示例的修改后的codeAddress ：
code snippet: 代码段：
var geocoder = new google.maps.Geocoder(); function initialize(address, label, tekst) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var myLatlng = results[0].geometry.location; // Opties voor de kaart, de coordinaten worden het middelpunt var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; // Maak een nieuwe kaart aan met de ingestelde opties var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Maak een infowindow met de tekst die via de parameter binnen kwam var infowindow = new google.maps.InfoWindow({ content: tekst }); // Url van het icon dat op de kaart wordt gezet var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; // Plaats een marker op de opgegeven coordinaten var marker = new google.maps.Marker({ position: myLatlng, map: map, title: label, icon: image }); // Voeg een eventhandler toe voor het tonen van de info als iemand op de marker klikt google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } function loadMap() { initialize('Hogeschoollaan, 4818 Breda, Netherlands', '', 'Hello World'); } google.maps.event.addDomListener(window, 'load', loadMap);
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.