谷歌地图从PHP数据库中的多个标记

时间:2018-03-13 06:43:50

标签: php html json ajax

我正在研究Core PHP,我已经为单个静态地址创建了谷歌地图标记,我需要从数据库传递动态多个名称和地址,在这里将编写查询从数据库获取数据,单个地址工作正常,但我需要多个地址和多个谷歌标记,如何做到这一点,请帮助我。

这里是我的代码:index.php

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
 <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript">
  var map;
  //alert(map);
  function getData() {
    $.ajax({
    url: "map_api.php",
    async: true,
    dataType: 'json',
    success: function (data) {
      console.log(data);
      init_map(data);
    }
  });  
  }
  function init_map(data) {
        var map_options = {
            zoom: 14,
            center: new google.maps.LatLng(data['latitude'], data['longitude'])
          }
        map = new google.maps.Map(document.getElementById("map"), map_options);
       marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(data['latitude'], data['longitude'])
        });
        infowindow = new google.maps.InfoWindow({
            content: data['formatted_address']
        });
        google.maps.event.addListener(marker, "click", function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3cIb3aYyySipxodqNJgRDUpIC17VrnXY&callback=getData" async defer></script>
</html> 

这是我的map_api.php文件:

<?php
function get_geocode($address){
    $address = urlencode($address);
        $url = "http://maps.google.com/maps/api/geocode/json?address={$address}";
        $resp_json = file_get_contents($url);
        $resp = json_decode($resp_json, true);
    //response status will be 'OK'means if able to geocode given address
    if($resp['status']=='OK'){
    $data_arr = array(); 
        $data_arr['latitude'] = isset($resp['results'][0]['geometry']['location']['lat']) ? $resp['results'][0]['geometry']['location']['lat'] :'';
        $data_arr['longitude'] = isset($resp['results'][0]['geometry']['location']['lng']) ? $resp['results'][0]['geometry']['location']['lng'] : '';
        $data_arr['formatted_address'] = isset($resp['results'][0]['formatted_address']) ? $resp['results'][0]['formatted_address'] :'';        
        if(!empty($data_arr) && !empty($data_arr['latitude']) && !empty($data_arr['longitude'])){
            return $data_arr;
        }else{
            return false;
        }
    }else{
        return false;
    }
}
    echo json_encode(get_geocode('4102/4C, SRK Arcade, Tavarkere Main Road, BTM 1st Stage,Bengaluru, Karnataka 560029'));
?>

0 个答案:

没有答案