doucang9673 2015-07-21 21:02
浏览 58

将jQuery UI自动完成功能添加到项目后，Google地图的主要问题

I have run into major problems on my google maps project when I integrated an auto complete box and changed my code for a google maps script i have been working on. The map is supposed to communicate with a database and mark cities that have listings in them. When you click on the city it zooms in and marks the listings on the map. Well ever since I got the auto complete box to work I messed around with the map script and the markers are no longer showing up. On top of that I cannot get anything to log in the console through the map script but the map styles and map still appear. Can anyone help?

//buyersmap.js

function initialize() {

var cities = [];
var counties = [];
var states = [];
var zipcodes = [];

console.log("initialize");
var lat = 38.907097;
var lng = -77.094389;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

geocoder = new google.maps.Geocoder();

var styles = [
  {
    "elementType": "geometry",
    "stylers": [
      { "lightness": 44 },
      { "visibility": "simplified" }
    ]
  },{
    "elementType": "labels",
    "stylers": [
      { "lightness": 25 }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      { "color": "#808080" },
      { "visibility": "on" },
      { "weight": 2.9 },
      { "lightness": -27 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative.locality",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" },
      { "saturation": -27 },
      { "lightness": -21 },
      { "gamma": 1.63 }
    ]
  },{
    "featureType": "administrative",
    "elementType": "labels",
    "stylers": [
      { "visibility": "on" },
      { "hue": "#ff8000" },
      { "lightness": -19 },
      { "gamma": 0.82 }
    ]
  },{
  }
];

var styledMap = new google.maps.StyledMapType(styles, {name: 'Styled Map'});
console.log("map styled");
var mapOptions = {
    center: new google.maps.LatLng(lat, lng),
    zoom: 10,
    disableDefaultUI: true,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

console.log("map set");

$.ajaxSetup({async:false});
console.log("Async off");
$.post("./listingdata.php", {func: "size"}, function(data){
    numListings = parseInt(data);
    console.log("data: "+data);
});
console.log("start markers");
markCities();

google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;
        }
        else{
            map.setZoom(13);
            map.setCenter(this.position);
            for(var k = 0; k < markers.length; k++){
                markers[k].setMap(null);
            }
        }
    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
    map.setCenter(place.geometry.location);
    }
});

function markCities(){
    var coords_obj;
    var coordinates;
    for(var i = 0; i < numListings; i++){
        cities.push(getDB("city",i));
        states.push(getDB("state",i));
        address = getDB("city", i)+", "+getDB("state", i);
        geocoder.geocode({address: address}, function(results, status){
            coordinates = results[0].geometry.location;
            var image = new google.maps.MarkerImage(
                './maps/logo-marker.png',
                new google.maps.Size(44,64),
                new google.maps.Point(0,0),
                new google.maps.Point(0,-9)
            );

            var marker = new google.maps.Marker({
                position: coordinates,
                map: map,
                icon: './maps/logo-marker.png', 
                id: i
            });

            google.maps.event.addListener(marker, 'click', function() {
                    map.setZoom(13);
                    map.setCenter(this.position);
                    for(var k = 0; k < markers.length; k++){
                        markers[k].setMap(null);
                    }
                    markListings();
            });

            markers.push(marker);
        });
    }   
}

function markListings(){

    for(var i = 0; i < numListings; i++){

        lat = getDB('lat', i);
        lng = getDB('lng', i);

        if(!isNaN(lng)){
            var image = new google.maps.MarkerImage(
                './maps/orange-marker.png',
                new google.maps.Size(22,32),
                new google.maps.Point(0,0),
                new google.maps.Point(0,0)
            );

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                icon: './maps/logo-marker.png',
                map: map,
                id: i,
            });

            google.maps.event.addListener(marker, 'click', function() {

                var defaultPic = "../sell/userdata/listingpics/"+getDB('defaultPic', this.id);

                var template =
                '<div class="containter" style="height: 100%; width:400px;">'+
                    '<div class="infobox-header" style="margin: 2px; border-bottom: 1px solid #e6e6e6;">'+
                        '<strong><h4>'+getDB('name', this.id)+'</h4></strong></div>'+
                    '<div class="infobox-content" style="margin: 2px; width: 390px; padding: 5px; display:inline-block">'+
                        '<div class="info-lt-content" style="width: 50%; padding: 5px; display:inline-block">'+
                            '<img src ='+defaultPic+' onerror ="imgError(this);" height = 100% width = 100%></a>'+
                        '</div>'+
                        '<div class="info-rt-content" style="width: 50%; height:100% padding: 5px; display:inline-block">'+
                            '<b>Asking Price:</b> '+getDB('price', this.id)+'<br>'+
                            '<b>Sqft:</b> '+getDB('sqft', this.id)+'<br>'+
                            '<b>Beds:</b> '+getDB('bedrooms', this.id)+'<br>'+
                            '<b>Baths:</b> '+getDB('bathrooms', this.id)+'<br>'+
                        '</div>'+
                    '</div>'+
                    '<div class="infobox-footer" style="margin: 5px; padding: 10px;border-top: 1px solid #e6e6e6;">'+
                        '<a href = "../property_info/index.php?id='+(this.id+96)+'"><button type="button" class="btn btn-warning">View Full Listing</button></a>'+
                    '</div>'+
                '</div>';

                infoWindow.setContent(template);
                infoWindow.open(map, this);
                });
                markers.push(marker);
            }
    }
}
function getDB(val, id){
    console.log("getDB");
    var r;
    $.post("../serverscripts/listingdata.php", {func: 'get', val: val, id: id+96}, function(data){
            r = data;
        });
    return r;
}
}

