百度地图在线生成html,百度地图API-创建多个坐标,连线,信息提示

这是一个多坐标创建,并连线,和信息显示的例子

body, html, #allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

font-family: "微软雅黑";

}

var map; //Map实例

//后台传过来

var currentLat = 116.345555;

var currentLon = 40.018661;

var my = { title: "我的位置" };

var markerArr = [

{ title: "1", point: "116.364531,40.057003",name:"这是一个标题", content:"这是内容" },

{ title: "2", point: "116.340934,40.013401", name: "这是一个标题", content: "这是内容" },

{ title: "3", point: "116.342213,40.041267", name: "这是一个标题", content: "这是内容" },

{ title: "4", point: "116.342223,40.042267", name: "这是一个标题", content: "这是内容" },

{ title: "5", point: "116.342233,40.043267", name: "这是一个标题", content: "这是内容"},

];

function map_init() {

map = new BMap.Map("map");

//第1步:设置地图中心点,当前城市

var point = new BMap.Point(currentLat, currentLon);

//第2步:初始化地图,设置中心点坐标和地图级别。

map.centerAndZoom(point, 14);

//第3步:启用滚轮放大缩小

map.enableScrollWheelZoom(true);

//第4步:向地图中添加缩放控件

var ctrlNav = new window.BMap.NavigationControl({

anchor: BMAP_ANCHOR_TOP_LEFT,

type: BMAP_NAVIGATION_CONTROL_LARGE

});

map.addControl(ctrlNav);

//第5步:向地图中添加缩略图控件

var ctrlOve = new window.BMap.OverviewMapControl({

anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

isOpen: 1

});

map.addControl(ctrlOve);

//第6步:向地图中添加比例尺控件

var ctrlSca = new window.BMap.ScaleControl({

anchor: BMAP_ANCHOR_BOTTOM_LEFT

});

map.addControl(ctrlSca);

//第7步:绘制点

for (var i = 0; i < markerArr.length; i++) {

var p0 = markerArr[i].point.split(",")[0];

var p1 = markerArr[i].point.split(",")[1];

var maker = addMarker(new window.BMap.Point(p0, p1), i);

addInfoWindow(maker, markerArr[i], markerArr[i].name, markerArr[i].content);

}

//绘制点

var points = new Array();

for (var i = 0; i < markerArr.length; i++) {

var p0 = markerArr[i].point.split(",")[0];

var p1 = markerArr[i].point.split(",")[1];

var thePoint1 = new BMap.Point(p0, p1);

points.push(thePoint1);

}

drawPolyline(map, points);

// 添加信息窗口

function addInfoWindow(marker, poi,name, content) {

// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) });

marker.setLabel(label);

var clo = "";

if ("我的位置" == poi.title) {

clo = "#FF5782";

} else {

clo = "#E6FED";

}

label.setStyle({

color: "#fff",

fontSize: "16px",

backgroundColor: "0.05",

border: "0",

fontWeight: "bold"

});

//maps.addOverlay(lab1);

addClickHandler(name,content, marker);

}

}

function addClickHandler(name,content, marker) {

marker.addEventListener("click", function (e) {

openInfo(name,content, e)

}

);

}

function openInfo(name,content, e) {

var opts = {

width: 250, // 信息窗口宽度

height: 80, // 信息窗口高度

title: name, // 信息窗口标题

enableMessage: true//设置允许信息窗发送短息

};

var p = e.target;

var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象

map.openInfoWindow(infoWindow, point); //开启信息窗口

}

// 添加标注

function addMarker(point, index) {

index = 11;

var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",

new BMap.Size(23, 25), {

offset: new BMap.Size(10, 25),

imageOffset: new BMap.Size(0, 0 - index * 25)

});

var marker = new BMap.Marker(point, { icon: myIcon });

map.addOverlay(marker);

return marker;

}

//异步调用百度js

function map_load() {

map_init();

}

/**

* 画线

*/

function drawPolyline(bMap, points) {

if (points == null || points.length <= 1) {

return;

}

bMap.addOverlay(new BMap.Polyline(points, {

strokeColor: "blue",

strokeWeight: 3,

strokeOpacity: 0.6

})); // 画线

}

window.onload = map_load;

效果如下:

b91298320d97bc02e651ac58adef90b7.png

利用百度地图API,获取经纬度坐标

利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

PHP&plus;百度地图API&plus;JAVASCRIPT实现GPS坐标与百度坐标转换的实例

原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例

百度地图API 批量添加 带检索功能的信息窗口

ontainer&qu ...

js调用百度地图API创建地图,搜索位置

实现代码:

js调用百度地图API创建地图

技术交流群:233513714

Java 中 String 的常用方法(一)

上一篇介绍了 String 中的几个常用构造方法,由 String 这个核心对象发散出去关于字符的编码,字符的字节表达,对 GC 的影响,正则表达式,模式匹配,这可能是 Java 里内涵最丰富的对象了 ...

一点二次插值、二点二次插值 &comma;matlab

syms f x a b c; f(x)=3*x^4-4*x^3-12*x^2; q(x)=a*x^2+b*x+c; %二点二次插值 x=[-1.2 -0.8]; ff=diff(diff(f)); ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值