ionic3 实现高德地图(1)

Bertha 。 2022-05-28 09:45 183阅读 0赞

ionic3 使用高德地图

首先注册高德开发者 [http://lbs.amap.com/dev/index][http_lbs.amap.com_dev_index]

![SouthEast][]

# 在app上添加地图 #

1、复制如下代码到app `index.html` 页面的 `<head>` 标签中,如下

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的高德地图web端key"></script>

注意，该js必须放在以下代码的前面：

<script src="build/main.js"></script>

2、在xxx.html创建一个div

<ion-content>
      <div #map_container class="map_container"></div>
    </ion-content>

在xxx.scss

page-home {
      .map_container {
        width: 100%;
        height: 100%;
      }
    }

在xxx.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
    
    declare var AMap;
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      @ViewChild('map_container') map_container: ElementRef;
      map: any;//地图对象
    
      constructor(public navCtrl: NavController) {
      }
    
      ionViewDidEnter() {
        this.map = new AMap.Map(this.map_container.nativeElement, {
          view: new AMap.View2D({
      //创建地图二维视口
            zoom: 11, //设置地图缩放级别
            rotateEnable: true,
            showBuildingBlock: true })
        });
      }
    
    }

启动ionic就可以显示高德地图了

[http_lbs.amap.com_dev_index]: http://lbs.amap.com/dev/index
[SouthEast]: /images/20220528/3952ac9af46143c4a118c4f7f45c0c88.png

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet加载多种形式的高德地图（002）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第002个 [点击查看专栏目录][Link 1]

墨蓝/ 2024年04月07日 14:23/ 0 赞/ 42 阅读

相关地图：nuxt3高德地图简单使用

一、官方网站 [https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare][https_lbs.amap.com_api_jsa

川长思鸟来/ 2024年03月30日 17:33/ 0 赞/ 44 阅读

相关 020：Mapbox GL加载高德地图（影像瓦片图）

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center] 第020个 [点击查看专栏目录][Link 1]

矫情吗；*/ 2024年03月23日 15:43/ 0 赞/ 51 阅读

相关使用高德地图（js）制作区域显示

高德[地图 JS API][JS API] [https://lbs.amap.com/api/javascript-api/summary/][https_lbs.ama

Myth丶恋晨/ 2023年07月24日 09:06/ 0 赞/ 15 阅读

相关高德地图的坑

1、自定义InfoWindow 重写InfoWindow的getInfoWindow()方法，返回一个View，如果这个View的根布局没有设置background，那么高德

桃扇骨/ 2022年06月08日 04:37/ 0 赞/ 368 阅读

相关模仿高德地图的搜索框的样式

html： <div class="indexSearch"> <form> <input id="searchInput" ng-model="furnitureN

分手后的思念是犯贱/ 2022年06月03日 10:47/ 0 赞/ 154 阅读

相关 ionic3 实现高德地图(1)

ionic3 使用高德地图首先注册高德开发者 [http://lbs.amap.com/dev/index][http_lbs.amap.com_dev_index] !

Bertha 。/ 2022年05月28日 09:45/ 0 赞/ 184 阅读

相关高德地图地图的加载（一）

首先要申请高德地图开发的key值,这里就不做叙述。 HTML部分： ![\\\\][20190117111316684.png] \-css部分 html, b

谁践踏了优雅/ 2022年03月26日 12:42/ 0 赞/ 664 阅读

相关 vue调用高德地图：vue-amap

vue调用高德地图拢共分三步： 1.去高德开发者平台申请key； 2.安装vue-amap； 3.使用组件调用地图 1.注册高德开发者账号，申

骑猪看日落/ 2021年12月23日 10:17/ 0 赞/ 364 阅读

相关高德地图（安卓）配置使用过程

高德SDK的使用获取key 参考这个文档：https://lbs.amap.com/api/android-sdk/gettingstarted ![在这里插

向右看齐/ 2021年09月02日 03:00/ 0 赞/ 522 阅读