html编写可缩放地图,web页面实现地图展示,可缩放,标点并点击---使用高德地图...
/*初始化数据*/
function initData() {
var list = [];for (var i = 0; i < 3; i++) {
list.push({
number: 0
});
}
$scope.numberList = list;
list = [];
for (var j = 0; j < 3; j++) {
list.push({
day: "-",
type: "-",
temperature: "-"
});
}
$scope.weatherList = list;
$scope.nowDate = "00:00";
$scope.ampm = "-";
/*每秒调用一次 refreshDate方法*/
window.setInterval(refreshDate, 1000);
/*构建地图对象*/
$scope.map = new AMap.Map('container', {
zoom: 10,
resizeEnable: true
});
//InfoWindow 信息窗体
$scope.mapInfoWindow = new AMap.InfoWindow({
//Pixel 像素坐标,确定地图上的一个像素点。
offset: new AMap.Pixel(0, -30)
});
}
/首页数据*/
function refreshPageData(complete) {
var params = {
"t": 1
};
$http({
url: 'gas/home/queryData',
method: 'POST',
data: {
params: params
}
}).then(function ($Data) {
if ($Data.data.STATUS === true) {
$scope.numberList = $Data.data.numberList;
if ($Data.data.isSelectNumber === true) {
$scope.selectClassName = "select";
}
var stationList = $Data.data.stationList;
$scope.stationList = {
data: stationList,
name: "stationName",
id: "stationCode"
};
if (stationList != null && stationList.length > 0) {
$scope.stationCode = stationList[0]["stationCode"];
}
complete && complete();
} else {
}
});
}
/*获取当前时间*/
function refreshDate() {
var nowDate = new Date();
var h = nowDate.getHours();
$scope.$apply(function () {
$scope.nowDate = zero(hours(h)) + "." + zero(nowDate.getMinutes());
$scope.ampm = h < 12 ? "AM" : "PM";
});
function hours(value) {
return value % 12;
}
function zero(str) {
str = "" + str;
if (str.length === 1) {
str = "0" + str;
}
return str;
}
}
/*获取本地城市地址*/
function refreshLocalCity(complete) {
AMap.plugin('AMap.CitySearch', function () {
new AMap.CitySearch().getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
$scope.$apply(function () {
$scope.city = result.city;
});
complete && complete();
}
})
});
}
/*刷新地图数据*/
function refreshMap() {
$http({
url: 'gas/station/queryStationList',
method: 'POST',
data: {
params: {}
}
}).then(function ($Data) {
if ($Data.data.STATUS == true) {
refreshMapPoint($Data.data.DATA);
} else {
}
});
function refreshMapPoint(list) {
for (var i = 0; i < list.length; i++) {
var item = list[i];
addMarker(item);
}
$scope.map.setFitView();
}
function addMarker(item) {
var typeClassDic = {1: "", 2: " tp2", 3: " tp3" };
var cxt= "
cxt += "";
cxt += "
";
//构造一个点标记对象,通过MarkerOptions设置点标记对象的属性
var marker = new AMap.Marker({
position: new AMap.LngLat(item.stationLng, item.stationLat),
title: item.stationName,
content: cxt,
offset: new AMap.Pixel(-16, -32),
map: $scope.map
});
marker.content = item;
//点击事件
AMap.event.addListener(marker, 'click', markerClick);
}
function markerClick(e) {
var data = e.target.content;
var dataHtml = "
" + data.stationName + "
";
dataHtml += "
";
dataHtml += "
";
dataHtml += "
";
dataHtml += "
";
$scope.mapInfoWindow.setContent(dataHtml);
$scope.mapInfoWindow.open($scope.map, e.target.getPosition());
}
}
html编写可缩放地图,web页面实现地图展示,可缩放,标点并点击---使用高德地图...相关推荐
- web页面实现地图展示,可缩放,标点并点击---使用高德地图
高德地图官方API:https://lbs.amap.com/api/javascript-api/reference/map 一.js中 /*初始化数据*/function initData() { ...
- webapp通过点击调用高德地图或百度地图导航
webapp通过点击调用高德地图或百度地图导航 // 高德地图 <a :href="'https://uri.amap.com/marker?position='+经度+','+纬度+ ...
- java 高德地图路线规划_高德地图 web 页面里的出行路线规划
高德地图的引入,有两种方式,第一种在引入链接里直接添加 plugin 参数: 第二种是引入链接里不添加 plugin 参数,而是在在使用插件之前,使用AMap.service方法加载插件,然后在回调 ...
- 高德地图只显示一个省_浅谈当下各种导航软件:高德地图、百度地图、腾讯地图...
浅谈当下各种导航软件:高德地图.百度地图.腾讯地图,之前出门找不到路只能靠问路,现在我们生活中出现了各种各样的导航软件,甚至让用户出现了选择困难症,不知道选择哪一款软件比较号,在这里小编就要给大家来分 ...
- vue传中文标点_vue项目引入第三方高德地图实现标点定位
vue项目中,高德地图使用. 引入vue中.异步导入vue中. gaoDe(key) { window.onApiLoaded = function () { var map = new AMap.M ...
- 高德地图天气图标符号大全_时间就是金钱我的朋友!高德地图同步上线《魔兽世界》语音包...
[PConline资讯]8月27日,<魔兽世界>怀旧服重新开服,据说将有500万玩家重新回归艾泽拉斯大陆.同日<魔兽世界>官微宣布,其独家的经典导航语音包已经在高德地图上线. ...
- android 地图导航开发思路,基础功能-导航组件-开发指南-Android 导航SDK | 高德地图API...
预置条件 请在您工程的 AndroidManifest.xml 中配置声明导航组件 Activity: android:name="com.amap.api.navi.AmapRouteAc ...
- 高德地图android 测试,平行路检测-专业导航-开发指南-Android 导航SDK | 高德地图API...
基本介绍 导航SDK从v6.6.0开始,平行路检测支持"主辅路状态检测"和"高架桥上下状态检测".当用户所在的位置,具有两条相邻的平行路,如城市快速路的主干道和 ...
- java wed高德地图开发_java接入高德地图常用WEB API
1.先看一下高德地图WEB API都有哪些内容 2.根据经经纬度查询高德地图省市区数据 /** *根据经纬度获取省市区 * @param lat * @return */ public static ...
最新文章
- MATLAB 成绩排序
- Spine 2D animation for games
- python假如输入错误重新输入_认识python之输入(4)
- Mybatis_别名的使用
- 群体智能算法之蝙蝠算法
- 存量运营好工具:客户稳定度评分卡模型
- Excel表格批量生成Word文档
- 时频分析之短时傅里叶变换(STFT)
- 计算机网络太难了?了解这一篇就够了
- [渝粤教育] 信阳农林学院 鱼类学 参考 资料
- 在阿里云上搭建自己的虚拟机(学习笔记)
- signature=e7b038f264f5a1cf5b8e81732b377b41,不同养生功法对2型糖尿病伴失眠患者抑郁,焦虑和睡眠质量的影响...
- CMStudio中出现‘$错误‘ is not a vaild integer value如何解决
- CrawlSpider实现微信小程序社区爬虫
- 新电脑怎么把计算机放在桌面,新安装的Win10怎么将“我的电脑”放在桌面
- 备用dns服务器修改,修改DNS,让你的上网速度更快!
- 揭秘肖特基二极管鲜为人知的秘密特性
- 性能测试工具ab和wrk
- C语言之tentative definition
- Tokyo Cabinet及Tokyo Tyrant tcb tch比较分析