创建用于插入Google地图的界面

时间:2010-10-14 18:18:43

标签: google-maps interface

我正在尝试使用google maps api创建一个可以选择将地图添加到网站的网站。我在网站上找到了数百个关于嵌入地图的教程和博客文章。但我真正想要的是一种让用户在地图上选择一个地方并添加标记的方法。然后获取标记的坐标并将其存储在检索和显示在前端的数据库中。我看过像mappress这样的wordpress插件这个选项。但现在我想在codeigniter中实现这个目标。我找不到任何事情要开始。任何人都可以指出一个人告诉我从哪里开始吗?

1 个答案:

答案 0 :(得分:0)

Google maps API的第3版非常简单。之前的版本更复杂,而且大多数教程都是针对这些版本的。浏览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函数,但可能有:)