html5 天地图,index.html

缺乏、安全感 2022-10-10 11:29 164阅读 0赞

天地图－地图API－范例－根据关键字搜索纯POI(不搜公交线)

.search \{

font-size: 13px;

border: 1px solid \#999999;

.ls \{

line-height: 27px;

padding-left: 7px;

.prompt \{

display: none;

font-size: 13px;

border: 1px solid \#999999;

.statistics \{

display: none;

font-size: 13px;

border: 1px solid \#999999;

overflow-y: scroll;

height: 150px;

.suggests \{

display: none;

font-size: 13px;

border: 1px solid \#999999;

.lineData \{

display: none;

font-size: 13px;

border: 1px solid \#999999;

.result \{

display: none;

font-size: 12px;

border: 1px solid \#999999;

line-height: 27px;

padding-left: 7px;

var map;

var zoom = 12;

var localsearch;

var infoWin;

function onLoad() \{

//初始化地图对象

map = new T.Map("mapDiv", \{

projection: 'EPSG:4326',

datasourcesControl: true

\});

//创建对象

var ctrl = new T.Control.MapType();

//添加控件

map.addControl(ctrl);

//设置显示地图的中心点和级别

map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);

var config = \{

pageCapacity: 10,//每页显示的数量

onSearchComplete: localSearchResult//接收数据的回调函数

\};

//创建搜索对象

localsearch = new T.LocalSearch(map, config);

rectTool = new T.RectangleTool(map);

rectTool.on('draw', function (e) \{

onDrawCircle(e.currentRectangle.getLngLats()\[0\]\[0\].lng,

e.currentRectangle.getLngLats()\[0\]\[0\].lat,

e.currentRectangle.getLngLats()\[0\]\[2\].lng,

e.currentRectangle.getLngLats()\[0\]\[2\].lat,

);

generate\_url();

\});

var config2 = \{

showLabel: true,

color: "blue", weight: 3, opacity: 0.5, fillColor: "\#FFFFFF", fillOpacity: 0.5

\};

//创建标注工具对象

polygonTool = new T.PolygonTool(map, config2);

polygonTool.on('draw', function (e) \{

var result = ""

for(var i=0; i

result += e.currentLnglats\[i\].lng;

result += ",";

result += e.currentLnglats\[i\].lat;

result += ";"

document.getElementById('info').value = result.substr(0, result.length-1)

generate\_url();

\});

load\_polygen();

function getUrlParam(name) \{

var reg = new RegExp("(^|&)" + name + "=(\[^&\]\*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if(r != null) \{

//return unescape(r\[2\]);

return r\[2\];

return null;

function generate\_url()\{

var url = document.getElementById('info').value;

var base\_url = window.location.href.split("?")\[0\]

var t\_url = base\_url + "?points="+url;

document.getElementById('url').value = t\_url;

function load\_polygen()\{

var url\_points = getUrlParam("points")

if (!url\_points)\{

return;

document.getElementById('info').value = url\_points;

var lnglats = url\_points.split(";")

var points=\[\];

for (var i=0; i

var tmp = lnglats\[i\].split(",");

points.push(new T.LngLat(tmp\[0\], tmp\[1\]));

//创建面对象

var polygon = new T.Polygon(points,\{

color: "blue", weight: 3, opacity: 0.5, fillColor: "\#FFFFFF", fillOpacity: 0.5

\});

//向地图上添加面

map.addOverLay(polygon);

map.centerAndZoom(points\[0\], 13);

function onDrawCircle(a, b, c, d) \{

document.getElementById('info').value = a +"," + b + ";"+ c + "," + b + ";" +c + "," + d + ";" + a + "," + d + ";" + a +"," + b;

function localSearchResult(result) \{

//清空地图及搜索列表

clearAll();

//添加提示词

prompt(result);

//根据返回类型解析搜索结果

switch (parseInt(result.getResultType())) \{

case 1:

//解析点数据结果

pois(result.getPois());

break;

case 2:

//解析推荐城市

statistics(result.getStatistics());

break;

case 3:

//解析行政区划边界

area(result.getArea());

break;

//解析提示词

function prompt(obj) \{

var prompts = obj.getPrompt();

if (prompts) \{

var promptHtml = "";

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

var prompt = prompts\[i\];

var promptType = prompt.type;

var promptAdmins = prompt.admins;

var meanprompt = prompt.DidYouMean;

if (promptType == 1) \{

promptHtml += "

您是否要在" + promptAdmins\[0\].name + "搜索更多包含**" + obj.getKeyword() + "**的相关内容？

else if (promptType == 2) \{

promptHtml += "

在**" + promptAdmins\[0\].name + "**没有搜索到与**" + obj.getKeyword() + "**相关的结果。

if (meanprompt) \{

promptHtml += "

您是否要找：**" + meanprompt + "**

else if (promptType == 3) \{

promptHtml += "

有以下相关结果，您是否要找：

for (i = 0; i < promptAdmins.length; i++) \{

promptHtml += "

" + promptAdmins\[i\].name + "

if (promptHtml != "") \{

document.getElementById("promptDiv").style.display = "block";

document.getElementById("promptDiv").innerHTML = promptHtml;

//解析点数据结果

function pois(obj) \{

if (obj) \{

//显示搜索列表

var divMarker = document.createElement("div");

//坐标数组，设置最佳比例尺时会用到

var zoomArr = \[\];

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

//闭包

(function (i) \{

//名称

var name = obj\[i\].name;

//地址

var address = obj\[i\].address;

//坐标

var lnglatArr = obj\[i\].lonlat.split(" ");

var lnglat = new T.LngLat(lnglatArr\[0\], lnglatArr\[1\]);

var winHtml = "地址:" + address;

//创建标注对象

var marker = new T.Marker(lnglat);

//地图上添加标注点

map.addOverLay(marker);

//注册标注点的点击事件

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

this.showPosition(marker, name, winHtml);

\}, this);

zoomArr.push(lnglat);

//在页面上显示搜索的列表

var a = document.createElement("a");

a.href = "javascript://";

a.innerHTML = name;

a.onclick = function () \{

showPosition(marker, name, winHtml);

divMarker.appendChild(document.createTextNode((i + 1) + "."));

divMarker.appendChild(a);

divMarker.appendChild(document.createElement("br"));

\})(i);

//显示地图的最佳级别

map.setViewport(zoomArr);

//显示搜索结果

divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));

document.getElementById("searchDiv").appendChild(divMarker);

document.getElementById("resultDiv").style.display = "block";

//显示信息框

function showPosition(marker, name) \{

if (infoWin) \{

map.removeOverLay(infoWin);

infoWin = null;

var html = "

##### " + name + " #####

infoWin = new T.InfoWindow(html, new T.Point(\[0, 0\]));

marker.openInfoWindow(infoWin);

//解析推荐城市

function statistics(obj) \{

if (obj) \{

//坐标数组，设置最佳比例尺时会用到

var pointsArr = \[\];

var priorityCitysHtml = "";

var allAdminsHtml = "";

var priorityCitys = obj.priorityCitys;

if (priorityCitys) \{

//推荐城市显示

priorityCitysHtml += "在中国以下城市有结果

*  ";

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

priorityCitysHtml += "

" + priorityCitys\[i\].name + "(" + priorityCitys\[i\].count + ")";

priorityCitysHtml += "

var allAdmins = obj.allAdmins;

if (allAdmins) \{

allAdminsHtml += "更多城市

*  ";

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

allAdminsHtml += "

" + allAdmins\[i\].name + "(" + allAdmins\[i\].count + ")";

var childAdmins = allAdmins\[i\].childAdmins;

if (childAdmins) \{

for (var m = 0; m < childAdmins.length; m++) \{

allAdminsHtml += "

> " + childAdmins\[m\].name + "(" + childAdmins\[m\].count + ")

allAdminsHtml += "

document.getElementById("statisticsDiv").style.display = "block";

document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;

//解析行政区划边界

function area(obj) \{

if (obj) \{

if(obj.points)\{

//坐标数组，设置最佳比例尺时会用到

var pointsArr = \[\];

var points = obj.points;

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

var regionLngLats = \[\];

var regionArr = points\[i\].region.split(",");

for (var m = 0; m < regionArr.length; m++) \{

var lnglatArr = regionArr\[m\].split(" ");

var lnglat = new T.LngLat(lnglatArr\[0\], lnglatArr\[1\]);

regionLngLats.push(lnglat);

pointsArr.push(lnglat);

//创建线对象

var line = new T.Polyline(regionLngLats, \{

strokeColor: "blue",

strokeWeight: 3,

strokeOpacity: 1,

strokeStyle: "dashed"

\});

//向地图上添加线

map.addOverLay(line);

//显示最佳比例尺

map.setViewport(pointsArr);

if(obj.lonlat)\{

var regionArr = obj.lonlat.split(",");

map.panTo(new T.LngLat(regionArr\[0\], regionArr\[1\]));

//清空地图及搜索列表

function clearAll() \{

map.clearOverLays();

document.getElementById("searchDiv").innerHTML = "";

document.getElementById("resultDiv").style.display = "none";

document.getElementById("statisticsDiv").innerHTML = "";

document.getElementById("statisticsDiv").style.display = "none";

document.getElementById("promptDiv").innerHTML = "";

document.getElementById("promptDiv").style.display = "none";

document.getElementById("suggestsDiv").innerHTML = "";

document.getElementById("suggestsDiv").style.display = "none";

document.getElementById("lineDataDiv").innerHTML = "";

document.getElementById("lineDataDiv").style.display = "none";

//清除覆盖物

function remove\_overlay()\{

map.clearOverLays();

本示例演示如何根据关键字搜索纯POI(不搜公交线)

转到第页

value="转到"/>

一键复制

编辑

Web IDE

原始数据

按行查看

历史

html5 天地图,index.html

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html5 天地图,index.html

相关 html海南地图插件,海南小地图(echart)

相关 HTML5在页面上使用谷歌地图,用html5调取谷歌地图获取位置

相关 HTML5 SVG世界地图地图可拖拽和缩放

相关 HTML&HTML5

相关 html5页面中添加腾讯地图api

相关【html5百度地图】简单使用

相关 HTML5学习笔记（四）地图功能

相关 Html5 之 Google地图

相关 5.27前端学习第一天 ——html