/*初始化数据*/

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 += "

状态:" + data.typeName + "

";

dataHtml += "

地址:" + data.stationAddress + "" + data.stationAddressDetail + "

";

dataHtml += "

创建时间:" + data.createTime + "

";

dataHtml += "

";

$scope.mapInfoWindow.setContent(dataHtml);

$scope.mapInfoWindow.open($scope.map, e.target.getPosition());

}

}

html编写可缩放地图,web页面实现地图展示,可缩放,标点并点击---使用高德地图...相关推荐

  1. web页面实现地图展示,可缩放,标点并点击---使用高德地图

    高德地图官方API:https://lbs.amap.com/api/javascript-api/reference/map 一.js中 /*初始化数据*/function initData() { ...

  2. webapp通过点击调用高德地图或百度地图导航

    webapp通过点击调用高德地图或百度地图导航 // 高德地图 <a :href="'https://uri.amap.com/marker?position='+经度+','+纬度+ ...

  3. java 高德地图路线规划_高德地图 web 页面里的出行路线规划

    高德地图的引入,有两种方式,第一种在引入链接里直接添加 plugin 参数: 第二种是引入链接里不添加  plugin 参数,而是在在使用插件之前,使用AMap.service方法加载插件,然后在回调 ...

  4. 高德地图只显示一个省_浅谈当下各种导航软件:高德地图、百度地图、腾讯地图...

    浅谈当下各种导航软件:高德地图.百度地图.腾讯地图,之前出门找不到路只能靠问路,现在我们生活中出现了各种各样的导航软件,甚至让用户出现了选择困难症,不知道选择哪一款软件比较号,在这里小编就要给大家来分 ...

  5. vue传中文标点_vue项目引入第三方高德地图实现标点定位

    vue项目中,高德地图使用. 引入vue中.异步导入vue中. gaoDe(key) { window.onApiLoaded = function () { var map = new AMap.M ...

  6. 高德地图天气图标符号大全_时间就是金钱我的朋友!高德地图同步上线《魔兽世界》语音包...

    [PConline资讯]8月27日,<魔兽世界>怀旧服重新开服,据说将有500万玩家重新回归艾泽拉斯大陆.同日<魔兽世界>官微宣布,其独家的经典导航语音包已经在高德地图上线. ...

  7. android 地图导航开发思路,基础功能-导航组件-开发指南-Android 导航SDK | 高德地图API...

    预置条件 请在您工程的 AndroidManifest.xml 中配置声明导航组件 Activity: android:name="com.amap.api.navi.AmapRouteAc ...

  8. 高德地图android 测试,平行路检测-专业导航-开发指南-Android 导航SDK | 高德地图API...

    基本介绍 导航SDK从v6.6.0开始,平行路检测支持"主辅路状态检测"和"高架桥上下状态检测".当用户所在的位置,具有两条相邻的平行路,如城市快速路的主干道和 ...

  9. java wed高德地图开发_java接入高德地图常用WEB API

    1.先看一下高德地图WEB API都有哪些内容 2.根据经经纬度查询高德地图省市区数据 /** *根据经纬度获取省市区 * @param lat * @return */ public static ...

最新文章

  1. MATLAB 成绩排序
  2. Spine 2D animation for games
  3. python假如输入错误重新输入_认识python之输入(4)
  4. Mybatis_别名的使用
  5. 群体智能算法之蝙蝠算法
  6. 存量运营好工具:客户稳定度评分卡模型
  7. Excel表格批量生成Word文档
  8. 时频分析之短时傅里叶变换(STFT)
  9. 计算机网络太难了?了解这一篇就够了
  10. [渝粤教育] 信阳农林学院 鱼类学 参考 资料
  11. 在阿里云上搭建自己的虚拟机(学习笔记)
  12. signature=e7b038f264f5a1cf5b8e81732b377b41,不同养生功法对2型糖尿病伴失眠患者抑郁,焦虑和睡眠质量的影响...
  13. CMStudio中出现‘$错误‘ is not a vaild integer value如何解决
  14. CrawlSpider实现微信小程序社区爬虫
  15. 新电脑怎么把计算机放在桌面,新安装的Win10怎么将“我的电脑”放在桌面
  16. 备用dns服务器修改,修改DNS,让你的上网速度更快!
  17. 揭秘肖特基二极管鲜为人知的秘密特性
  18. 性能测试工具ab和wrk
  19. C语言之tentative definition
  20. Tokyo Cabinet及Tokyo Tyrant tcb tch比较分析

热门文章

  1. python 去除不可见字符\u200b 方法收集
  2. 【干货】大数据创新驱动智慧民生
  3. Mysql优化,导致查询不走索引的原因总结
  4. 基于tensorflow 的中文语音识别模型
  5. 浅谈气动薄膜调节阀的应用
  6. C++ find 函数
  7. 第22题:t分钟后,是几点几分
  8. 交换机日常使用保养与故障排除
  9. 卡特兰数(高精度乘法压位)
  10. Trapcode Particular 5 - Fast Physics