百度地图展示v3

说明:

之前文章用的百度地图v1太老了,这次拿到同事的v3来,自己试了一遍,果然好多了

html:

<div id="baiduMapv3" style="height: 100%;width: 100%;"></div>

js:

// 先引入
<script src="http://api.map.baidu.com/getscript?v=3.0&ak=ZuZ619faA8xlWMFx9tFQP55AnIf2MIqP"></script>
// v3地图
function initialize () {
  var myGeo = new BMap.Geocoder();
  // 将地址解析结果显示在地图上,并调整地图视野
  myGeo.getPoint('上海市静安区延安中路841号东方海外大厦16F1304室微穗网络技术上海有限公司', function (po) {
    var map = new BMap.Map("baiduMapv3"); // 创建地图实例
    var point = new BMap.Point(po.lat, po.lng); // 创建点坐标
    map.enableScrollWheelZoom(true);
    map.centerAndZoom(point, 13);
    var local = new BMap.LocalSearch(map, {
      renderOptions: {
        map: map,
        autoViewport: true
      },
      pageCapacity: 1,
      enableFirstResultSelection: true,
      searchNearby: point
    });
    // 点击详情搜索的地点
    local.search('上海市静安区延安中路841号东方海外大厦16F1304室微穗网络技术上海有限公司');
    local.setSearchCompleteCallback(function (searchResult) {
      console.log(searchResult);
      var Oinfo = searchResult.getPoi(0);
      Oinfo.title = '微穗网络技术上海有限公司';
      Oinfo.address = '上海市静安区延安中路841号东方海外大厦16F'
      Oinfo.phoneNumber = '400-021-7135'
      local = new BMap.LocalSearch(searchResult, {
        renderOptions: {
          map: map,
          autoViewport: true
        },
        pageCapacity: 1,
        enableFirstResultSelection: true,
        searchNearby: point
      });
    });
  })
}
window.onload = initialize;

css:

    .BMap_Marker>div {
      background-image: url('http://hongtai.aaake.com/public/index/img/hongtai-pc/markers.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .BMap_Marker>div>img {
      display: none !important;
    }

效果:

百度地图v3
原帖,还是我叫他写的,这叼毛没有一点开源精神
原帖:https://blog.csdn.net/AN_zzt/article/details/115671754?spm=1001.2014.3001.5501

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值