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 ...

随机推荐

css选择器和xpath对照表
查看FC HBA卡信息的方法
在配置磁盘阵列或虚拟磁带库时,往往会以FC接口与主机对接,那么就涉及FC HBA卡的查看,本文就这个问题进行了总结与整理. 一.Windows 系统在Windows系统中,可以使用FC HBA卡厂家 ...
javascript获取日期的年，月，日
var date = new Date(strTime); return date.getFullYear()+"-"+(date.getMonth()+1)+"-&qu ...
关于Azure Storage Blob Content-Disposition 使用学习
概述在常规的HTTP应答中,Content-Disposition 消息头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地.通俗的解释就是对 ...
【bzoj1875】【SDOI2009】【HH去散步】
1875: [SDOI2009]HH去散步 Time Limit: 20 Sec Memory Limit: 64 MB Submit: 932 Solved: 424 [Submit][Status ...
Ionic学习笔记1_基本布局
<body>  bar里嵌入子元素:title,button,button-bar和 inpu ...
sigaction()之sa_mask
man文档描述: sa_mask gives a mask of signals which should be blocked during execution of the signal hand ...
iOS开发之Auto Layout入门(转)
随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto Layout的使用,与大家分享. 什么是Auto Layout? Auto Layout是iOS6发布后引入的一个全新 ...
LeetCode455. Assign Cookies
Description Assume you are an awesome parent and want to give your children some cookies. But, you s ...
ptmalloc、tcmalloc和jemalloc
内存优化总结:ptmalloc.tcmalloc和jemalloc 转载 2017年09月05日 18:57:12 3674 转载于:http://www.cnhalo.net/2016/06/13/ ...

160824、ionic添加地图站点

160824、ionic添加地图站点的更多相关文章

随机推荐

热门专题