google.maps.event.addDomListener(window, 'load', initialize);

index

<?php
ob_start();
session_start();  
?>

<!DOCTYPE html>

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<!-- Page Title -->
<title>UrbanaRE -- Property Info</title>

<meta name="keywords" content="real estate, responsive, retina ready, modern html5 template, bootstrap, css3">
<meta name="description" content="Cozy - Responsive Real Estate HTML5 Template">
<meta name="author" content="Wisely Themes - www.wiselythemes.com">
<meta http-equiv="content-type" content="text/html; charset=latin1_swedish_ci">
<!-- Mobile Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Fav and touch icons -->
<link rel="shortcut icon" href="http://www.urbanare.com/wp-content/themes/sps/images/fav.ico">
<link rel="apple-touch-icon" href="http://comingsoon.safepropserv.com/landing/images/fav_touch_icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://comingsoon.safepropserv.com/landing/images/fav_touch_icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://comingsoon.safepropserv.com/landing/images/fav_touch_icons/apple-touch-icon-114x114.png">

<!-- IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

<!-- Google Web Font -->
<link href="../sell/JS/css" rel="stylesheet" type="text/css">

<!-- Bootstrap CSS -->
<link href="http://comingsoon.safepropserv.com/landing/css/bootstrap.min.css" rel="stylesheet">

<!-- Template CSS
<link href="css/style.css" rel="stylesheet" />
-->

<!-- LESS Template -->
<link rel="stylesheet/less" type="text/css" href="../sell/JS/style.less">


<script>
    less = {
        env: "development",
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false
    };
</script>
<script src="../libs/less-1.7.0.min.js"></script>

<!-- Modernizr -->
<script src="../libs/modernizr-2.8.1.min.js"></script>
<script src="../libs/modernizr-2.8.1.min.js"></script>

<!--jQuery/Ajax-->

<!--Google Maps API-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHVLI_wVtPSKnJpcPN-pKySY5ZwcB4k8M"></script>

<!--Page Layout-->
<style type="text/css" id="less:landing-css-style" src="./CSS/layout.css"></style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="./jquery-ui.css">
<script src="./jquery-ui.js"></script>

<!--Load Map-->
<script style="text/css" src="./maps/buyersmap.js"></script>


