//js
var latitude
var longitude
$(function() {
$(".pick-message").hide()
$("#container1").height($(window).height() - 45 - 80)
if(document.getElementById("latitude") == null) {
latitude = 113.683072
} else {
latitude = document.getElementById("latitude").value
}
if(document.getElementById("longitude") == null) {
longitude = 34.69353
} else {
longitude = document.getElementById("longitude").value
}
//基本地图加载
var map = new AMap.Map("container1", {
resizeEnable: true,
center: [latitude, longitude], //地图中心点
zoom: 15 //地图显示的缩放级别
});
var marker = new AMap.Marker({
position: new AMap.LngLat(latitude, longitude), // 经纬度对象，也可以是经纬度构成的一维数组[114.38, 38.9]
title: ''
});
map.add(marker);
})
function show_message() {
$(" .pick-message ").show()
}
function hide_message() {
$(" .pick-message ").hide()
}
function go_gaode(res) {
//高德地图
// window.location.href = 'https://uri.amap.com/navigation?from=' + res.longitudeInfo + ',' + res.latitudeInfo + '&name=' + res.name
// window.location.href = 'https://uri.amap.com/navigation?from=114.02597366,22.54605355&to=114.029243,22.609562'
window.location.href = 'https://uri.amap.com/marker?position=' + latitude + "," + longitude
}
function go_baidu(res) {
//百度地图
// window.location.href = 'http://api.map.baidu.com/marker?location=' + res.latitudeInfo + ',' + res.longitudeInfo + '&title=' + res.name + '&output=html'
window.location.href = 'http://api.map.baidu.com/marker?location=' + longitude + ',' + latitude + "&output=html"
}
function go_tengxun() {
//腾讯地图
window.location.href = 'https://apis.map.qq.com/uri/v1/geocoder?coord=' + longitude + ',' + latitude
}
function cancel() {
window.location.href = 'index.html'
}
//html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>########</title>
<link rel="stylesheet" type="text/css" href="css/zhuanxian.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="js/zhuanxian.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--<script type="text/javascript" src='js/maps.js'></script>
<script type="text/javascript" src="js/addToolbar.js"></script>-->
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.6&key=b465f7d67ff64f57a46cb96f8cdb504f
&plugin=AMap.TruckDriving'></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="js/the_map.js"></script>
</head>
<body>
<div class="pick-message">
<div class="the_href_div">
<button class="go_map_button" onclick="go_gaode()">高德地图</button>
<button class="go_map_button" onclick="go_tengxun()">腾讯地图</button>
<button class="go_map_button" onclick="go_baidu()">百度地图</button>
<button class="go_map_button" style="margin-top: 5px;" onclick="hide_message()">取消</button>
</div>
</div>
<div class="the-cancel">
<img style="height: 20px; 20px;" src="img/箭头 左 细.svg" onclick="cancel()"/>
<a class="title">到这里去</a>
</div>
<div class="mapBox">
<!-- 地图 -->
<div id="container1"></div>
</div>
<div class="map-foot">
<div style="margin-left: 5%; 60%;">
<span class="title">#############</span>
<span class="address">###########</span>
</div>
<button class="show-button" onclick="show_message()">
<img style="height: 40px; 40px;" src="img/golf course.svg" />
</button>
</div>
</body>
</html>