html利用百度地图查找路线,html调用百度地图API实现查找路线

有时候做企业网站经常用到指引地图。用默认的吧，样式可能又不太符合主题，所以就有了下面这个版本。

基于百度官方demo样式修改，改得不好请轻喷。我看过有的是直接打开页面就定位个地址然后跳转搜索路线，我觉得这样用户可能不太买账，我个人不喜欢这样，以下样式均可修改。兼容性请自行测试。

最终效果：

js部分:

css部分：

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

.position-map .outset {

width:170px;

min-height: 20px;

vertical-align: middle;

}

.position-map .input {

display: block;

margin-top: 10px;

}

textarea, input[type="text"], input[type="password"], input[type="search"] {

padding: 15px 8px;

line-height: 1;

height: 18px;

border: 1px solid #ddd;

background-color: #fff;

transition: border linear .2s,box-shadow linear .2s;

vertical-align: middle;

}

.position-map .btn {

margin-left: 5px;

vertical-align: middle;

}

.btn {

display: inline-block;

border: 0;

text-align: center;

background: #0089e1;

color: #fff;

min-height: 34px;

line-height: 34px;

padding: 0 15px;

-webkit-transition: background .3s,border .3s;

transition: background .3s,border .3s;

}

html部分

顺带做了个手机版的，需要申请百度地图API AK

打包下载地址

html利用百度地图查找路线,html调用百度地图API实现查找路线相关推荐

android h5调用百度地图,h5页面如何调用百度地图获取当前位置（代码）
本篇文章给大家带来的内容是关于h5页面如何调用百度地图获取当前位置(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中越来越多的用到了手机的GRS定位功能,使用百度地图A ...
高德地图 web android,Android 调用第三方地图类App （高德百度百度网页版）
Screenshot_20170509-152819.png 前言最近项目中需要用到地图的功能,但是应用本身不是地图类应用,而且用地图只是为了分享和展示一个地点而已,所以完全没有必要去集成厚重的sd ...
python调用百度地图实现导航_python调用百度地图WEB服务API获取地点对应坐标值
本篇博客介绍如何使用Python调用百度地图WEB服务API获取地点对应坐标值,现有一系列结构化地址数据(如:北京市海淀区上地十街十号),目的是获取对应坐标值. 百度地图开发者平台路线规划使用说明网址 ...
百度高德位置定位服务器,调用百度、高德地图App，百度地图网页版，App定位
1.首先判断是否安装了目标地图App //判断是否安装目标应用 public static boolean isInstallByread(String packageName) { return n ...
python调用谷歌地图_使用Python调用谷歌地图并记录运动轨迹进行可视化
本篇博文主要介绍了如何使用python来调用谷歌地图,并对北京的一个轨迹数据集进行可视化展示.该数据集包含在3年内收集的182个用户的GPS轨迹.我在这个演示中使用了用户001的数据. 博文会给出具体 ...
百度语音识别rest html,delphi调用百度语音识别REST API(示例代码)
delphi调用百度语音识别REST API -20160616 -感谢魔术猫和 DelphiTeacher 兄的帮助解决了返回中文乱码的问题! -注:语音的录音格式目前只支持评测8k/16k采样 ...
python 百度识图_python如何调用百度识图api
一.先去百度识别官网注册开通服务且获得ak和sk 二.代码模板 import cv2 import base64 import requests import numpy as np import t ...
android百度人脸采集免费,Android 调用百度人脸采集
1.访问集成文档 http://ai.baidu.com/docs#/FaceSDK-Collect-WithLiveness-Android/top 申请license,下载自动授权的sdk 2. ...
BaiduMap---百度地图官方Demo之调用百度地图（介绍如何调启百度地图实现自身业务功能）
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

html利用百度地图查找路线,html调用百度地图API实现查找路线

html利用百度地图查找路线,html调用百度地图API实现查找路线相关推荐

最新文章

热门文章