Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/408.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 需要帮助添加圆形半径到我在谷歌地图上的所有位置吗_Javascript - Fatal编程技术网

Javascript 需要帮助添加圆形半径到我在谷歌地图上的所有位置吗

Javascript 需要帮助添加圆形半径到我在谷歌地图上的所有位置吗,javascript,Javascript,所以这是我第一次发帖,尝试在地图上的每个位置添加一个圆形半径有很大的困难。这些位置是从“google fusion tables”收集的,我的问题是我能通过javascript代码在地图上“绘制”这些圆形半径吗。代码贴在下面 非常感谢 (function (window, undefined) { var MapsLib = function (options) { var self = this; options = options || {}; this.reco

所以这是我第一次发帖,尝试在地图上的每个位置添加一个圆形半径有很大的困难。这些位置是从“google fusion tables”收集的,我的问题是我能通过javascript代码在地图上“绘制”这些圆形半径吗。代码贴在下面

非常感谢

(function (window, undefined) {
var MapsLib = function (options) {
    var self = this;

    options = options || {};

    this.recordName = options.recordName || "result"; //for showing a count of results
    this.recordNamePlural = options.recordNamePlural || "results";
    this.searchRadius = options.searchRadius || 24140; //in meters ~ 15 mile

    // the encrypted Table ID of your Fusion Table (found under File => About)
    this.fusionTableId = options.fusionTableId || "1hBZWnWMHd1odTScLTi4lV3T3lWAtbK_C018MPVN0",

    // Found at https://console.developers.google.com/
    // Important! this key is for demonstration purposes. please register your own.
    this.googleApiKey = options.googleApiKey || "AIzaSyCMjlHSI4Z5zOq5q00bIQ9zwuG9mpPqlUY",

    // name of the location column in your Fusion Table.
    // NOTE: if your location column name has spaces in it, surround it with single quotes
    // example: locationColumn:     "'my location'",
    this.locationColumn = options.locationColumn || "geometry";

    // appends to all address searches if not present
    this.locationScope = options.locationScope || "";

    // zoom level when map is loaded (bigger is more zoomed in)
    this.defaultZoom = options.defaultZoom || 6; 

    // center that your map defaults to
    this.map_centroid = new google.maps.LatLng(options.map_center[0], options.map_center[1]);

    // marker image for your searched address
    if (typeof options.addrMarkerImage !== 'undefined') {
        if (options.addrMarkerImage != "")
            this.addrMarkerImage = options.addrMarkerImage;
        else
            this.addrMarkerImage = ""
    }
    else
        this.addrMarkerImage = "images/blue-pushpin.png"

    this.currentPinpoint = null;
    $("#result_count").html("");

    this.myOptions = {
        zoom: this.defaultZoom,
        center: this.map_centroid,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.geocoder = new google.maps.Geocoder();
    this.map = new google.maps.Map($("#map_canvas")[0], this.myOptions);

    // maintains map centerpoint for responsive design
    google.maps.event.addDomListener(self.map, 'idle', function () {
        self.calculateCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function () {
        self.map.setCenter(self.map_centroid);
    });
    self.searchrecords = null;

    //reset filters
    $("#search_address").val(self.convertToPlainString($.address.parameter('address')));
    var loadRadius = self.convertToPlainString($.address.parameter('radius'));
    if (loadRadius != "") 
        $("#search_radius").val(loadRadius);
    else 
        $("#search_radius").val(self.searchRadius);

    $(":checkbox").prop("checked", "checked");
    $("#result_box").hide();

    //-----custom initializers-----
    //-----end of custom initializers-----

    //run the default search when page loads
    self.doSearch();
    if (options.callback) options.callback(self);
};

//-----custom functions-----
//-----end of custom functions-----

MapsLib.prototype.submitSearch = function (whereClause, map) {
    var self = this;
    //get using all filters
    //NOTE: styleId and templateId are recently added attributes to load custom marker styles and info windows
    //you can find your Ids inside the link generated by the 'Publish' option in Fusion Tables
    //for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
    self.searchrecords = new google.maps.FusionTablesLayer({
        query: {
            from: self.fusionTableId,
            select: self.locationColumn,
            where: whereClause
        },
        styleId: 2,
        templateId: 2
    });
    self.fusionTable = self.searchrecords;
    self.searchrecords.setMap(map);
    self.getCount(whereClause);

    var map = new google.maps.Map(mapDiv, mapOptions);

    var circle = new google.maps.Circle ({
        map:map,
        center: new google.maps.LatLng (39.09024, -119.4179324),
        radius: 80000,
        strokeColor:"#00ff00",
        fillColor:"red"
    });
};

MapsLib.prototype.getgeoCondition = function (address, callback) {
    var self = this;
    if (address !== "") {
        if (address.toLowerCase().indexOf(self.locationScope) === -1) {
            address = address + " " + self.locationScope;
        }
        self.geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                self.currentPinpoint = results[0].geometry.location;
                var map = self.map;

                $.address.parameter('address', encodeURIComponent(address));
                $.address.parameter('radius', encodeURIComponent(self.searchRadius));
                map.setCenter(self.currentPinpoint);
                // set zoom level based on search radius
                if (self.searchRadius >= 1610000) map.setZoom(4); // 1,000 miles
                else if (self.searchRadius >= 805000) map.setZoom(5); // 500 miles
                else if (self.searchRadius >= 402500) map.setZoom(6); // 250 miles
                else if (self.searchRadius >= 161000) map.setZoom(7); // 100 miles
                else if (self.searchRadius >= 80500) map.setZoom(8); // 100 miles
                else if (self.searchRadius >= 40250) map.setZoom(9); // 100 miles
                else if (self.searchRadius >= 24140) map.setZoom(9); // 10 miles
                else if (self.searchRadius >= 8050) map.setZoom(12); // 5 miles
                else if (self.searchRadius >= 3220) map.setZoom(13); // 2 miles
                else if (self.searchRadius >= 1610) map.setZoom(14); // 1 mile
                else if (self.searchRadius >= 805) map.setZoom(15); // 1/2 mile
                else if (self.searchRadius >= 400) map.setZoom(16); // 1/4 mile
                else self.map.setZoom(17);

                if (self.addrMarkerImage != '') {
                    self.addrMarker = new google.maps.Marker({
                        position: self.currentPinpoint,
                        map: self.map,
                        icon: self.addrMarkerImage,
                        animation: google.maps.Animation.DROP,
                        title: address
                    });
                }
                var geoCondition = " AND ST_INTERSECTS(" + self.locationColumn + ", CIRCLE(LATLNG" + self.currentPinpoint.toString() + "," + self.searchRadius + "))";
                callback(geoCondition);
                self.drawSearchRadiusCircle(self.currentPinpoint);
            } else {
                alert("We could not find your address: " + status);
                callback('');
            }
        });
    } else {
        callback('');
    }
};

MapsLib.prototype.doSearch = function () {
    var self = this;
    self.clearSearch();
    var address = $("#search_address").val();
    self.searchRadius = $("#search_radius").val();
    self.whereClause = self.locationColumn + " not equal to ''";

    //-----custom filters-----
    //-----end of custom filters-----

    self.getgeoCondition(address, function (geoCondition) {
        self.whereClause += geoCondition;
        self.submitSearch(self.whereClause, self.map);
    });

};

MapsLib.prototype.reset = function () {
    $.address.parameter('address','');
    $.address.parameter('radius','');
    window.location.reload();
};


MapsLib.prototype.getInfo = function (callback) {
    var self = this;
    jQuery.ajax({
        url: 'https://www.googleapis.com/fusiontables/v1/tables/' + self.fusionTableId + '?key=' + self.googleApiKey,
        dataType: 'json'
    }).done(function (response) {
        if (callback) callback(response);
    });
};

MapsLib.prototype.addrFromLatLng = function (latLngPoint) {
    var self = this;
    self.geocoder.geocode({
        'latLng': latLngPoint
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                $('#search_address').val(results[1].formatted_address);
                $('.hint').focus();
                self.doSearch();
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
};

MapsLib.prototype.drawSearchRadiusCircle = function (point) {
    var self = this;
    var circleOptions = {
        strokeColor: "#4b58a6",
        strokeOpacity: 0.3,
        strokeWeight: 1,
        fillColor: "#4b58a6",
        fillOpacity: 0.05,
        map: self.map,
        center: point,
        clickable: false,
        zIndex: -1,
        radius: parseInt(self.searchRadius)
    };
    self.searchRadiusCircle = new google.maps.Circle(circleOptions);
};

MapsLib.prototype.query = function (query_opts, callback) {
    var queryStr = [],
        self = this;
    queryStr.push("SELECT " + query_opts.select);
    queryStr.push(" FROM " + self.fusionTableId);
    // where, group and order clauses are optional
    if (query_opts.where && query_opts.where != "") {
        queryStr.push(" WHERE " + query_opts.where);
    }
    if (query_opts.groupBy && query_opts.groupBy != "") {
        queryStr.push(" GROUP BY " + query_opts.groupBy);
    }
    if (query_opts.orderBy && query_opts.orderBy != "") {
        queryStr.push(" ORDER BY " + query_opts.orderBy);
    }
    if (query_opts.offset && query_opts.offset !== "") {
        queryStr.push(" OFFSET " + query_opts.offset);
    }
    if (query_opts.limit && query_opts.limit !== "") {
        queryStr.push(" LIMIT " + query_opts.limit);
    }
    var theurl = {
        base: "https://www.googleapis.com/fusiontables/v1/query?sql=",
        queryStr: queryStr,
        key: self.googleApiKey
    };
    $.ajax({
        url: [theurl.base, encodeURIComponent(theurl.queryStr.join(" ")), "&key=", theurl.key].join(''),
        dataType: "json"
    }).done(function (response) {
        //console.log(response);
        if (callback) callback(response);
    }).fail(function(response) {
        self.handleError(response);
    });
};

MapsLib.prototype.handleError = function (json) {
    if (json.error !== undefined) {
        var error = json.responseJSON.error.errors;
        console.log("Error in Fusion Table call!");
        for (var row in error) {
            console.log(" Domain: " + error[row].domain);
            console.log(" Reason: " + error[row].reason);
            console.log(" Message: " + error[row].message);
        }
    }
};
MapsLib.prototype.getCount = function (whereClause) {
    var self = this;
    var selectColumns = "Count()";
    self.query({
        select: selectColumns,
        where: whereClause
    }, function (json) {
        self.displaySearchCount(json);

    });
};

MapsLib.prototype.displaySearchCount = function (json) {
    var self = this;

    var numRows = 0;
    if (json["rows"] != null) {
        numRows = json["rows"][0];
    }
    var name = self.recordNamePlural;
    if (numRows == 1) {
        name = self.recordName;
    }
    $("#result_box").fadeOut(function () {
        $("#result_count").html(self.addCommas(numRows) + " " + name + " found");
    });
    $("#result_box").fadeIn();
};

MapsLib.prototype.getList = function(whereClause) {
    var self = this;
    var selectColumns = 'name, description ';

    self.query({ 
      select: selectColumns, 
      where: whereClause 
    }, function(response) { 
      self.displayList(response);
    });
},

MapsLib.prototype.displayList = function(json) {
    var self = this;

    var data = json['rows'];
    var template = '';

    var results = $('#results_list');
    results.hide().empty(); //hide the existing list and empty it out first

    if (data == null) {
      //clear results list
  results.append("<li><span class='lead'>No results found</span></li>");
    }
    else {
      for (var row in data) {
        template = "\
          <div class='row-fluid item-list'>\
            <div class='span12'>\
              <strong>" + data[row][0] + "</strong>\
              <br />\
              " + data[row][1] + "\
              <br />\
              " + data[row][2] + "\
              <br />\
              " + data[row][3] + "\
            </div>\
          </div>";
        results.append(template);
      }
    }
    results.fadeIn();
},

MapsLib.prototype.addCommas = function (nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
};

// maintains map centerpoint for responsive design
MapsLib.prototype.calculateCenter = function () {
    var self = this;
    center = self.map.getCenter();
};

//converts a slug or query string in to readable text
MapsLib.prototype.convertToPlainString = function (text) {
    if (text === undefined) return '';
    return decodeURIComponent(text);
};

MapsLib.prototype.clearSearch = function () {
    var self = this;
    if (self.searchrecords && self.searchrecords.getMap) 
        self.searchrecords.setMap(null);
    if (self.addrMarker && self.addrMarker.getMap) 
        self.addrMarker.setMap(null);
    if (self.searchRadiusCircle && self.searchRadiusCircle.getMap) 
        self.searchRadiusCircle.setMap(null);
};

MapsLib.prototype.findMe = function () {
    var self = this;
    var foundLocation;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var accuracy = position.coords.accuracy;
            var coords = new google.maps.LatLng(latitude, longitude);
            self.map.panTo(coords);
            self.addrFromLatLng(coords);
            self.map.setZoom(14);
            jQuery('#map_canvas').append('<div id="myposition"><i class="fontello-target"></i></div>');
            setTimeout(function () {
                jQuery('#myposition').remove();
            }, 3000);
        }, function error(msg) {
            alert('Please enable your GPS position future.');
        }, {
            //maximumAge: 600000,
            //timeout: 5000,
            enableHighAccuracy: true
        });
    } else {
        alert("Geolocation API is not supported in your browser.");
    }
};
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
    module.exports = MapsLib;
} else if (typeof define === 'function' && define.amd) {
    define(function () {
        return MapsLib;
    });
} else {
    window.MapsLib = MapsLib;
}

})(window);
(函数(窗口,未定义){
var MapsLib=函数(选项){
var self=这个;
选项=选项| |{};
this.recordName=options.recordName | |“result”;//用于显示结果计数
this.recordnamemultral=options.recordnamemultral | | |“结果”;
this.searchRadius=options.searchRadius | | 24140;//单位为米~15英里
//Fusion表的加密表ID(在File=>About下找到)
this.fusionTableId=options.fusionTableId | |“1HBZWNWHD1ODTSCLTI4LV3T3LWATBK_C018MPVN0”,
//发现于https://console.developers.google.com/
//重要!此密钥用于演示。请注册您自己的密钥。
this.googleApiKey=options.googleApiKey | |“aizasycmjhlhsi4z5zoq5q00biq9zwug9mppqluy”,
//Fusion表中位置列的名称。
//注意:如果位置列名中有空格,请用单引号将其括起来
//示例:locationColumn:“我的位置”,
this.locationColumn=options.locationColumn | |“几何体”;
//附加到所有地址搜索(如果不存在)
this.locationScope=options.locationScope | |“”;
//加载地图时的缩放级别(放大越大)
this.defaultZoom=options.defaultZoom | | 6;
//地图默认设置为的中心
this.map_centroid=new google.maps.LatLng(options.map_center[0],options.map_center[1]);
//标记搜索地址的图像
if(typeof options.addrMarkerImage!=“未定义”){
如果(options.addrMarkerImage!=“”)
this.addrMarkerImage=options.addrMarkerImage;
其他的
this.addrMarkerImage=“”
}
其他的
this.addrMarkerImage=“images/blue pushpin.png”
this.currentPinpoint=null;
$(“#结果#计数”).html(“”);
此.myOptions={
zoom:this.defaultZoom,
中心:这个.map\u形心,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
this.geocoder=新的google.maps.geocoder();
this.map=new google.maps.map($(“#map_canvas”)[0],this.myOptions);
//维护地图中心点,实现响应性设计
google.maps.event.addDomListener(self.map,'idle',函数(){
self.calculateCenter();
});
google.maps.event.addDomListener(窗口“调整大小”,函数(){
self.map.setCenter(self.map\u质心);
});
self.searchrecords=null;
//重置过滤器
$(“#搜索地址”).val(self.convertToPlainString($.address.parameter('address'));
var loadRadius=self.convertToPlainString($.address.parameter('radius'));
如果(加载半径!=“”)
$(“搜索半径”).val(加载半径);
其他的
$(“#搜索半径”).val(self.searchRadius);
$(“:checkbox”).prop(“选中”、“选中”);
$(“#结果框”).hide();
//-----自定义初始值设定项-----
//-----自定义初始值设定项结束-----
//加载页面时运行默认搜索
self.doSearch();
if(options.callback)options.callback(self);
};
//-----自定义函数-----
//-----自定义函数结束-----
MapsLib.prototype.submitSearch=函数(whereClause,map){
var self=这个;
//使用所有过滤器获取
//注意:styleId和templateId是最近添加的属性,用于加载自定义标记样式和信息窗口
//您可以在Fusion表中“发布”选项生成的链接中找到您的ID
//有关详细信息,请参阅https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
self.searchrecords=new google.maps.FusionTablesLayer({
查询:{
发件人:self.fusionTableId,
选择:self.locationColumn,
where:where条款
},
styleId:2,
模板ID:2
});
self.fusionable=self.searchrecords;
self.searchrecords.setMap(map);
self.getCount(其中第条);
var map=new google.maps.map(mapDiv,maptoptions);
var circle=new google.maps.circle({
地图:地图,
中心:新google.maps.LatLng(39.09024,-119.4179324),
半径:80000,
strokeColor:#00ff00“,
填充颜色:“红色”
});
};
MapsLib.prototype.getgeoCondition=函数(地址,回调){
var self=这个;
如果(地址!==“”){
if(address.toLowerCase().indexOf(self.locationScope)=-1){
地址=地址+“”+self.locationScope;
}
self.geocoder.geocode({
“地址”:地址
},功能(结果、状态){
if(status==google.maps.GeocoderStatus.OK){
self.currentPinpoint=结果[0]。geometry.location;
var-map=self.map;
$.address.parameter('address',encodeURIComponent(address));
$.address.parameter('radius',encodeURIComponent(self.searchRadius));
map.setCenter(self.currentPinpoint);
//根据搜索半径设置缩放级别
如果(self.searchRadius>=1610000)map.setZoom(4);//1000英里
如果(self.searchRadius>=805000)map.setZoom(5);//500英里
如果(self.searchRadius>=402500)map.setZoom(6);//250英里
如果(self.searchRadius>=161000)map.setZoom(7);//100英里
如果(self.searchRadius>=80500)map.setZoom(8);//100英里
如果(self.searchRadius>=40250)map.setZoom(9);//100英里
如果(self.searchRadius>=24140)map.setZoom(9);//10英里
如果(self.searchRadius>=8050)map.setZoom(12);//5英里
否则如果(self.searchRadius>=3220)map.setZoom(13)//