今天使用了高德地图的map.add(marker),使用从后端获取的经纬度在地图上面标记一个点,不知道为什么,是按照高德地图的官方文档来得,但是还是一直没有出现标记点,我把js翻来覆去改了好多遍,代码如下:

     // 高德地图逆地址编码
         var map = new AMap.Map("container", {
          zoom: 10, //设置初始化级别         
          center: [108.897669,34.229093],
          resizeEnable: true
      });       
      var geocoder = new AMap.Geocoder({
          city: "010", //城市设为北京,默认:“全国”
          radius: 1000 //范围,默认:500
      });
      var marker = new AMap.Marker();
      marker.setMap(map);
      function regeoCode() {
          var lnglat  = [108.897669,34.229093];                 
          geocoder.getAddress(lnglat, function(status, result) {
              if (status === 'complete'&&result.regeocode) {
                  map.add(marker);
                  map.setZoom(15);
              }
              else{
                  log.error('根据经纬度查询地址失败')
              }
          });
          
      }
      regeoCode();

后面发现其实marker标记是添加上了的,只不过是因为样式的问题,标记点继承了不知道网上多少层父元素的overflow:hidden的属性,给代码里面加了

.amap-icon{

  overflow:inherit !important;

}

就解决了!我可是足足在这坑上徘徊了快三个小时,希望对大家有用。

 过了几天发现overflow:hidden;是自带的属性,不显示的原因,是因为代码里面写了

img{

padding-left:20px;

}

本意只是想写给项目里面的其他地方的图片,没想到影响了marker的默认图片的样式,所以删除了padding-left:20px;的样式

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