<script>
$(function() {
  console.log("test.");
    var availableTags = [
      "Gaithersburg, MD",
      "Rockville, MD",
      "Upper Marlboro, MD",
      "Arlington, VA",
      "Mclean, VA",
      "Aldie, VA"

    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
</script>

<!--Map Layout-->
<style type="text/css">
#map-canvas { height: 600px; width: 100%;}
  #text-box {margin-top:20px;}
  .controls {
        margin-top:16px;
        margin-right: 0px;
        text-align: center;
        border: 1px solid #CCC;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        width: 80%;
        outline: none;
        }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
      #filters {
        border: solid 1px #999;

      }
      #search {
          margin-top: 4px;
      }

</style>
</head>

<body>
<!-- BEGIN WRAPPER -->
<div id="wrapper">

    <!--IMPORT HEADER-->
    <?php include "../header/header.php"; ?>

    <!-- BEGIN CONTENT WRAPPER -->
    <div class="content">
            <div class="row">
                <div class = "well" style="text-align: center;">
                    <div class="ui-widget">
                        <input id="tags">
                    </div>
                </div>
                <!--MAP-->
                <div class="col-sm-12" style="">
                    <div id="map-canvas"></div>     
                </div>

            </div>  
    </div>
</div>
<!-- END CONTENT WRAPPER -->
    <?php include("../footer/footer.php");?>
</div>
<!-- END WRAPPER -->


<!-- Libs -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHVLI_wVtPSKnJpcPN-pKySY5ZwcB4k8M"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

list data

<?php
session_start();
$db = mysql_connect("localhost:3306", "un", "pw*") or die(mysql_error);
mysql_select_db('urbanas8_db', $db) or die(mysql_error());

$func = $_POST['func'];

//Retrieves Data
if($func=="get"){

    $id = $_POST['id'];
    $val = $_POST['val'];
    $query = mysql_query("SELECT * FROM properties WHERE id='$id'") or die(mysql_error);
    $rows = mysql_fetch_assoc($query);

    if($val=="lat"){
        echo $rows['lat'];
    } 
    else if($val=="lng") {
        echo $rows['lng'];
    }
    else if($val=="name") {
        echo $rows['property_name'];
    }
    else if($val=="seller") {
        echo $rows['seller_email'];
    }
    else if($val=="price") {
        echo $rows['list_price'];
    }
    else if($val=="fees") {
        echo $rows['maintanence_fees'];
    }
    else if($val=="streetAddress") {
        echo $rows['street_address'];
    }
    else if($val=="city") {
        echo $rows['city'];
    }
    else if ($val=="state") {
        echo $rows['state'];
    }
    else if ($val=="zip") {
        echo $rows['zip'];
    }
    else if ($val=="county") {
        echo $rows['county'];
    }
    else if ($val=="sqft") {
        echo $rows['square_feet'];
    }
    else if ($val=="yearBuilt") {
        echo $rows['year_built'];
    }
    else if ($val=="propertyType") {
        echo $rows['property_type'];
    }
    else if ($val=="bedrooms") {
        echo $rows['bedrooms'];
    }
    else if ($val=="bathrooms") {
        echo $rows['bathrooms'];
    }
    else if ($val=="parkingType") {
        echo $rows['parking_type'];
    }
    else if ($val=="description") {
        echo $rows['description'];
    }
    else if ($val=="dateListed") {
        echo $rows['date_listed'];
    }
    else if($val=="defaultPic"){
        echo $rows['default_pic'];
    }
    else {
        echo "(listingdata.php 'get') Invalid Value.";
    }
}

//Add Listing
else if($func=="new"){


    $a = $_POST['property_name'];
    $b = $_SESSION['user_email'];
    $c = $_POST['list_price'];
    $cc = $_POST['maintanence_fees'];
    $d = $_POST['street_address'];
    $e = $_POST['city'];
    $f = $_POST['state'];
    $g = $_POST['zip'];
    $h = $_POST['county'];
    $i = $_POST['square_feet'];
    $j = $_POST['year_build'];
    $k = $_POST['property_type'];
    $l = $_POST['bedrooms'];
    $m = $_POST['bathrooms'];
    $n = $_POST['parking_type'];
    $o = urlencode($_POST['description']);
    $p = date("Y-m-d");
    $q = "defaultpic.jpg";
    $r = $_POST['lat'];
    $s = $_POST['lng'];

    $query = mysql_query("INSERT INTO properties VALUES('', '$a', '$b', '$c', '$cc', '$d', '$e', '$f', '$g', '$h', '$i', '$j', '$k', '$l', '$m', '$n', '$o', '$p', '$q', '$r', '$s')") or die(mysql_error()); 
    $_SESSION['edit_listing'] = mysql_insert_id();
    echo $_SESSION['edit_listing'];
    header("Location: ./upload.php");
}


//Number of Listings
else if($func=="size"){
    $query = mysql_query("SELECT * FROM properties"));
    $rows = mysql_num_rows($query);
    echo("test: " + $rows);
} 

?>
  • 写回答

0条回答 默认 最新

    报告相同问题？

    悬赏问题

    • ¥20 西门子S7-Graph,S7-300，梯形图
    • ¥50 用易语言http 访问不了网页
    • ¥50 safari浏览器fetch提交数据后数据丢失问题
    • ¥15 matlab不知道怎么改，求解答！！
    • ¥15 永磁直线电机的电流环pi调不出来
    • ¥15 用stata实现聚类的代码
    • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
    • ¥20 docker里部署springboot项目，访问不到扬声器
    • ¥15 netty整合springboot之后自动重连失效
    • ¥15 悬赏！微信开发者工具报错，求帮改