使用Node.JS进行谷歌地图定位

此系统需求为在浏览器页面中输入人名，提交到后台在数据库中查找地址，并将地址传递到浏览器页面后调用谷歌地图api，进行地址解析并定位标注（浏览器页面中需编写一个ajax调用）

服务器端代码server.js


var mysql      = require('mysql');
var pool = mysql.createPool({connectionLimit : 10,host     : 'us-cdbr-iron-east-02.cleardb.net',user     : 'bd6acx3bd0c01b',password : 'f4ba4af2',database : 'heroku_33a4ds48168f4x3',port:3306
});var fs = require('fs');
var http = require("http");
const url = require("url");
const querystring = require("querystring");
const server = http.createServer((request, response) => {    console.log(request.url);if (request.url.startsWith("/get?")) {        //数据处理const obj = url.parse(request.url, true)var peopleName=obj.query['peoplename'].toString()var arrName = peopleName.split(" ")let firstname=''let middlename=''let lastname=''let nameNum=0 //middlename会为空值，进行计算let index=[]let j=0for(let i=0;i<arrName.length;i++){if(arrName[i]!='')nameNum+=1if(arrName[i]!='') {index[j] = ij++}}if(nameNum==2){firstname=arrName[index[0]].toString()lastname=arrName[index[1]].toString()}else{firstname=arrName[index[0]].toString()middlename=arrName[index[1]].toString()lastname=arrName[index[2]].toString()}var  userAddSql_Params = [firstname, middlename,lastname];pool.query('SELECT addrbusiness,city,state FROM peopleinfo where firstname=? and middlename=? and lastname=?',userAddSql_Params, function (error, results) {//if (error) throw error;if (error)  return;console.log('The addr is: ', results[0].addrbusiness +' ' + results[0].city+ ' ' + results[0].state);response.writeHead(200,"ok",{"Content-type":"application/x-javascript","Access-Control-Allow-Origin":(request.url,"Access-Control-Allow-Headers":"damu","Access-Control-Allow-Methods":"PUT,DELETE,POST","Access-Control-Max-Age":"10"})//    if (item.hasOwnProperty("name")) {     }//var str = JSON.stringify(url.parse(request.url, true).query);response.write(results[0].addrbusiness +' ' + results[0].city+ ' ' + results[0].state);response.end();});} else if (request.url.startsWith("/post")) {} else {// response.writeHead(500, "Invalid Request", {"Content-Type": "text/html; charset=utf-8"});// response.end("无效请求");// 解析请求，包括文件名var pathname = url.parse(request.url).pathname;// 输出请求的文件名console.log("Request for " + pathname + " received.");// 从文件系统中读取请求的文件内容fs.readFile(pathname.substr(1), function (err, data) {if (err) {console.log(err);// HTTP 状态码: 404 : NOT FOUND// Content Type: text/htmlresponse.writeHead(404, {'Content-Type': 'text/html'});}else{// HTTP 状态码: 200 : OK// Content Type: text/htmlresponse.writeHead(200, {'Content-Type': 'text/html'});// 响应文件内容response.write(data.toString());}//  发送响应数据response.end();});}
})server.listen(process.env.PORT || 8080 , () => {//console.log(`server starting at ${config.host}:${config.port}`)console.log(`server starting at 127.0.0.1:8080`)
})

index.html页面代码

<!DOCTYPE html>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIqfSyCbzKZLTVlEJwsmQQy_RKSyFczidmpw63M&sensor=SET_TO_TRUE_OR_FALSE"></script><script>window.onload = ()=>{const peoplename = document.querySelector("#address");const ajaxBtn = document.querySelector("#submit");ajaxBtn.addEventListener("click",(ev)=>{ev = ev||event;ev.preventDefault();const query = peoplename.value;const url = "https://mynodejsmap.herokuapp.com"+`/get?peoplename=${query}`;//const url = "http://127.0.0.1:8080"+`/get?peoplename=${query}`;makeRequest("GET",url)})function makeRequest(method,url) {const   httpRequest = new XMLHttpRequest();if (!httpRequest) {alert('Giving up :( Cannot create an XMLHTTP instance');return false;}httpRequest.onreadystatechange = ()=>{if (httpRequest.readyState === XMLHttpRequest.DONE) {if (httpRequest.status === 200 || httpRequest.status === 304) {console.log(httpRequest.status.toString())console.log(httpRequest.responseText)                    //实例化Geocoder服务var geocoder = new google.maps.Geocoder();//1.地理解析过程//请求数据GeocoderRequest为addressgeocoder.geocode({ address: httpRequest.responseText }, function geoResults(results, status) {//这里是回调函数//状态为Ok说明正确if (status == google.maps.GeocoderStatus.OK) {                           //获取解析后的经纬度//alert('result：' + results[0].geometry.location);var latlng = new google.maps.LatLng(results[0].geometry.location.latitude,results[0].geometry.location.longitude);var myOptions = {zoom:16,                             //设定缩放倍数center:latlng,                       //地图中心设定为指定的坐标点mapTypeId:google.maps.MapTypeId.ROADMAP     //指定地图类型};var map = new google.maps.Map(document.getElementById("map"),myOptions);map.setCenter(results[0].geometry.location);var marker = new google.maps.Marker({map: map,position: results[0].geometry.location});}else {alert("：error " + status);}});} else {alert('There was a problem with the request.'+ httpRequest.status.toString());}}}httpRequest.open(method,url);httpRequest.send();}}
</script><html><head><title>Geocoding Service</title><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><style>/* Always set the map height explicitly to define the size of the div* element that contains the map. */#map {height: 100%;}/* Optional: Makes the sample page fill the window. */html, body {height: 100%;margin: 0;padding: 0;}#floating-panel {position: absolute;top: 10px;left: 25%;z-index: 5;background-color: #fff;padding: 5px;border: 1px solid #999;text-align: center;font-family: 'Roboto','sans-serif';line-height: 30px;padding-left: 10px;}</style></head><body><div id="floating-panel"><input id="address" type="textbox" value=""><input id="submit" type="button" value="Geocode"></div><div id="map"></div><script>var mapfunction initMap() {map = new google.maps.Map(document.getElementById('map'), {zoom: 8,center: {lat: -34.397, lng: 150.644}});      }</script><script async defersrc="https://maps.googleapis.com/maps/api/js?key=AIqfSyCbzKZLTVlEJosmQQy_RKSyFczidmpw63M&callback=initMap"></script></body>
</html>

效果如下：

初始界面

查询得到结果并定位

使用Node.JS进行谷歌地图定位相关推荐

Android谷歌地图+定位
安卓的谷歌地图简单实现,能够显示地图,并且定位到当前位置网上的教程和讲解有一大堆,我就不细说了,直接上代码需要注意的是,我这是v2版的,和V1比申请key的地址和方式有点变化,使用也有一点变化.建 ...
vue2.0/原生js使用谷歌地图并显示标记点（附两点间路径方法）
图1,谷歌地图初始化并实现显示点信息图2 ,谷歌地图实现两点间路径图3,高德地图实现搜索显示点,可点击地图取点并获取地址,也可以搜索出来具体文章前提使用地图,都是需要获取开发者的key的,去 ...
经纬度计算距离html,js版谷歌地图计算两经纬度坐标点的距离
球面上两点间大圆劣弧的距离html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html5 调用谷歌地图定位,使用html5地理定位的网页不如谷歌地图准确?
使用笔记本电脑上的浏览器Chrome,我打开了一个本地html网页以获取当前位置.返回的位置(1.3238272103.8606336)与我的实际位置不接近.相似性,网站 [1] (1.3238272 ...
[转]为什么我要用 Node.js? 案例逐一介绍
原文地址:http://blog.jobbole.com/53736/ 介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样, ...
node.js学习总结
NodeJS介绍 1.概述: Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网 ...
知乎：如何评价阿里开源的企业级 Node.js 框架 egg？ #18
知乎: 如何评价阿里开源的企业级 Node.js 框架 egg? #18 搬自我在知乎的问答: https://www.zhihu.com/question/50526101/answer/14495 ...
学习Node.js笔记
什么是Node.js 官方解释: Node.js 是一个基于 Chrome V8引擎的 JavaScript运行环境.Node.js使用了一个事件驱动.非阻塞式I/O的模型( Node.js的特性), ...
为什么我要用 Node.js? 案例逐一介绍
介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样,现在我们也可以在服务器上运行 JavaScript ,从前端跨越到后端, ...

使用Node.JS进行谷歌地图定位

使用Node.JS进行谷歌地图定位相关推荐

最新文章

热门文章