高德地图网页代码（html高德地图）

今天给各位分享高德地图网页代码的知识，其中也会对html高德地图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、关于App打开高德和百度地图导航的代码
• 2、调用高德地图API实现关键字查询的jsp代码怎么写
• 3、H5调用腾讯，百度，高德地图导航
• 4、代码如何实现点击button就调出高德地图
• 5、如何将高德地图直接用到html中
• 6、HTML5怎么用高德地图API返回当前位置的经纬度

关于App打开高德和百度地图导航的代码

       高德调起app传送门：

       百度调起app传送门：

       百度网页版传送门：

            百度逆地址编码:

uni.request({

url: ''+ name +'output=jsonak=6HwKBtjU7LkA9xtOkoKVc8AUB8Fzyk8d',

header: {

'content-type': "application/x-www-form-urlencoded"

},

success: (res) = {

console.log(res.data);

this.baiDuApiZuoBiao(res.data.result.location.lat,res.data.result.location.lng,name);

},

fail(err) {

console.log(err);

}

});

高德逆地址编码

uni.request({

url: ''+ name +'output=JSONkey=74b7c3bfe5d54c46d0792bbd69ac3aa2',

header: {

'content-type': "application/x-www-form-urlencoded"

},

success: (res) = {

console.log(res.data);

var join = res.data.geocodes[0].location.split(",");

console.log(join);

console.log("地理编码==" + JSON.stringify(res));

this.gaoDeApiZuoBiao(join[1],join[0],name);

},

fail(err) {

}

});

打开百度地图App

var url = `baidumap://map/navi?location=${latitude},${longitude}title=${name}coord_type=gcj02src=andr.baidu.openAPIdemo`;

打开高德地图App

let url = `androidamap://navi?sourceApplication=appnamepoiname=${name}lat=${latitude}lon=${longitude}dev=0`;

plus.runtime.openURL(url , function(e) {});

调用高德地图API实现关键字查询的jsp代码怎么写

API实现关键字查询的jsp

!DOCTYPE html

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

title关键字查询/title

link rel="stylesheet" type="text/css" href="/Public/css/demo.Default.css" /

script language="javascript" src=";key=c84af8341b1cc45c801d6765cda96087"/script

script language="javascript"

var mapObj;

var marker = new Array();

var windowsArr = new Array();

//基本地图加载

function mapInit() {

mapObj = new AMap.Map("iCenter");

}

function placeSearch() {

var MSearch;

mapObj.plugin(["AMap.PlaceSearch"], function() {

MSearch = new AMap.PlaceSearch({ //构造地点查询类

city:"021" //城市

});

AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果

MSearch.search("东方明珠"); //关键字查询

});

}

//添加markerinfowindow

function addmarker(i, d) {

var lngX = d.location.getLng();

var latY = d.location.getLat();

var markerOption = {

map:mapObj,

icon:"" + (i + 1) + ".png",

position:new AMap.LngLat(lngX, latY)

};

var mar = new AMap.Marker(markerOption);

marker.push(new AMap.LngLat(lngX, latY));

var infoWindow = new AMap.InfoWindow({

content:"h3font color=\"#00a6ac\" " + (i + 1) + ". " + d.name + "/font/h3" + TipContents(d.type, d.address, d.tel),

size:new AMap.Size(300, 0),

autoMove:true,

offset:new AMap.Pixel(0,-30)

});

windowsArr.push(infoWindow);

var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};

AMap.event.addListener(mar, "click", aa);

}

//回调函数

function keywordSearch_CallBack(data) {

var resultStr = "";

var poiArr = data.poiList.pois;

var resultCount = poiArr.length;

for (var i = 0; i resultCount; i++) {

resultStr += "div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"tabletrtdimg src=\"" + (i + 1) + ".png\"/td" + "tdh3font color=\"#00a6ac\"名称: " + poiArr[i].name + "/font/h3";

resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "/td/tr/table/div";

addmarker(i, poiArr[i]);

}

mapObj.setFitView();

document.getElementById("result").innerHTML = resultStr;

}

function TipContents(type, address, tel) { //窗体内容

if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {

type = "暂无";

}

if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {

address = "暂无";

}

if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {

tel = "暂无";

}

var str = " 地址：" + address + "br / 电话：" + tel + " br / 类型：" + type;

return str;

}

function openMarkerTipById1(pointid, thiss) { //根据id 打开搜索结果点tip

thiss.style.background = '#CAE1FF';

windowsArr[pointid].open(mapObj, marker[pointid]);

}

function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复

thiss.style.background = "";

}

/script

/head

body onload="mapInit();"

div id="iCenter"/div

div class="demo_box"

pinput type="button" value="查询" onclick="placeSearch()"/br /

/p

div id="r_title"b关键字查询结果:/b/div

div id="result" /div

/div

/body

/html

更多0

H5调用腾讯，百度，高德地图导航

例子：调用百度  调用其他地图思路是一样的

1、注册登录百度地图开放平台网页链接

2、选择对应的功能与服务，查看对应API接口及参数  使用场景介绍等等

3、创建应用【如果仅H5中使用 应用类型可选择浏览器端】

4、创建成功后 拿到应用AK去访问API获得数据

5、在页面中进行对数据处理

代码如何实现点击button就调出高德地图

需要给button设置监听。还得知道高德地图的act 给button添加指令就行了，使用intent

如何将高德地图直接用到html中

将高德地图用到html中步骤：

1、页面引入API：

1script type="text/javascript" src=";key=您申请的key值"/script

2、html：

1div id="container" style="width:500px; height:300px"/div

3、JS代码：

1234var map = new AMap.Map('container',{    zoom: 10,    center: [116.39,39.9]});

HTML5怎么用高德地图API返回当前位置的经纬度：

1、当手机采集的地理位置（经纬度）发生改变时在界面上显示出改变后的经纬度。

2、如果开发过android原生定位程序的开发者应该对这部分代码不陌生，中规中矩，先注册位置监听服务，然后当位置发生改变后出发onLocationChanged()方法。

3、现在请在官网上下载示例代码，导入工程后开启包com.amap.cn.apis.location中的MyLocation.java文件，该文件实现的主要功能是：初始化地图并且实现首次定位，地图会自动移动到定位点，我们一会便要基于这个文件来完成地图自动实时定位的功能。

HTML5怎么用高德地图API返回当前位置的经纬度

HTML5怎么用高德地图API返回当前位置的经纬度

开发指南第三章定位信息前半部分的代码实现的功能是：当手机采集的地理位置（经纬度）发生改变时在界面上显示出改变后的经纬度。如果开发过android原生定位程序的开发者应该对这部分代码不陌生，中规中矩，先注册位置监听服务，然后当位置发生改变后出发onLocationChanged()方法。现在请在官网上下载示例代码，导入工程后开启包com.amap.cn.apis.location中的MyLocation.java文件，该文件实现的主要功能是：初始化地图并且实现首次定位，地图会自动移动到定位点，我们一会便要基于这个文件来完成地图自动实时定位的功能。

关于高德地图网页代码和html高德地图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。