菜单

在ionic/cordova中运用百度地图插件

2019年5月5日 - Html/Html5

境内比较好的是现实应用百度地图提供的API,来落到实处牢固,以及地图的一文山会海扩展功效。

          
图片 1

Stpe四:在项目中增加百度地图API的JS引用

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval';object-src 'self'; style-src * 'unsafe-inline'; img-src *" >

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你应用的秘钥"></script>

           安装完结后可知下图内容:

Stpe三:在品种中增加cordova-qdc-baidu-location插件

近期我们选用’Weizhe
He’提供的cordova-qdc-baidu-location来尝试创制轻易的定点app。

          4.2.2 打开www->js->controllers.js修改[DashCtrl]代码为:

 

.controller('DashCtrl', function($scope) {
  var map = new BMap.Map("allmap");                         // 创建Map实例
  var point = new BMap.Point(104.108164,30.773969);         // 创建点坐标
  $scope.ret = {latitude:30.773969, longitude:104.108164};

  map.centerAndZoom(point,19);                              // 初始化地图,用城市名设置地图中心点
  var marker = new BMap.Marker(point);                      // 创建标注
  map.addOverlay(marker);                                   // 将标注添加到地图中

  $scope.getpoint = function() {
    baidu_location.getCurrentPosition(function(data){
      $scope.ret = {longitude:data.longitude, latitude:data.latitude};

      var map = new BMap.Map("allmap");                           // 创建Map实例
      var point = new BMap.Point(data.longitude, data.latitude);  // 创建点坐标
      map.centerAndZoom(point,19);

      var marker = new BMap.Marker(point);                        // 创建标注
      map.addOverlay(marker);                                     // 将标注添加到地图中
    }, function(err){
      alert("错误:"+ err)
    });
  };
})

          
包名:如图所示的名字(config.xml内 widget节点中id的值)

尤其多谢:Weizhe He

         
四.一 在head中增加代码

Stpe一:成立3个种类(此处使用的是tab类型的品种,创造情势可参看作者前1篇怎么样离线创设Ionic1项目

亟待专注的是,大家在浏览器测试项指标时候,会唤醒baidu_location没有定义,实际须要在表弟大上呼吸系统感染受完整意义。

在ionic项目中,假如想达成稳固功效,能够选择ng-cordova提供的cordova-plugin-geolocation。

           打开Index.html

          
图片 2

 

          四.二.一 展开www->templates->tab-dash.html修改代码为:

 百度地图API示例

手提式有线电话机连接计算机后,使用ionic小帮手,展开项目并真机调节和测试,直接将app安装到手提式有线电话机,注意张开手提式有线电话机USB调节和测试方式,保持手机解锁并点亮,ionic小助手工编织译安装落成,或然经历一下几步:

Stpe5:测试

图片 3图片 4

其他:

但由于高墙的原故,国内andorid碰到下,此插件不起成效(ios遇到下可用)。

 

安装插件命令:ionic plugin add https://github.com/hewz/cordova-baidu-location --variable API_KEY="你的应用秘钥"
ps:
卸载插件命令:ionic plugin rm com.hewz.plugins.baidu.location
列出所有插件:ionic plugin list             

      应用类型请选取:Andorid应用

<ion-view view-title="百度地图测试">
  <ion-content>
    <ion-list>
      <ion-item>
        <button class="button button-block button-calm" ng-click="getpoint()"> 开始定位 </button>
      </ion-item>
      <ion-item>
        经度:{{ret.longitude}}    纬度:{{ret.latitude}}
      </ion-item>
      <ion-item>
        <div id="allmap" style="height: 600px;">

        </div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

图片 5图片 6

Stpe2:申请百度地图API秘钥

         四.二 编写插件使用代码

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图