openlayer3实现定位
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ol3 popup</title>
<link rel="stylesheet" type="text/css" href="./css/ol.css"/>
<style type="text/css">
body, #map {
border: 0px;
margin: 0px;
padding: 0px;
padding: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
#btn{
position: absolute;
top: 10pt;
right: 10pt;
z-index: 99;
}
#btn1{
position: absolute;
top: 30pt;
right: 10pt;
z-index: 99;
}
#btn2{
position: absolute;
top: 50pt;
right: 10pt;
z-index: 99;
}
</style>
<script type="text/javascript" src="./js/ol.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
function init(){
var format = 'image/png';
var bounds = [73.4510046356223, 18.1632471876417,
134.976797646506, 53.5319431522236];
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [ new ol.layer.Tile({
source: new ol.source.OSM({
projection:ol.proj.getTransform('EPSG:3857','EPSG:4326')
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center:[117,42],
zoom:6
})
});
map.getView().fit(bounds, map.getSize());
$("div#btn").click(function(){
map.getView().setCenter([-118,34])
map.getView().setZoom(10);
});
$("div#btn1").click(function(){
map.getView().setCenter([0,51.5])
map.getView().setZoom(10);
});
$("div#btn2").click(function(){
map.getView().setCenter([116.5,40])
map.getView().setZoom(11);
});
}
</script>
</head>
<body onLoad="init()">
<div id="map"></div>
<div id="btn"><button type="button">定位到洛杉矶</button></div>
<div id="btn1"><button type="button">定位到伦敦</button></div>
<div id="btn2"><button type="button">定位到北京</button></div>
</body>
</html>效果图