添加高德地图
parent
a6134144b2
commit
04ad826666
|
@ -874,19 +874,26 @@ align-items: center;
|
||||||
section .whoil .whoil-1{padding: 20px;margin: 0 -20px;}
|
section .whoil .whoil-1{padding: 20px;margin: 0 -20px;}
|
||||||
section .whoil .whoil-1 .all {font-size: 16px;border-bottom: #cb1919 1px solid;}
|
section .whoil .whoil-1 .all {font-size: 16px;border-bottom: #cb1919 1px solid;}
|
||||||
section .whoil{padding: 0 20px;}
|
section .whoil{padding: 0 20px;}
|
||||||
.cart-content{display: flex;position: relative;justify-content: space-between;padding: 20px 10px 60px 10px;}
|
.cart-content{display: flex;position: relative;justify-content: space-between;padding: 10px 10px 60px 10px;}
|
||||||
.cart-head{display: none;}
|
.cart-head{display: none;}
|
||||||
.cart-content > div:nth-child(1) input{}
|
|
||||||
.cart-content > div:nth-child(1), .cart-head div:first-child{width: 20%;display: flex;justify-content: space-between;align-items: center;}
|
.cart-content > div:nth-child(1), .cart-head div:first-child{width: 20%;display: flex;justify-content: space-between;align-items: center;}
|
||||||
.cart-content>div:nth-child(1),.cart-head div:first-child{width: 18%;padding-left: 0px;}
|
.cart-content>div:nth-child(1),.cart-head div:first-child{width: 100px;padding-left: 0px;}
|
||||||
.m-z37 {margin-left: 0px;}
|
.m-z37 {margin-left: 0px;}
|
||||||
.cart-content{margin-top: 10px;}
|
.cart-content{margin-top: 10px;}
|
||||||
.cart-content>div:nth-child(2){width: 62%;padding-top: 0px;}
|
.cart-content>div:nth-child(2){width: 100%;padding-top: 0px;}
|
||||||
.cart-content>div:nth-child(2) a{font-size: 14px;height: 50px;line-height: 24px;}
|
.cart-content>div:nth-child(2) a{font-size: 14px;height: 50px;line-height: 24px;}
|
||||||
.cart-content>div:nth-child(3){font-size: 14px;position: absolute;bottom: 30px;right: 10px;width: auto;}
|
.cart-content>div:nth-child(3){font-size: 14px;position: absolute;bottom: 70px;right: 10px;width: auto;}
|
||||||
|
.cart-content>div:nth-child(3)::before{content: '单价:';font-weight: 400;color: #525252;}
|
||||||
.cart-content>div:nth-child(5){font-size: 14px;position: absolute;bottom: 10px;right: 15%;width: auto;}
|
.cart-content>div:nth-child(5){font-size: 14px;position: absolute;bottom: 10px;right: 15%;width: auto;}
|
||||||
|
.cart-content>div:nth-child(5)::before{content: '总价:';}
|
||||||
.cart-content>div:nth-child(6){position: absolute;bottom: 10px;right: 10px;width: auto;}
|
.cart-content>div:nth-child(6){position: absolute;bottom: 10px;right: 10px;width: auto;}
|
||||||
.num-box{width: 12%;padding-top: 10px;position: absolute;bottom: 30px;left: 47%;width: auto;}
|
.num-box{padding-top: 10px;position: absolute;bottom: 36px;right: 10px;width: auto;}
|
||||||
|
.jies-box{margin-top: 10px;height: 40px;line-height: 40px;}
|
||||||
|
.jies-box .settlement {height: 40px;width: 80px;font-size: 16px;}
|
||||||
|
.jies-box > div:first-child span {margin-left: 10px;}
|
||||||
|
section .whoil .whoil-1 .swiper-container .swiper-text {padding: 20px 0px 10px 0;margin-bottom: 20px;font-size: 16px;}
|
||||||
|
section .whoil .whoil-1 .swiper-container img {height: 190px;object-fit: cover;}
|
||||||
|
section .whoil .whoil-1 .swiper-container { padding-bottom: 30px;}
|
||||||
}
|
}
|
||||||
@media (min-width:767px) and (max-width:991px){
|
@media (min-width:767px) and (max-width:991px){
|
||||||
#zx-list img {width: 250px;max-height: 155px;}
|
#zx-list img {width: 250px;max-height: 155px;}
|
||||||
|
|
|
@ -154,7 +154,7 @@
|
||||||
上海市樱花路869号喜玛拉雅中心A区3-4 层
|
上海市樱花路869号喜玛拉雅中心A区3-4 层
|
||||||
<div class="dac m-z20 cq-cp fs">
|
<div class="dac m-z20 cq-cp fs">
|
||||||
<img class="zhanldw" src="../../img/public/zldw.png" >
|
<img class="zhanldw" src="../../img/public/zldw.png" >
|
||||||
<a href="goMap.html?address='成都市成华区双店路地铁站-a口'"><span class="col007">去这里</span></a>
|
<a href="goMap.html?lng='104.136441'&lat='30.65675'"><span class="col007">去这里</span></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,70 +5,49 @@
|
||||||
<meta http-equiv="Cache-Control" content="no-store" />
|
<meta http-equiv="Cache-Control" content="no-store" />
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
||||||
<meta http-equiv="Expires" content="0" />
|
<meta http-equiv="Expires" content="0" />
|
||||||
<title></title>
|
<title>目的地</title>
|
||||||
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
|
<script src="https://webapi.amap.com/maps?v=1.4.14&key=4d81136d607c68fb6c906599c0bd1de1&plugin=AMap.Autocomplete,AMap.Geocoder"></script>
|
||||||
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
|
||||||
<script type="text/javascript">
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container" style="width: 600px;height: 600px;"></div>
|
||||||
|
<script>
|
||||||
function getUrlParamCN(name) {
|
function getUrlParamCN(name) {
|
||||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
||||||
var r = decodeURI(window.location.search).substr(1).match(reg); //匹配目标参数
|
var r = decodeURI(window.location.search).substr(1).match(reg); //匹配目标参数
|
||||||
if (r != null) return unescape(r[2]); return null; //返回参数值
|
if (r != null) return unescape(r[2]); return null; //返回参数值
|
||||||
}
|
}
|
||||||
var dangAddress = getUrlParamCN("address").split('\'')[1]
|
var lng = getUrlParamCN("lng").split('\'')[1]
|
||||||
function initMap(){
|
var lat = getUrlParamCN("lat").split('\'')[1]
|
||||||
createMap();//创建地图
|
//初始化地图
|
||||||
setMapEvent();//设置地图事件
|
var map = new AMap.Map('container', {
|
||||||
}
|
resizeEnable: true, //是否监控地图容器尺寸变化
|
||||||
//创建地图函数:
|
zoom: 18, //初始地图级别
|
||||||
function createMap(){
|
center: [lng,lat] //设置地图中心点坐标
|
||||||
var map = new BMap.Map("BaiduDitu");//在百度地图容器中创建一个地图
|
|
||||||
map.centerAndZoom(dangAddress,18);//设定地图的中心点和坐标并将地图显示在地图容器中
|
|
||||||
window.map = map;//将map变量存储在全局
|
|
||||||
var myGeo = new BMap.Geocoder();
|
|
||||||
// 创建小车图标
|
|
||||||
var myIcon = new BMap.Icon("../../img/public/dwionv.png", new BMap.Size(52, 52));
|
|
||||||
// 将地址解析结果显示在地图上,并调整地图视野
|
|
||||||
myGeo.getPoint(dangAddress, function(point){
|
|
||||||
if(point){
|
|
||||||
// 创建Marker标注,使用小车图标
|
|
||||||
// var pt = new BMap.Point(104.142588, 30.664403);
|
|
||||||
var pt = new BMap.Point(point.lng, point.lat);
|
|
||||||
var marker = new BMap.Marker(pt, {
|
|
||||||
icon: myIcon
|
|
||||||
});
|
});
|
||||||
marker.enableDragging(); //开启标注拖拽功能
|
var marker, lnglat;
|
||||||
marker.addEventListener("dragend", function(e){
|
lnglat = [lng,lat]
|
||||||
console.log("当前位置:" + e.point.lng + ", " + e.point.lat);
|
var img = '../../img/public/dwionv.png'
|
||||||
})
|
var marker = new AMap.Marker({
|
||||||
// 将标注添加到地图
|
position: new AMap.LngLat(lng,lat),
|
||||||
map.addOverlay(marker);
|
offset: new AMap.Pixel(-20, -40),
|
||||||
}
|
icon: img, // 添加 Icon 图标 URL
|
||||||
})
|
title: '',
|
||||||
// var pt = new BMap.Point(104.143154,30.664661);
|
draggable: true //点标记可拖拽
|
||||||
// myGeo.getLocation(pt,function(res){
|
|
||||||
// console.log(res.addressComponents);
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
//地图事件设置函数:
|
|
||||||
function setMapEvent(){
|
|
||||||
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
|
|
||||||
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
|
|
||||||
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
|
|
||||||
map.enableKeyboard();//启用键盘上下左右键移动地图
|
|
||||||
}
|
|
||||||
$(function(){
|
|
||||||
initMap();//创建和初始化地图
|
|
||||||
});
|
});
|
||||||
|
map.add(marker);
|
||||||
|
map.on('click', function(e) {
|
||||||
|
lnglat = e.lnglat;
|
||||||
|
marker.setPosition(lnglat);
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="Ditumap">
|
<div class="Ditumap">
|
||||||
<div style="border:none;" id="BaiduDitu"></div>
|
<div style="border:none;" id="BaiduDitu"></div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload = function(){
|
window.onload = function(){
|
||||||
var w_height = $(window).height()
|
var w_height = $(window).height()
|
||||||
var w_width = $(window).width()
|
var w_width = $(window).width()
|
||||||
var html = document.getElementById('BaiduDitu')
|
var html = document.getElementById('container')
|
||||||
html.style.height = w_height+'px'
|
html.style.height = w_height+'px'
|
||||||
html.style.width = w_width+'px'
|
html.style.width = w_width+'px'
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue