码迷,mamicode.com
首页 > 其他好文 > 详细

关于使用高德地图的一些常用操作

时间:2020-06-29 11:13:43      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:log   img   offset   awb   div   dex   key   let   stroke   

1.引入高德地图如何去掉地图上的logo

.amap-logo {
    display: none;
}

2.地图上添加图标

new AMap.Marker ({
  icon: require(‘../../../assets/img/platform.png‘),
  offset: new AMap.Pixel(-12, -16),
  position: [120.236522,30.183376],
  map: map
})

3.设定自己想要的地图风格

首先注册成为高德的开发者,然后添加项目生成key,ui设计师可以在控制台设计相应的地图风格并发布,让风格链接给前端即可引入。

map.setMapStyle(‘amap://styles/5fb842579a8dd26c87034dcc8a074234‘)

4.地图中调用公交线路并显示

let linesearch = new AMap.LineSearch({
  pageIndex: 1,
  city: ‘杭州‘,
  pageSize: 1,
  extensions: ‘all‘
})
linesearch.search(‘315‘, function(status, result) {
  map.clearMap()
  if (status === ‘complete‘ && result.info === ‘OK‘) {
    lineSearch_Callback(result)
  } else {
    alert(result)
  }
})
/*公交路线查询服务返回数据解析概况*/
function lineSearch_Callback(data) {
  let lineArr = data.lineInfo
  let lineNum = data.lineInfo.length
  if (lineNum == 0) {
  } else {
    for (let i = 0; i < lineNum; i++) {
      let pathArr = lineArr[i].path
      let stops = lineArr[i].via_stops
      let startPot = stops[0].location
      let endPot = stops[stops.length - 1].location
      if (i == 0) //作为示例,只绘制一条线路
        drawbusLine(startPot, endPot, pathArr)
    }
  }
}
/*绘制路线*/
function drawbusLine(startPot, endPot, BusArr) {
  //绘制起点,终点
  new AMap.Marker({
    map: map,
    position: startPot, //基点位置
    icon: require(‘../../../assets/img/busEnd.png‘),
    zIndex: 10
  })
  new AMap.Marker({
    map: map,
    position: endPot, //基点位置
    icon: require(‘../../../assets/img/busStart.png‘),
    zIndex: 10
  })
  //绘制乘车的路线
  let busPolyline = new AMap.Polyline({
    map: map,
    path: BusArr,
    strokeColor: "#FF3A68",//线颜色
    strokeOpacity: 1,//线透明度
    isOutline:true,
    outlineColor: "rgba(255, 255, 255, .4)",
    strokeWeight: 4//线宽
  })
  map.setFitView()
}

 

关于使用高德地图的一些常用操作

标签:log   img   offset   awb   div   dex   key   let   stroke   

原文地址:https://www.cnblogs.com/bella99/p/13206602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!