代码之家 › 专栏 › 技术社区 › esafwan

创建用于插入谷歌地图的界面

interface google-maps

esafwan · 技术社区 · 15 年前

我正在尝试创建一个可以选择使用GoogleMapsAPI向站点添加地图的站点。我在网站的嵌入地图上发现了数百篇教程和博客文章。但我真正想要的是让用户在地图上选择一个位置并添加标记。然后获取标记的坐标并将其存储在前端检索和显示的数据库中。我已经看到这个选项给了像mappress这样的wordpress插件。但现在我正试图在CodeIgniter中实现这一点。我找不到任何可以开始的事情。有人能告诉我从哪里开始吗?

1 回复 | 直到 15 年前

Rudu Andrew Whitaker 15 年前

这真的很简单第三版的 Google maps API . 在此之前的版本更为复杂,并且大部分浮动的教程都是针对那些版本的。查看API文档和示例。

添加标记非常简单:

var marker=new google.maps.Marker({/* ... see API */});

向标记添加事件(如单击)简单如下:

var marker_click=new google.maps.event.addListener(
                       marker,
                       'click',
                       function() {/*...*/});

听起来像是你想要一个地图的点击事件,你可以把它转换成一个latlong,然后(a)用JS在地图上生成一个标记,(b)使用Ajax把它发布回你的服务器,或者将值存储在一个隐藏的表单字段中,然后提交。

更新:

主要来自API文档@ http://code.google.com/apis/maps/documentation/javascript/events.html :

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);

  /*Do your processing here:
   * eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
   */
}

注: 默认情况下没有ajax.post函数,但可能有:)