ionic3 打开高德地图

最新推荐文章于 2022-06-22 11:54:43 发布

qq_33382332

最新推荐文章于 2022-06-22 11:54:43 发布

阅读量825

点赞数

CC 4.0 BY-SA版权

分类专栏： a'

本文链接：https://blog.youkuaiyun.com/qq_33382332/article/details/79074799

a' 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用高德地图API创建交互式地图应用。通过具体的示例代码，展示了如何加载地图、设置缩放级别和中心点坐标，并在指定位置放置标记。此外，还介绍了如何在标记上显示自定义标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index中引入：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=97e1c429289e7df00bcf7a913007695b"></script>

html中

click = openGaodeMap()

ts：

longitude;// 经度
latitude;// 纬度
addressName;// 钓鱼地点

// 高德地图
openGaodeMap(){
  this.loadMap();
}
public map: any;
loadMap(){
  this.map = new AMap.Map("mapContainer", {
    zoom: 18,
    center:[this.longitude,this.latitude]
  });
  var marker = new AMap.Marker({
    map:this.map,
    position:[this.longitude,this.latitude]
  });
  marker.setLabel({
    offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
    content: ""
  });
  marker.markOnAMAP({
    name:this.addressName,// 钓点位置
    position:marker.getPosition()
  })
  this.map.addControl(new AMap.ToolBar());
  if(AMap.UA.mobile){
    document.getElementById('button_group').style.display='none';
  }
}