说明:
之前文章用的百度地图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;
}
效果:
原帖,还是我叫他写的,这叼毛没有一点开源精神
原帖:https://blog.csdn.net/AN_zzt/article/details/115671754?spm=1001.2014.3001.5501