百度地图

最新推荐文章于 2024-09-08 21:17:37 发布

chuyuhuan1427

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/roderickkennedy/blog/158592

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=38fd747268cda427bd16ff5a05c32196"></script>
<title>百度地图</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl()); //添加控件
map.addControl(new BMap.ScaleControl);
map.addControl(new BMap.MapTypeControl());
//map.addControl(new BMap.OverviewMapControl()); // 没用的

// 创建地址解析器实例
/**var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint("深圳市龙岗区爱联地铁站B出口创兆广场701",
function(point){
if (point) {
alert(myGeo.getPoint("深圳市龙岗区爱联地铁站B出口创兆广场701"));
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, "深圳市");

var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("深圳市龙岗区爱联地铁站B出口创兆广场701");

var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map,panel : "results"}
});
transit.search("深圳市", "龙岗区爱联地铁站");

map.setCurrentCity("深圳");*/

/**function addMarker(point,index){
//创建图标对象
var myIcon = new BMap.Icon("http://api.map.baidu.com/images/marker red sprite.png"),new BMap.Size(23,25),{
//指定定位位置
//当标注显示在地图上时，其所指向的地理位置距离图标左上角各偏移10像素和25像素。您可以看到在本例中该位置即是
//图标中央下端的尖角位置
offset:new BMap.Size(10,25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMap.Size(0, 0 - index * 25)
// 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
} ;
}

marker.addEventListener("click", function(){
alert("您点击了标注");
}); */

var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "宝贝足迹" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("龙岗区爱联地铁站", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口

// 实现初始化方法
SquareOverlay.prototype.initialize = function(map){
// 保存map对象实例
this._map = map;
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("div");
div.style.position = "absolute";
// 可以根据参数设置元素外观
div.style.width = this._length + "px";
div.style.height = this._length + "px";
div.style.background = this._color;
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return div;
}

// 实现绘制方法
SquareOverlay.prototype.draw = function(){
// 根据地理坐标转换为像素坐标，并设置给容器
var position = this._map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._length / 2 + "px";
this._div.style.top = position.y - this._length / 2 + "px";
}

//window.setTimeout(function){
// map.panTo(new BMap.Point(116.409,39.918));
//},2000);

function initialize(){
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); //启用滚轮放大缩小
}

function loadScript(){
var script = document.createElement("script");
script.src="http://api.map.baidu.com/api?v=2.0&ak=38fd747268cda427bd16ff5a05c32196&callback = initialize";
script.src="http://api.map.baidu.com/api?v=2.0&ak=38fd747268cda427bd16ff5a05c32196&callback = initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>

转载于:https://my.oschina.net/roderickkennedy/blog/158592

chuyuhuan1427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="init...
复制链接

扫一扫