160824、ionic添加地图站点
1、基本的地图显示 <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<title>地图</title>
<script src="lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/ionic.min.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0KzDtnrAVfdyBds7BV55rfzZ"></script>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body ng-controller="firstCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">ion-content</h1>
</ion-header-bar>
<ion-content scroll="false">
<div id="allmap"></div>
</ion-content> </body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope){
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 }); </script>
2、创建标注
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<title>地图</title>
<script src="lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/ionic.min.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0KzDtnrAVfdyBds7BV55rfzZ"></script>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body ng-controller="firstCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">ion-content</h1>
</ion-header-bar>
<ion-content scroll="false">
<div id="allmap"></div>
</ion-content> </body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("firstCtrl",function($scope){
/* // 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放*/ //创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
createMarker();//创建标注物
} //创建地图函数：
function createMap(){
var map = new BMap.Map("allmap");//在百度地图容器中创建一个地图
var point = new BMap.Point(116.404, 39.915);//定义一个中心点坐标
map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
} //地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
} //创建标注物
function createMarker(){
var markerArr = [
{ title: "名称：阿凡提", point: "116.401,39.911", address: "北京市海淀区", tel: "12306" },
{ title: "名称：体验馆1", point: "116.402,39.922", address: "北京市海淀区 ", tel: "18500000000" },
{ title: "名称：体验馆2", point: "116.403,39.933", address: "北京市海淀区", tel: "18500000000" },
{ title: "名称：体验馆3", point: "116.404,39.944", address: "北京市海淀区", tel: "18500000000" }
];
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0]; //
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
marker[i].setLabel(label);
info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"); // 创建信息窗口对象
}
marker[0].addEventListener("mouseover", function () {
this.openInfoWindow(info[0]);
});
marker[1].addEventListener("mouseover", function () {
this.openInfoWindow(info[1]);
});
marker[2].addEventListener("mouseover", function () {
this.openInfoWindow(info[2]);
});
}
initMap();//创建和初始化地图 }); </script>
160824、ionic添加地图站点的更多相关文章
- ionic 添加地图定位功能
由于项目需求,需要一个定位功能,通过google或百度,搜到一个cordova-plugin-geolocation的插件,在ios上可以用,但是在android就呵呵了,原因就不说了,大家都知道.所 ...
- Android基于mAppWidget实现手绘地图（七）–根据坐标添加地图对象
为了将地图对象放置到某个特殊的地理位置上,你需要: 1. 创建地图对象 2.添加地图对象到图层(任何位置) 3. 移动该地图对象,使用 MapObject.moveTo(Location locati ...
- 如何添加地图控件到Windows Phone 8的页面中
原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...
- IIS中添加ftp站点
1.创建Windows账号 右击点击“我的电脑”,选择“管理”打开服务器管理的控制台.展开“服务器管理器”,一路展开“配置”.“本地用户和组”,点“用户”项.然后在右边空白处点右键,选择“新用户”将打 ...
- ArcGIS Engine添加地图元素的实现
在ArcGIS中,我们使用的制图控件除了MapControl之外,还有PageLayoutControl,用于页面布局和制图,生成一幅成品地图. PageLayoutControl 封装了PageLa ...
- 用python批量添加保护站点
最近在测试的过程中,由于一个bug的复现需要添加1600个保护站点,手工添加谁知到要何年何月,因此想到了用python进行自动化批量添加保护站点! 具体代码如下: #!/usr/bin/env pyt ...
- Laravel中Homestead添加多站点时遇到问题
Homestead做Laravel的开发还是很方便的,但是在添加多站点的时候,发现几个坑,来做个记录. 首先,官方文档给了修改homestead.yaml文件的方式,只需要在sites字节下添加一个新 ...
- ionic 添加应用图标与启动页
由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...
- ionic添加admob广告教程
1.在你的ionic项目中使用如下命令添加admob插件: cordova plugin add cordova-plugin-admobpro 2.添加完成后,在$ionicPlatform.rea ...
随机推荐
- Centos系统信息及日志
1.确认内核版本: #uname -r #uname -a 2.确认发行版本: #cat /etc/redhat-release 3.查看系统载入的模块: #lsmod | grep XXX 载入一个 ...
- zh-cn en-uk表示语言（文化）代码与国家地区对照表
af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq 阿尔巴尼亚 sq-AL 阿尔巴尼亚 -阿尔巴尼亚 ar 阿拉伯语 ar-DZ 阿拉伯语 -阿尔及利亚 ar-BH 阿拉伯语 -巴林 ar-EG ...
- C++ 和 java 使用 AES CBC 128 加解密
Java 使用jce, code: import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax ...
- Android基于UDP的局域网聊天通信
代码地址如下:http://www.demodashi.com/demo/12057.html 记得把这几点描述好咯:代码实现过程 + 项目文件结构截图 + 演示效果 1. 开发环境 1.1 开发工具 ...
- linux 使用fdisk分区扩容，看介绍命令(未完)
https://www.cnblogs.com/chenmh/p/5096592.html LVM 逻辑磁盘的一些命令 http://man.linuxde.net/vgcreate
- oracle数据库性能优化方案精髓整理收集回想
oracle数据库性能优化整体法则: 一.降低数据訪问(降低硬盘房訪问次数) 二.返回更少的数据(降低网络传输或磁盘訪问) 三.降低交互次数(降低网络传输) 四.降低server开销(降低cpu及内存 ...
- codeblocks中右键源文件没有Rename选项？
那是因为你右击的那个文件已经被CB的编辑器打开,关闭即可,你就能看到Rename选项了. 或者更简单,翻到Files那一栏,然后右击某个文件夹选择"Make root"即可,就跟w ...
- springboot解决第三方依赖jar包的问题
公司现在用的是springboot+maven,想要把一些老的项目都改成这种框架.但是一些老的项目中有好多第三方的jar包或者是自己的jar包,maven库上没有.最初的解决方案是一个个的deploy ...
- struts2的validate在使用过程中的一个问题
在项目中有一个新增客户信息的的功能: 1.在进入加入页面:add.jsp页面之前,要调用一个add_init.do来获取省份信息列表以供在add.jsp进行选择. 2.add页面填写完毕以后.提交给 ...
- python第三周文件处理和函数-----下
#默认参数的值是在一开始定义的时候就传给了函数, # 在后来的修改中不会被修改. #默认参数的值必须放到位置形参参数的最后面 #默认参数使用的场景是一个参数不经常变得场景,所以参数一般是不可变类型.字 ...