百度地图开发API
百度地图API可视化文档
效果图如下:
位置点的样式需要通过样式自行调整
- css代码(用于控制坐标点样式)
.BMap_Marker>div {
background-image: url(/public/index/img/hongtai-pc/markers.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.BMap_Marker>div>img {
display: none !important;
}
- js代码:
//引入的ak由百度地图注册生成
<script src="http://api.map.baidu.com/getscript?v=3.0&ak=***************"></script>
<script>
function initialize() {
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint('输入需要搜索的地址用于获取点坐标', function (po) {
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(po.lat, po.lng); // 创建点坐标
map.enableScrollWheelZoom(true);
map.centerAndZoom(point, 13);
// var infoWindow = new BMap.InfoWindow("泓泰资本"); // 创建信息窗口对象
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
autoViewport: true
},
pageCapacity: 1,
enableFirstResultSelection: true, //自动采用第一个搜索结果
searchNearby: point //以中心点圆形搜索
});
local.search('需要搜索的地址');
local.setSearchCompleteCallback(function (searchResult) {
var Oinfo = searchResult.getPoi(0);
Oinfo.title = '提示框需要显示的名称';
Oinfo.address = '提示框需要显示位置的地址" /}';
Oinfo.phoneNumber = '提示框需要显示的电话';
local = new BMap.LocalSearch(searchResult, {
renderOptions: {
map: map,
autoViewport: true
},
pageCapacity: 1,
enableFirstResultSelection: true,
searchNearby: point
});
});
})
}
window.onload = initialize;
</script>