百度地圖的應用
阿新 • • 發佈：2019-01-10
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=A8670c09c603b2e409efef4709e83f0c"></script>
<script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
</style>
</style>
<title>地圖展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var mymap={
map: null,
myIcon: null,
point: null,
bottom_right_navigation: null,
bottom_left_control: null,
myMarker: null,
address:null,
mymaplable:null,
coArr:[],
init:function(){
this.map = new BMap.Map("allmap");
this.map.centerAndZoom(this.point, 14);
this.xy = mymap.map.getBounds();
this.myIcon = new BMap.Icon("http://app.carcarup.com/images/ico/dw_blue.png", new BMap.Size(40, 70), { anchor: new BMap.Size(10, 34), imageSize: new BMap.Size(20, 35) });
this.bottom_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM }); //縮放按鈕
this.bottom_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(0, 30) });
mymap.map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
mymap.map.addControl(this.bottom_left_control);
mymap.map.addControl(this.bottom_right_navigation); //新增地圖型別控制元件
mymap.map.addEventListener("tilesloaded", function () { mymap.LoadData(); });
},
LoadData:function(){
mymap.SetMe();
mymap.Loadinfo();
this.xy = this.GetBounds();
},
SetMe:function(){
this.map.clearOverlays();
var geoc = new BMap.Geocoder();
geoc.getLocation(mymap.map.getCenter(), function (rs) {
var addComp = rs.addressComponents;
var pois = rs.surroundingPois;
if (pois.length > 0) {
mymap.address = pois[0].title;
}
else if ( mymap.address == null && addComp != null ) {
mymap.address = addComp.district + addComp.street + addComp.streetNumber;
}
mymap.mymaplable.setContent(mymap.address);
});
if (mymap.myMarker) mymap.map.removeControl(mymap.myMarker);
mymap.myMarker = new BMap.Marker(mymap.map.getCenter(), { icon: this.myIcon });
mymap.map.addOverlay( mymap.myMarker);
if (mymap.mymaplable) mymap.map.removeControl(mymap.mymaplable);
var opts = {
position: mymap.map.getCenter(),
offset: new BMap.Size(-90, -58)
}
mymap.mymaplable = new BMap.Label("", opts);
mymap.mymaplable.setStyle({
color: "#666",
fontSize: "12px",
height: "22px",
lineHeight: "20px",
fontFamily: "微軟雅黑",
borderColor: '#ddd',
width: '180px',
textAlign: 'center'
});
mymap.map.addOverlay(mymap.mymaplable);
},
Loadinfo:function(){
for (var i = 0; i < mymap.coArr.length; i++) {
var pt = new BMap.Point(mymap.coArr[i].x, mymap.coArr[i].y);
var bs = this.map.getBounds();
var istrue= bs.containsPoint(pt);
if(istrue){
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+mymap.coArr[i].addr+"</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='天安門'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+mymap.coArr[i].name+mymap.coArr[i].tel+"</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent);
var myIcon = new BMap.Icon("http://app.carcarup.com/images/ico/fuwu.png", new BMap.Size(50, 60), { anchor: new BMap.Size(13, 30), imageSize: new BMap.Size(26, 30) });
var marker = new BMap.Marker(pt,{icon:myIcon});
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
mymap.map.addOverlay(marker);
}
}
}
}
mymap.point = new BMap.Point(118.180194, 39.630867);
mymap.coArr=[{'id':'298','addr':'路北區學院北路萬科金域華府','x':118.163906,'y':39.651905,obj:null}];
mymap.init();
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=A8670c09c603b2e409efef4709e83f0c"></script>
<script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
</style>
</style>
<title>地圖展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var mymap={
map: null,
myIcon: null,
point: null,
bottom_right_navigation: null,
bottom_left_control: null,
myMarker: null,
address:null,
mymaplable:null,
coArr:[],
init:function(){
this.map = new BMap.Map("allmap");
this.map.centerAndZoom(this.point, 14);
this.xy = mymap.map.getBounds();
this.myIcon = new BMap.Icon("http://app.carcarup.com/images/ico/dw_blue.png", new BMap.Size(40, 70), { anchor: new BMap.Size(10, 34), imageSize: new BMap.Size(20, 35) });
this.bottom_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM }); //縮放按鈕
this.bottom_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(0, 30) });
mymap.map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
mymap.map.addControl(this.bottom_left_control);
mymap.map.addControl(this.bottom_right_navigation); //新增地圖型別控制元件
mymap.map.addEventListener("tilesloaded", function () { mymap.LoadData(); });
},
LoadData:function(){
mymap.SetMe();
mymap.Loadinfo();
this.xy = this.GetBounds();
},
SetMe:function(){
this.map.clearOverlays();
var geoc = new BMap.Geocoder();
geoc.getLocation(mymap.map.getCenter(), function (rs) {
var addComp = rs.addressComponents;
var pois = rs.surroundingPois;
if (pois.length > 0) {
mymap.address = pois[0].title;
}
else if ( mymap.address == null && addComp != null ) {
mymap.address = addComp.district + addComp.street + addComp.streetNumber;
}
mymap.mymaplable.setContent(mymap.address);
});
if (mymap.myMarker) mymap.map.removeControl(mymap.myMarker);
mymap.myMarker = new BMap.Marker(mymap.map.getCenter(), { icon: this.myIcon });
mymap.map.addOverlay( mymap.myMarker);
if (mymap.mymaplable) mymap.map.removeControl(mymap.mymaplable);
var opts = {
position: mymap.map.getCenter(),
offset: new BMap.Size(-90, -58)
}
mymap.mymaplable = new BMap.Label("", opts);
mymap.mymaplable.setStyle({
color: "#666",
fontSize: "12px",
height: "22px",
lineHeight: "20px",
fontFamily: "微軟雅黑",
borderColor: '#ddd',
width: '180px',
textAlign: 'center'
});
mymap.map.addOverlay(mymap.mymaplable);
},
Loadinfo:function(){
for (var i = 0; i < mymap.coArr.length; i++) {
var pt = new BMap.Point(mymap.coArr[i].x, mymap.coArr[i].y);
var bs = this.map.getBounds();
var istrue= bs.containsPoint(pt);
if(istrue){
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+mymap.coArr[i].addr+"</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='天安門'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+mymap.coArr[i].name+mymap.coArr[i].tel+"</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent);
var myIcon = new BMap.Icon("http://app.carcarup.com/images/ico/fuwu.png", new BMap.Size(50, 60), { anchor: new BMap.Size(13, 30), imageSize: new BMap.Size(26, 30) });
var marker = new BMap.Marker(pt,{icon:myIcon});
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
mymap.map.addOverlay(marker);
}
}
}
}
mymap.point = new BMap.Point(118.180194, 39.630867);
mymap.coArr=[{'id':'298','addr':'路北區學院北路萬科金域華府','x':118.163906,'y':39.651905,obj:null}];
mymap.init();
</script>