调用高德地图

迈不过友情╰ 2021-10-31 16:34 529阅读 0赞

//F12 **切换手机模式**

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
<title>异步加载地图</title>  
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>  
</head>  
<style>  
body,html\{  
font-size: 1rem;  
font-family: "微软雅黑";  
\}  
\#mapBox\{  
width: 100%;  
height: 35%;  
overflow: hidden;  
\}  
\#container\{  
width: 100%;  
height: 35%;  
background-color: \#ccc;  
margin-top: 100px;  
\}  
h1\{  
text-align: center;  
\}  
\#count\{  
padding: 10px;  
\}  
.kilometer\{  
padding-bottom: 10px;  
text-align: center;  
border-bottom: 1px solid \#ddd;  
\}  
</style>  
<body>  
<h1>详情</h1>  
<p id="time"></p>  
<div id="mapBox">  
<div id="container"></div>  
</div>  
<div id="count">  
<p class="kilometer">8.129km</p>  
<table>  
<tr>  
<td>17分41秒</td>  
<td>0.205cal</td>  
<td>17分41秒</td>  
</tr>  
<tr>  
<td>时长</td>  
<td>卡路里</td>  
<td>配速</td>  
</tr>  
</table>  
</div>

<script src="http://webapi.amap.com/maps?v=1.3&key=0e2641c3d7e299970de643da8564bbf1&callback=init"></script>  
<script>  
var html = document.getElementsByTagName("html")\[0\];  
var screenW = window.document.documentElement.clientWidth;  
html.style.fontSize = (screenW/640)\*20 + "px";  
function nowDay()\{  
var oDate = new Date();  
var year = oDate.getFullYear();  
var month = oDate.getMonth();  
var day = oDate.getDate();  
var week = oDate.getDay();  
var hour = oDate.getHours();  
var min = oDate.getMinutes();  
var sex = oDate.getSeconds();  
switch(week)\{  
case 1:  
week = '星期一';  
break;  
case 2:  
week = '星期二';  
break;  
case 3:  
week = '星期三';  
break;  
case 4:  
week = '星期四';  
break;  
case 5:  
week = '星期五';  
break;  
case 6:  
week = '星期六';  
break;  
case 0:  
week = '星期日';  
break;  
\}  
function t(t)\{  
if(t<10)\{  
t='0'+t  
\}  
return t;  
\}  
  
return \_html = +year+'/' +month + '/' + day + ' ' + week + '' + t(hour) + ':' + t(min) + ':' +t(sex)  
\}  
var time = document.getElementById("time");  
time.innerHTML= nowDay()  
  
var map = new AMap.Map('container', \{  
resizeEnable: true,  
center: \[116.397428, 39.90923\],  
zoom: 13  
\});  
var lineArr = \[  
\[116.368904, 39.913423\],  
\[116.382122, 39.901176\],  
\[116.387271, 39.912501\],  
\[116.398258, 39.904600\]  
\];  
var polyline = new AMap.Polyline(\{  
path: lineArr, //设置线覆盖物路径  
strokeColor: "\#3366FF", //线颜色  
strokeOpacity: 1, //线透明度  
strokeWeight: 5, //线宽  
strokeStyle: "solid", //线样式  
strokeDasharray: \[10, 5\] //补充线样式  
\});  
  
polyline.setMap(map);  
</script>  
</body>  
</html>

转载于:https://www.cnblogs.com/zzgyq/p/6529833.html

发表评论取消回复

表情：

评论列表（有 0 条评论，529人围观）

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

相关阅读

相关高德地图key调用

高德地图key调用,首先将常量提出到静态配置文件中，方便后期修改时无需重新打包。 1. 在html文件的同级目录新建一个static文件夹，再在里面新建一个config.js

超、凢脫俗/ 2023年10月12日 16:20/ 0 赞/ 11 阅读

相关 flutter_高德地图案例_高德地图amap_flutter_map案例

开发环境如下 1. flutter 开发环境 2. 安卓开发环境 3. dart开发环境目前flutter集成了dart 4. debug.keystore 生

向右看齐/ 2023年01月12日 01:17/ 0 赞/ 191 阅读

相关 uniapp 使用高德地图

<template> <view> <view class="map" id="map"></view> </view> </t

分手后的思念是犯贱/ 2022年09月02日 12:50/ 0 赞/ 404 阅读

相关 vue 调用高德地图

一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 https ://ele mefe.gi thub.io/vue-a map/\/ 这个就不细说了，按

Myth丶恋晨/ 2022年06月16日 03:25/ 0 赞/ 241 阅读

相关高德地图工具包

package com.ybdc.yy.base.basis.utils.map; import java.io.BufferedReader; impor

ゝ一世哀愁。/ 2022年06月13日 03:26/ 0 赞/ 272 阅读

相关高德地图工具包

package com.ybdc.yy.base.basis.utils.map; import java.io.BufferedReader; impor

布满荆棘的人生/ 2022年06月13日 03:25/ 0 赞/ 248 阅读

相关 Kibana使用高德地图

说明目前Kibana默认自带的地图全部是英文，更换高德地图对地图汉化修改配置 1. 编辑kibana配置文件kibana.yml，最后面添加 ti

秒速五厘米/ 2022年02月26日 07:24/ 0 赞/ 329 阅读

相关调用高德地图

//F12 切换手机模式 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-eq

迈不过友情╰/ 2021年10月31日 16:34/ 0 赞/ 530 阅读

相关高德地图JSAPI 定位

<!doctype html> <html> <head> <meta charset="utf-8"> <meta h

电玩女神/ 2021年09月19日 21:10/ 0 赞/ 559 阅读

相关 uniapp 高德地图接入

> 1.登陆高德地图开放平台并下载sdk【sdk如下】 function AMapWX(a){this.key=a.key,this.requestConfig={k

亦凉/ 2021年09月19日 21:08/ 0 赞/ 659 阅读