根据地址数据在嵌入式开放街道地图上显示标记

发布于 2024-12-12 12:01:01 字数 1538 浏览 3 评论 0原文

目前，我提供的页面显示带有标记的谷歌地图，使用从我的数据库检索到的地址。我目前使用一段相当简单的 JavaScript 代码通过地理编码添加该标记。我的js代码是由php动态生成的。除了使用地址搜索字符串初始化的“查询”定义之外，所有内容都是静态的。

我是 OSM 新手，做了一些研究，看看它是否可以实现这一点。目前我不确定是否可以。我发现有几个我需要使用的 js api，比如 OpenLayers。

总结一下：

如何向 OSM 添加并显示单个标记，其中位置基于地址而不是纬度/经度对？

我当前基于 google 的代码是：

<script>
var geocoder; var map; var marker;
var query = 'Deutschland, Berlin, Platz der Republik 1, 11011';

function initialize()
{        
var companyLocation = new google.maps.LatLng(51.964577109947506, 5.07568359375);      
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}

function codeAddress()
{
var address = query;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
  map.setCenter(results[0].geometry.location);
  var marker = new google.maps.Marker({
     map: map, 
     position: results[0].geometry.location,
     title: "Bundestag",
     labelContent: "",
     labelAnchor: new google.maps.Point(22, 0),
     labelClass: "labels", // the CSS class for the label
     labelStyle: {opacity: 0.75}
  });        
  } else {
    $('#map_canvas').html('<p style="margin: 15px">Address could not be found</p>');
  }
});
}
</script>

原文

At the moment I serve pages showing a google map with a marker using an address retrieved from my database. I currently use a fairly simple piece of javascript code to add that marker by geocoding. My js code is dynamically generated by php. All is static except the "query" definition which gets initialized with the address search string.

I new to OSM and did some research to see if it can achieve this. At the moment I'm not sure it can. I found there are several js api's like OpenLayers which I'd need to use.

To sum it up :

How to add and show a single marker to an OSM, where the location is based on an address instead of a latitude/longtitude pair?

My current google based code is:

<script>
var geocoder; var map; var marker;
var query = 'Deutschland, Berlin, Platz der Republik 1, 11011';

function initialize()
{        
var companyLocation = new google.maps.LatLng(51.964577109947506, 5.07568359375);      
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}

function codeAddress()
{
var address = query;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
  map.setCenter(results[0].geometry.location);
  var marker = new google.maps.Marker({
     map: map, 
     position: results[0].geometry.location,
     title: "Bundestag",
     labelContent: "",
     labelAnchor: new google.maps.Point(22, 0),
     labelClass: "labels", // the CSS class for the label
     labelStyle: {opacity: 0.75}
  });        
  } else {
    $('#map_canvas').html('<p style="margin: 15px">Address could not be found</p>');
  }
});
}
</script>

分享到QQ

分享到微博