1.头部导入百度地图js
<script
type="text/javascript"
src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥">
</script>
html 建立一个div 并赋予宽高 用于存放地图
<style>
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#allmap {
height: 100%;
width: 100%;
}
</style>
<div id="allmap"></div>
js初始化地图并且定位展示当前地址
<script type="text/javascript">
var longi = window.location.href.split('longitude=')[1].split('&')[0]; //经度
var lati = window.location.href.split('latitude=')[1].split('&')[0]; //纬度
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
]
}));
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(true); //启用地图惯性拖拽,默认禁用
function theLocation(longitude,latitude){
if(longitude!= "" && latitude != ""){
map.clearOverlays();
var new_point = new BMap.Point(longitude,latitude);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
theLocation(longi,lati)
</script>