<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>媒体地图</title>
<link rel="stylesheet" href="cnyuan/main1119.css"/>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.12&key=3993e3ad25c516d9ad02c03937e028e0&plugin=AMap.LineSearch,AMap.Autocomplete,AMap.Transfer"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>
window._AMapSecurityConfig = { securityJsCode: 'cca85fe17998a01e56fa421de9a0f733'}
</script>
<style>
/* 站点原标 */
.marker {color: #ffffff; white-space: nowrap; font-size: 12px; width: 30px; height: 30px; border: 1px solid #fff; text-align: center; border-radius:15px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.markerC {color: #ff0000; padding: 4px 10px; white-space: nowrap; font-size: 14px;}
.titleDiv{display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 18px; font-weight:900; }
.amap-marker .marker-route {position: absolute; width: 40px; height: 44px; color: #e90000; background: url(cnyuan/poi-1.png) no-repeat; cursor: pointer;}
.amap-marker .marker-marker-bus-from {background-position: -334px -180px;}
.amap-marker .marker-marker-bus-from2 {background-position: -334px -135px;}
.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}
.copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}
</style>
</head>
<body>
<div id="container"></div>
<script language="javascript">
var color=new Array("#227700","#FF0000","#0000CC","#FF0088","#003377","#5555FF","#FF88C2","#99FF33","#FF7744","#000000","#FFCCCC","#00DDDD","#77FFCC","#00DD00","#7A0099","#99BBFF","#66009D","#FF5511","#51FDC9","#0DCA18","#8FD142","#D379A7","#0067C3","#4E14B0","#72C142","#017DBC","#5D80E8","#E22B70","#8DA64B","#364FCB","#0223F3","#91BCA0","#B7D442","#6F4171","#F2814B","#F9E897","#C41841","#4F34FB","#68BFD6","#B47A61","#6F84B2","#39CF0B","#E0BA26","#11BC78","#BAF8AE","#27E330","#9FF93B","#C39EF9","#FFAA33");
var city = '柳州市';
var lineStr = '快2号线,2路,4路,6路,14路,16路,26路,27路,31路,35路,54路,59路,快8号线,12路,30路,49路,62路,64路,65路,70路,78路,32路,33路,41路,42路,53路';
var isShowStation = 'true'; //false 开启站点 true 关闭站点
var lineArr = lineStr.split(",");
var poiStr = '';
var poiArr = poiStr.split("|");
var poiLength = poiArr.length-1;
for(var i=0;i<lineArr.length;i++){
lineSearch(color[i],lineArr[i]);
}
/*
* 该示例主要流程分为三个步骤
* 1. 首先调用公交路线查询服务(lineSearch)
* 2. 根据返回结果解析，输出解析结果(lineSearch_Callback)
* 3. 在地图上绘制公交线路()
*/
var map = new AMap.Map("container", {
zoom: 10 //地图显示的缩放级别
});
for(var j=0;j<poiLength;j++){
var dataStr = poiArr[j];
var dataArr = dataStr.split(",");
tradingArea(dataArr[0],dataArr[1],dataArr[2]);
}
/*公交线路查询*/
function lineSearch(colorStyle,lineName) {
cityName = city;
//实例化公交线路查询类，只取回一条路线
var linesearch = new AMap.LineSearch({
pageIndex: 1,
city: cityName,
pageSize: 2,
extensions: 'all'
});
//搜索相关公交线路
linesearch.search(lineName, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
lineSearch_Callback(result,lineName,colorStyle);
} else {
alert("暂无数据");
map.clearMap();
}
});
}
/*公交路线查询服务返回数据解析概况*/
function lineSearch_Callback(data,lineName,colorStyle) {
var lineArr = data.lineInfo;
var lineNum = data.lineInfo.length;
if (lineNum == 0) {
} else {
for (var i = 0; i < lineNum; i++) {
var pathArr = lineArr[i].path;
var stops = lineArr[i].via_stops;
var startPot = stops[0].location;
var endPot = stops[stops.length - 1].location;
for(var j=0;j<stops.length;j++){
var stationMark;
if (isShowStation=="true" && j >0 && j < stops.length-1){
stationMark = new AMap.Marker({
map: map,
position: stops[j].location,
offset:new AMap.Pixel(-18,-13),
icon: new AMap.Icon({
size: new AMap.Size(0,0)
})
});
}else{
stationMark = new AMap.Marker({
map: map,
position: stops[j].location,
offset:new AMap.Pixel(-18,-13),
icon: new AMap.Icon({
size: new AMap.Size(40,40), //图标大小
image: "cnyuan/way_btn2.png",
imageOffset: new AMap.Pixel(0, -130)
})
});
}
//添加点标记，并使用自己的icon
}
if (i == 0) drawbusLine(startPot, endPot, pathArr,lineName,colorStyle);
}
}
}
/*绘制路线*/
function drawbusLine(startPot, endPot, BusArr,lineName,colorStyle) {
if(lineName.indexOf("路") > 0){
lineName = lineName.substring(0,lineName.indexOf("路"));
}
//绘制起点，终点
var markerStart = new AMap.Marker({
map: map,
position: [startPot.lng, startPot.lat], //基点位置
icon: "cnyuan/start.png",
zIndex: 10
});
var markerContent = document.createElement("div");
markerContent.className = 'titleDiv';
var markerSpan = document.createElement("span");
var txtSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.style.backgroundColor=colorStyle;
markerSpan.innerHTML = lineName;
txtSpan.style.color=colorStyle;
txtSpan.innerHTML = " ";//路
markerContent.appendChild(markerSpan);
markerContent.appendChild(txtSpan);
markerStart.setContent(markerContent); //更新点标记内容
var markerEnd = new AMap.Marker({
map: map,
position: [endPot.lng, endPot.lat], //基点位置
icon: "cnyuan/end.png",
zIndex: 10
});
var markerContent2 = document.createElement("div2");
markerContent2.className = 'titleDiv';
var markerSpan2 = document.createElement("span2");
var txtSpan2 = document.createElement("span");
markerSpan2.className = 'marker';
markerSpan2.style.backgroundColor=colorStyle;
markerSpan2.innerHTML = lineName;
txtSpan2.style.color=colorStyle;
txtSpan2.innerHTML = " ";//路
markerContent2.appendChild(markerSpan2);
markerContent2.appendChild(txtSpan2);
markerEnd.setContent(markerContent2); //更新点标记内容
//绘制乘车的路线
busPolyline = new AMap.Polyline({
map: map,
path: BusArr,
strokeColor: colorStyle,//线颜色
strokeOpacity: 1,//线透明度
strokeWeight: 3//线宽
});
map.setFitView();
}
var colorIndex = 0;
var delIndex = 0;
$("#selSearch").click(function(){
var cname = cityName;
var lineName = $("#selectSearch2").val();
//�
CY.zip （8个子文件） 
cnyuan 
end.png 1KB
randomColor.min.js 5KB main1119.css 2KB mark_b.png 688B way_btn2.png 3KB start.png 910B poi-1.png 17KB
CY.html 9KB资源评论
cnyuan8
- 粉丝: 0
- 资源: 1
