加载MySQL标记&地理编码在相同的谷歌地图上

时间:2012-06-05 13:53:23

标签: php google-maps-api-3 google-maps-markers geocode

我想知道是否有人可以帮助我。

我将this页面放在一起,允许用户通过地图点击或手动输入地址对地址进行地理编码,这样可以正常工作。此代码稍微适应了here找到的教程。

除了上述功能之外,我现在要做的是添加代码,该代码放置一个已经存放在MySQL数据库中的坐标标记。

这是我为实现这一目标而编写的代码:

<script type="text/javascript">

         var icon = new google.maps.MarkerImage("images/location-marker-2.png")
         new google.maps.Point(16, 32);
         var center = null;
         var map = null;
         var bounds = new google.maps.LatLngBounds();
         function addMarker(lat, lng, info) {
         var pt = new google.maps.LatLng(lat, lng);
         bounds.extend(pt);
         var marker = new google.maps.Marker({
         position: pt,
         icon: icon,
         map: map
         });
         }
         function initMap() {
         map = new google.maps.Map(document.getElementById("gmaps-canvas"), {
         center: new google.maps.LatLng(0, 0),
         zoom: 6,
         scrollwheel: true,     
         draggable: true, 
         mapTypeId: google.maps.MapTypeId.SATELLITE
         });
            <?php

                    include("admin/link.php");
                    include("admin/opendb.php");

                    $query = mysql_query("SELECT * FROM `detectinglocations` WHERE `locationid` = '$lid'");
                    while ($row = mysql_fetch_array($query)){
                        $locationname=$row['locationname'];
                        $osgb36lat=$row['osgb36lat'];
                        $osgb36lon=$row['osgb36lon'];
                        echo ("addMarker($osgb36lat, $osgb36lon,'<b>$locationname</b><br/>');\n");
                    }
                         mysql_close($connect);
             ?>

                     center = bounds.getCenter();
                     map.fitBounds(bounds);
                 }
</script> 

我遇到的问题是我可以使用geocode功能,但是当我尝试添加标记时,没有任何反应,也没有在Chrome中收到任何错误。< / p>

作为POST添加,我在下面添加了Geocode JS文件:

var geocoder;
var map;
var marker;

