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添加地图站点的更多相关文章

  1. ionic 添加地图定位功能

    由于项目需求,需要一个定位功能,通过google或百度,搜到一个cordova-plugin-geolocation的插件,在ios上可以用,但是在android就呵呵了,原因就不说了,大家都知道.所 ...

  2. Android基于mAppWidget实现手绘地图（七）–根据坐标添加地图对象

    为了将地图对象放置到某个特殊的地理位置上,你需要: 1. 创建地图对象 2.添加地图对象到图层(任何位置) 3. 移动该地图对象,使用 MapObject.moveTo(Location locati ...

  3. 如何添加地图控件到Windows Phone 8的页面中

    原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...

  4. IIS中添加ftp站点

    1.创建Windows账号 右击点击“我的电脑”,选择“管理”打开服务器管理的控制台.展开“服务器管理器”,一路展开“配置”.“本地用户和组”,点“用户”项.然后在右边空白处点右键,选择“新用户”将打 ...

  5. ArcGIS Engine添加地图元素的实现

    在ArcGIS中,我们使用的制图控件除了MapControl之外,还有PageLayoutControl,用于页面布局和制图,生成一幅成品地图. PageLayoutControl 封装了PageLa ...

  6. 用python批量添加保护站点

    最近在测试的过程中,由于一个bug的复现需要添加1600个保护站点,手工添加谁知到要何年何月,因此想到了用python进行自动化批量添加保护站点! 具体代码如下: #!/usr/bin/env pyt ...

  7. Laravel中Homestead添加多站点时遇到问题

    Homestead做Laravel的开发还是很方便的,但是在添加多站点的时候,发现几个坑,来做个记录. 首先,官方文档给了修改homestead.yaml文件的方式,只需要在sites字节下添加一个新 ...

  8. ionic 添加应用图标与启动页

    由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...

  9. ionic添加admob广告教程

    1.在你的ionic项目中使用如下命令添加admob插件: cordova plugin add cordova-plugin-admobpro 2.添加完成后,在$ionicPlatform.rea ...

随机推荐

  1. Java 通过JDBC连接Mysql数据库的方法和实例

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  2. nginx只允许域名访问，禁止ip访问

    背景:为什么要禁止ip访问页面呢?这样做是为了避免其他人把未备案的域名解析到自己的服务器IP,而导致服务器被断网,我们可以通过禁止使用ip访问的方法,防止此类事情的发生. 解决方法:这里介绍修改配置文 ...

  3. word转pdf

    很多人在工作经常会遇到word转pdf功能,word转pdf还是比较复杂,网上各种包,如python的各种转换包,其实是存在很多问题 的,尤其是对比较复杂的格式,真正的还的是调用组件来转换,这里介绍的 ...

  4. Mac 上的传奇效率神器 Alfred 3

    下载地址:https://www.alfredapp.com/ 第三方教程:https://www.jianshu.com/p/e9f3352c785f 一.内置快捷键介绍 1.默认快捷呼出热键是: ...

  5. 复杂可编程逻辑器件CPLD的基本结构

    复杂可编程逻辑器件CPLD的基本结构 文章出处:czhlcai 发布时间: 2008/12/08 | 6911 次阅读 专业薄膜开关打样工厂,12小时加急出货   1．基于乘积项的CPLD结构 CPL ...

  6. C# AppDomain 类

    /*** AppDomain 表示应用程序域,它是一个应用程序在其中执行的独立环境.无法继承此类. 应用程序域(由 AppDomain 对象表示)为执行托管代码提供隔离.卸载和安全边界. 使用应用程序 ...

  7. CentOS 7 安装以及配置桌面环境

    一.安装 GNOME 桌面 1.安装命令: yum groupinstall  "GNOME Desktop" "X Window System" " ...

  8. PyTorch在64位Windows下的Conda包（转载）

    PyTorch在64位Windows下的Conda包 昨天发了一篇PyTorch在64位Windows下的编译过程的文章,有朋友觉得能不能发个包,这样就不用折腾了.于是,这个包就诞生了.感谢@晴天14 ...

  9. OpenFiler configuration

    5.OpenFiler configuration   登录Openfiler   步骤1:安装 FireFox   步骤2:通过FireFox以HTTPS://server-ip:446 远程访问O ...

  10. 深度历险：Redis 内存模型详解

    https://mp.weixin.qq.com/s/Gp6Ur7omGY6ZqDWygU2meQ Redis 是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说 Redi ...