Angularjs+node+Mysql实现地图上的多点标注
注：本文适合对于node有一定基础的人，如果您是小白，请先用1个小时学习node。node文档https://nodejs.org/en/docs/
该片博文的源码地址：https://github.com/zhangxy1035/Gould
一、项目介绍
近几年，在大数据的驱动下，数据可视化变的越来越重要，其中现在比较火的就是地理位置可视化，在这篇文章中，将使用node作为服务器，angularjs作为前台显示，mysql作为数据库，实现地图上的多点标注。系统架构建设简单，可复用性高。
在这里node的性能就不给大家赘述，项目中的地图接口使用的是高德地图，首先需要成为高德的开发者具体网址为http://lbs.amap.com/，其中需要申请开发者的key，只有将这个可以添加到自己的网页中才能做接下来的操作，首先咱们先来看一下，最终的效果图是如何的。
二、项目展示
由于图中的点较多，所以选择放在了数据库中，当然读者也可以不通过架设数据库，将自己的数据放入缓存中进行加载显示。
按照正常习惯，我们首先来用node搭建后台，需要用到这几个模快，使用npm 命令行加载这些模块，body-parser， express，log4js，mysql（数据库模块）
三、项目搭建
该项目所用的编写工具是webStorm，项目结构入下图：
其中node_modules中包含着npm所加载的模块，service主要是用node所写的后台服务，web中包含的是前台的网页html，css，js等
首先来说一下数据库中的数据方便大家理解，在我的数据库中new_1这张表，只有3个字段。其中存储的字段是site_id,lng,lat。site_id表示的是点的信息，lng和lat表示的是经度和纬度。
starts.js代码如下，在该项目中，node start，该服务才会被启动
var express = require('express');
var app = express();
var path = require('path');
var bodyParser = require('body-parser');
var position = require('./position');
app.set('port', process.env.PORT || 9909);
app.use(bodyParser.urlencoded({ extended: false })) ;
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../web')));
app.use(express.static(path.join(__dirname, '../app')));
app.post('/getAllMarker',position.getAllMarker);
app.listen(app.get('port'),function(){
console.log('成功开启node,端口号:'+app.get('port'));
});
process.on('uncaughtException', function (err) {
console.log(err);
});
接下来介绍与数据库交互的文件position，在该文件中使用了mysql的包，具体操作复杂业务可参考：https://github.com/mysqljs/mysql
var sql = require('mysql');
var connection = sql.createConnection({
host:'localhost',
user:'root',
password:'zhang123',
database:'test'
});
connection.connect();
/**
* 获取所有标记点
* @param req
* @param res
*/
exports.getAllMarker = function(req,res) {
console.log('获取所有标记点服务器端');
console.log(req.body);
var con = connection.query("select * from new_1",function(err,result,fields){
if(err){
throw err;
}
console.log("rows",result[0].site_id);
var new_1 = [];
result.forEach(function (item) {
var new_1item = {
site_id: item.site_id,
lng: item.lng,
lat: item.lat
};
new_1.push(new_1item);
});
console.log("rowsss",new_1);
res.send({retCode:1,data:new_1});
})
};
现在开始介绍前台，前台页面，在这个页面中需要输入开发者从高德地图上获取到的key值。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,html,#container{
height: 100%;
margin: 0px
}
</style>
<title>打点</title> </head>
<body>
<!--<div id="container" tabindex="0" style=" width: 600px; height:400px">-->
<div id="container" tabindex="0">
</div>
<div class="controllerTopDiv" ng-app="PCMapInput" ng-controller="new1Ctrl">
</div>
<script src="lib/angualrjs.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?你的key"></script>
<script type="text/javascript" src="js/webController.js"></script>
<script type="text/javascript" src="js/webService.js"></script>
</body>
</html>
以及前台的所需要的js文件：controller.js
angular.module('PCMapInput',['PCFactory'])
.constant("CONFIG",{
host: "http://192.168.1.103:9909",//本机测试地址(可变)
version:'1.0.0'//版本
})
.controller('new1Ctrl',function($scope,Position) {
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 10,
center: [121.48,31.22]
});
AMap.plugin('AMap.ToolBar',function(){
var toolbar = new AMap.ToolBar();
map.addControl(toolbar)
})
Position.getAllMarker({},function(data){
var infoWindow = new AMap.InfoWindow({offset:new AMap.Pixel(0,-30)});
for(var i=0;i<data.data.length;i++ ){
var site_id = data.data[i].site_id;
var lng = data.data[i].lng;
var lat = data.data[i].lat;
var marker = new AMap.Marker({
position: [data.data[i].lng, data.data[i].lat],
map:map
});
marker.content='网点'+(site_id);
marker.on('click',markerClick);
marker.emit('click',{target:marker});
}
function markerClick(e){
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
});
});
controller的服务;
angular.module('PCFactory',[])
.factory('Position',function($http,CONFIG){
var getAllMarker = function (query,success) {
$http.post(CONFIG.host + '/getAllMarker',query)
.success(function(data){
success(data);
});
};
return {
getAllMarker : getAllMarker
};
});
项目中所需要的lib文件亦在github上，包括angualrjs.min.js，angualrjs.min.css，bootstrap_4.0.0.css等。
四、运行项目
进入该项目中的service文件下，使用命令行node start，项目启动成功如图
然后访问网页，在此之前你需要ipconfig下，你的ip地址是多少，需要在controller文件中进行修改，修改一致后，访问网页。为ip:9909/test.html
至此，该项目完成，在该项目中，根据高德开发api我还增加了一些鼠标响应事件，大家快快去体验下吧。
Angularjs+node+Mysql实现地图上的多点标注的更多相关文章
- Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示
注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定 ...
- 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注
原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...
- 基于 Angularjs&Node.js 云编辑器架构设计及开发实践
基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...
- 如何在iOS地图上高效的显示大量数据
2016-01-13 / 23:02:13 刚才在微信上看到这篇由cocoachina翻译小组成员翻译的文章,觉得还是挺值得参考的,因此转载至此,原文请移步:http://robots.thought ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
- AngularJS + Node.js + MongoDB开发
AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包 ...
- [ios3-地图] 如何在iOS地图上高效的显示大量数据 [转]
[转至:http://blog.csdn.net/pjk1129/article/details/17358337] 原文:How To Efficiently Display Large Amoun ...
- node+mysql，实现基本的增删改查，附带跟踪记录和运行时间记录
Node + mysql 实现基础的增删改查,以及性能测试. 网上有很多这样的例子,我也是找来学习的. 感觉node对mysql的操作非常简单,也很实用,比如自带防止sql注入的功能,一开始还担心注入 ...
- node与mysql的相互使用————node+mysql
node与mysql的相互使用----node+mysql 为什么选node???因为我是个前端. 为什么选mysql???因为成熟,稳定,听说容易学. 一.mysql数据库: mysql下载和使用我 ...
随机推荐
- C#开发微信门户及应用(34)--微信裂变红包
在上篇随笔<C#开发微信门户及应用(33)--微信现金红包的封装及使用>介绍了普通现金红包的封装和使用,这种红包只能单独一次发给一个人,用户获取了红包就完成了,如果我们让用户收到红包后,可 ...
- python学习笔记（列表、元组、购物车实例）
一.列表 列表和字典是最常用的两种数据类型 1. 需求:怎么存放班级80多人的姓名,如何实现? names = ["Zhangyang","Guyun",&qu ...
- [连载]《C#通讯（串口和网络）框架的设计与实现》- 13.中英文版本切换设计
目 录 第十三章 中英文版本切换设计... 2 13.1 不用自带的资源文件的理由... 2 13.2 配置文件... 2 13.3 语言 ...
- sencha ext js 6 入门
Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...
- 微信小程序社区上线
微信小程序公测了! 从首次得到微信小程序发布的消息开始,小木和Michael就进入了紧急备战状态. 除了要快速学通微信小程序开发之外,我们还做了这些工作: 1.录制全球首套微信小程序实战项目类视频教程 ...
- Java Web之网上购物系统（注册、登录、浏览商品、添加购物车）
眼看就要期末了,我的专业课也迎来了第二次的期末作业---------<网上购物系统>.虽然老师的意图是在锻炼我们后台的能力,但是想着还是不利用网上的模板,准备自己写,以来别人写的静态页看不 ...
- (十)Maven依赖详解
1.何为依赖? 比如你是个男的,你要生孩子,呸呸呸...男的怎么生孩子,所以你得依赖你老婆,不过也不一定咯,你也可以依赖其她妹子. 我们在平时的项目开发中也是同理,你需要依赖一些东西才能实现相应的功能 ...
- (九)Maven坐标详解
Maven的一个核心的作用就是管理项目的依赖,引入我们所需的各种jar包等.为了能自动化的解析任何一个Java构件,Maven必须将这些Jar包或者其他资源进行唯一标识,这是管理项目的依赖的基础,也就 ...
- Oracle死锁
当两个或多个用户相互等待锁定的数据时就会发生死锁,这时这些用户被卡在不能继续处理业务,oracle可以自动检测死锁并解决他们,通过回滚一个死锁中的语句,释放锁定的数据,回滚的话会遇到ora-00060 ...
- 华为手机浏览器不支持PUT提交方式的解决方案
最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...