// initialise the google maps objects, and add listeners
function gmaps_init(){

  // center of the universe
  var latlng = new google.maps.LatLng(54.312195845815246, -4.45948481875007);

  var options = {
     zoom: 6,
    center: latlng, 
    scrollwheel: true,     
    draggable: true, 
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  // create our map object
  map = new google.maps.Map(document.getElementById("gmaps-canvas"), options);

  // the geocoder object allows us to do latlng lookup based on address
  geocoder = new google.maps.Geocoder();

  // the marker shows us the position of the latest address
  marker = new google.maps.Marker({
    map: map,
    draggable: true
  });

  // event triggered when marker is dragged and dropped
  google.maps.event.addListener(marker, 'dragend', function() {
    geocode_lookup( 'latLng', marker.getPosition() );
    var point = marker.getPosition();
    map.panTo(point);
    document.getElementById('osgb36lat').value = marker.position.lat();
    document.getElementById('osgb36lon').value = marker.position.lng();
  });

  // event triggered when map is clicked
  google.maps.event.addListener(map, 'click', function(event) {
    marker.setPosition(event.latLng)
    geocode_lookup( 'latLng', event.latLng  );
document.getElementById('osgb36lat').value = marker.position.lat();
  document.getElementById('osgb36lon').value = marker.position.lng();
  });
}

// move the marker to a new position, and center the map on it
function update_map( geometry ) {
  map.fitBounds( geometry.viewport )
  marker.setPosition( geometry.location )
  document.getElementById('osgb36lat').value = marker.position.lat();
  document.getElementById('osgb36lon').value = marker.position.lng();

}

// fill in the UI elements with new position data
function update_ui( address, latLng ) {
  $('#gmaps-input-address').autocomplete("close");
  $('#gmaps-input-address').val(address);
  $('#gmaps-output-latitude').html(latLng.lat());
  $('#gmaps-output-longitude').html(latLng.lng());
}

// Query the Google geocode object
//
// type: 'address' for search by address
//       'latLng'  for search by latLng (reverse lookup)
//
// value: search query
//
// update: should we update the map (center map and position marker)?
function geocode_lookup( type, value, update ) {
  // default value: update = false
  update = typeof update !== 'undefined' ? update : false;

  request = {};
  request[type] = value;

  geocoder.geocode(request, function(results, status) {
    $('#gmaps-error').html('');
    if (status == google.maps.GeocoderStatus.OK) {
      // Google geocoding has succeeded!
      if (results[0]) {
        // Always update the UI elements with new location data
        update_ui( results[0].formatted_address,
                   results[0].geometry.location )
 document.getElementById('osgb36lat').value = marker.position.lat();
  document.getElementById('osgb36lon').value = marker.position.lng();
        // Only update the map (position marker and center map) if requested
        if( update ) { update_map( results[0].geometry ) }
      } else {
        // Geocoder status ok but no results!?
        $('#gmaps-error').html("Sorry, something went wrong. Try again!");
      }
    } else {
      // Google Geocoding has failed. Two common reasons:
      //   * Address not recognised (e.g. search for 'zxxzcxczxcx')
      //   * Location doesn't map to address (e.g. click in middle of Atlantic)

      if( type == 'address' ) {
        // User has typed in an address which we can't geocode to a location
        $('#gmaps-error').html("Sorry! We couldn't find " + value + ". Try a different search term, or click the map." );
      } else {
        // User has clicked or dragged marker to somewhere that Google can't do a reverse lookup for
        // In this case we display a warning, clear the address box, but fill in LatLng
        $('#gmaps-error').html("Woah... that's pretty remote! You're going to have to manually enter a place name." );
        update_ui('', value)
      }
    };
  });
};

// initialise the jqueryUI autocomplete element
function autocomplete_init() {
  $("#gmaps-input-address").autocomplete({

    // source is the list of input options shown in the autocomplete dropdown.
    // see documentation: http://jqueryui.com/demos/autocomplete/
    source: function(request,response) {

      // the geocode method takes an address or LatLng to search for
      // and a callback function which should process the results into
      // a format accepted by jqueryUI autocomplete
      geocoder.geocode( {'address': request.term }, function(results, status) {
        response($.map(results, function(item) {
          return {
            label: item.formatted_address, // appears in dropdown box
            value: item.formatted_address, // inserted into input element when selected
            geocode: item                  // all geocode data: used in select callback event
          }
        }));
      })
    },

    // event triggered when drop-down option selected
    select: function(event,ui){
      update_ui(  ui.item.value, ui.item.geocode.geometry.location )
      update_map( ui.item.geocode.geometry )
    }
  });

  // triggered when user presses a key in the address box
  $("#gmaps-input-address").bind('keydown', function(event) {
    if(event.keyCode == 13) {
      geocode_lookup( 'address', $('#gmaps-input-address').val(), true );

      // ensures dropdown disappears when enter is pressed
      $('#gmaps-input-address').autocomplete("disable")
    } else {
      // re-enable if previously disabled above
      $('#gmaps-input-address').autocomplete("enable")
    }
  });
}; // autocomplete_init

$(document).ready(function() { 
  if( $('#gmaps-canvas').length  ) {
    gmaps_init();
    autocomplete_init();
  }; 
});

我已经在这方面工作了一段时间,我似乎无法解决我出错的地方。

我会非常感激,我想知道是否有人可以看看这个并告诉我哪里出错了。

非常感谢和亲切的问候

2 个答案:

答案 0 :(得分:0)

根据我的评论,您的PHP代码返回错误:

<b>Warning</b>:  include(admin/link.php) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>44</b><br />
<br />
<b>Warning</b>:  include() [<a href='function.include'>function.include</a>]: Failed opening 'admin/link.php' for inclusion (include_path='.:/usr/lib/php5') in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>44</b><br />
<br />
<b>Warning</b>:  include(admin/opendb.php) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  include() [<a href='function.include'>function.include</a>]: Failed opening 'admin/opendb.php' for inclusion (include_path='.:/usr/lib/php5') in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: Can't connect to local MySQL server through socket '/tmp/mysqld.sock' (2) in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>47</b><br />
<br />
<b>Warning</b>:  mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: A link to the server could not be established in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>47</b><br />
<br />
<b>Warning</b>:  mysql_fetch_array(): supplied argument is not a valid MySQL result resource in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>48</b><br />
<br />
<b>Warning</b>:  mysql_close(): supplied argument is not a valid MySQL-Link resource in <b>/homepages/2/d333603417/htdocs/development/test.php</b> on line <b>54</b><br />

这就是你无法从MySQL获取数据的原因。

答案 1 :(得分:0)

花了大量时间搜索网页并重新编写现有代码后,我找到了解决问题的方法。

标记和地理编码功能的加载来自this站点。有一段时间重写这个以满足我的需求,我已经能够创建一个具有所需功能的页面。亲切的问候