创建应用
1、在浏览器中搜索‘百度地图开放平台’，选择web开发
2、进入百度地图开放平台官网控制台，点击【应用管理】-【我的应用】
3、创建应用
4、在【我的应用】中找到自己创建的应用并复制【AK】
打代码喽
准备部分
先创建一个包，分别创建一个js和css文件
js文件内容：
export default function MapLoader() {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
window._AMapSecurityConfig = {
securityJsCode: '9637e51b32521c4124c3683b738fa117',
}
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src =
"https://api.map.baidu.com/api?type=webgl&v=1.0&ak=";
//这里ak填入创建应用的ak
script.onerror = reject;
document.head.appendChild(script);
}
window.initAMap = () => {
resolve(window.AMap);
};
});
}
export function mymap(ak) {
return new Promise(function(resolve, reject) {
window.init = function() {
resolve(mymap)
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src =
`http://api.map.baidu.com/api?v=1.0&type=webgl&ak=&mcode=35:81:1C:D3:2A:63:FB:6B:6E:1C:D4:F7:81:DF:A5:1B:89:57:83:91;uni.UNI342DC80&callback=init`
//这里也一样
script.onerror = reject
document.head.appendChild(script)
})
}
css文件内容：
html {
font-size: 12px;
}
.amap-copyright{
box-sizing: content-box
}
* {
box-sizing: border-box
}
.input-textarea{
color:grey;
height:8em;
overflow:auto;
border-radius:0.4rem;
border:1px solid #ced4da;
margin-bottom:1rem;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
font-weight: 300;
color: #111213;
}
hr {
margin: 0.5rem 0;
box-sizing: content-box;
height: 0;
overflow: visible;
border: 0;
border-top: 1px solid rgba(0, 0, 0, .1)
}
p {
margin-top: 0;
margin-bottom: 0;
}
label {
display: inline-block;
margin-bottom: 0.4rem;
}
label, .btn {
margin-left: 0;
font-size: 1rem;
}
button, input, select {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
overflow: visible;
text-transform: none
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0 0.5rem 0 0;
}
h4 {
font-family: inherit;
line-height: 1.8;
font-weight: 300;
color: inherit;
font-size: 1.1rem;
margin-top: 0;
margin-bottom: .5rem
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25A5F7;
border-color: #25A5F7;
padding: .25rem .5rem;
line-height: 1.5;
border-radius: 1rem;
-webkit-appearance: button;
cursor:pointer;
}
.btn:hover {
color: #fff;
background-color: #25A5F7;
border-color: #25A5F7
}
.btn:hover {
text-decoration: none
}
.input-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 3rem;
}
.input-item:last-child {
margin-bottom: 0;
}
.input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}
.input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-item-prepend {
margin-right: -1px;
}
.input-item-text, input[type=text],input[type=date], select {
height: calc(2.2rem + 2px);
}
.input-item-text {
width: 6rem;
text-align: justify;
padding: 0.4rem 0.7rem;
display: inline-block;
text-justify: distribute-all-lines;
/*ie6-8*/
text-align-last: justify;
/* ie9*/
-moz-text-align-last: justify;
/*ff*/
-webkit-text-align-last: justify;
/*chrome 20+*/
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: .25rem;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-item-text input[type=checkbox], .input-item-text input[type=radio] {
margin-top: 0
}
.input-card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: .25rem;
width: 22rem;
border-width: 0;
border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
position: fixed;
bottom: 1rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
}
.input-text {
line-height: 2rem;
margin-right: 2rem;
}
.info hr {
margin-right: 0;
margin-left: 0;
border-top-color: grey;
}
.info {
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border-radius: .25rem;
position: fixed;
top: 1rem;
background-color: white;
width: auto;
min-width: 22rem;
border-width: 0;
right: 1rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
}
.code {
left: 1.5rem;
right: 1.5rem;
top: 1.5rem;
bottom: 1.5rem;
overflow: auto;
margin-bottom: 0rem;
}
.code .btn {
top: 1rem;
position: absolute;
right: 1rem;
}
.code .result {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.5rem;
padding: 1rem;
bottom: 1rem;
position: absolute;
top: 5.5rem;
right: 1rem;
left: 1rem;
overflow: auto;
}
.code .status {
color: #80adff;
display: inline-block;
font-size: 14px;
}
.code h4 {
display: inline-block;
max-width: 20rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
select, input[type=text], input[type=date] {
display: inline-block;
width: 100%;
padding: .375rem 1.75rem .375rem .75rem;
line-height: 1.5;
color: #495057;
vertical-align: middle;
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
background-size: 8px 10px;
border: 1px solid #ced4da;
border-radius: .25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
input[type=text],input[type=date] {
background: #fff;
padding: .375rem .75rem;
}
select:focus, input[type=text]:focus, input[type=date]:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
}
.btn:focus {
outline: 0;
box-shadow: none;
}
select:focus::-ms-value, input[type=text]:focus::-ms-value,input[type=date]:focus::-ms-value {
color: #495057;
background-color: #fff
}
/* native toastr */
.native-toast {
position: fixed;
background-color: rgba(50, 50, 50, .8);
border-radius: 33px;
color: white;
left: 50%;
text-align: center;
padding: 6px 12px;
opacity: 0;
z-index: 99999;
transition: transform .25s, opacity .25s, top .25s;
box-sizing: border-box;
}
.native-toast-bottom {
bottom: 50px;
-ms-transform: translateX(-50%) translateY(50px);
transform: translateX(-50%) translateY(50px)
}
.native-toast-bottom.native-toast-shown {
opacity: 1;
-ms-transform: translateX(-50%) translateY(0);
transform: translateX(-50%) translateY(0);
}
.native-toast-bottom.native-toast-edge {
bottom: 0;
}
.native-toast-top {
top: 50px;
-ms-transform: translateX(-50%) translateY(-50px);
transform: translateX(-50%) translateY(-50px)
}
.native-toast-top.native-toast-shown {
opacity: 1;
-ms-transform: translateX(-50%) translateY(0);
transform: translateX(-50%) translateY(0);
}
.native-toast-top.native-toast-edge {
top: 0;
}
.native-toast-center {
top: 0;
-ms-transform: translateX(-50%) translateY(-50px);
transform: translateX(-50%) translateY(-50px)
}
.native-toast-center.native-toast-shown {
opacity: 1;
top: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.native-toast-edge {
border-radius: 0;
width: 100%;
text-align: left;
}
@media screen and (min-width: 40rem) {
.native-toast:not(.native-toast-edge) {
max-width: 18rem;
}
}
/*
max-width does not seem to work in small screen?
*/
/*@media screen and (max-width: 768px) {
.native-toast:not(.native-toast-edge) {
max-width: 400px;
}
}
@media screen and (max-width: 468px) {
.native-toast:not(.native-toast-edge) {
max-width: 300px;
}
}*/
/* types */
.native-toast-error {
background-color: #d92727;
color: white;
}
.native-toast-success {
background-color: #62a465;
color: white;
}
.native-toast-warning {
background-color: #fdaf17;
color: white;
}
.native-toast-info {
background-color: #5060ba;
color: white;
}
[class^="native-toast-icon-"] {
vertical-align: middle;
margin-right: 8px
}
[class^="native-toast-icon-"] svg {
width: 16px;
height: 16px;
}
开发百度地图
1、创建一个vue文件，把创建的js导入到项目中：
import {mymap} from '@/api/map/map.js'
2、让百度地图显示
template代码：
<view class="global">
<view id="allmap" class="map"></view>
</view>
<!--添加定位按钮-->
<view>
<button style="width: 40px;height: 40px;line-height: 40px;margin-top: -38%;float: right;margin-right: 10px;z-index: 10" @click="getLatLen">
<uni-icons style="margin: 0 auto;margin-left: -80%;" type="location" size="30"></uni-icons>
</button>
</view>
script代码：
需要的参数，按自己需求添加
onLoad() {
this.map(this.latitude,this.longitude)
this.nowLat = uni.getStorageSync('nowLat')
this.nowLng = uni.getStorageSync('nowLng')
},
map(latitude,longitude){
// ================百度地图==================
mymap(this.ak).then((mymap) => {
// 创建百度地图实例
var map = new BMapGL.Map("allmap");
map.centerAndZoom(new BMapGL.Point(116.331398,39.897445),16);
map.enableScrollWheelZoom(true);
// var geoc = new BMapGL.Geocoder();
console.log(latitude,longitude)
if(latitude != "" && longitude != ""){
map.clearOverlays();
var new_point = new BMapGL.Point(longitude,latitude);
var mk = new BMapGL.Marker(new_point); // 创建标注
map.addOverlay(mk); // 将标注添加到地图中
map.panTo(new_point);
console.log(new_point)
//点击查看标点信息
var opts =
"<div>"
+"<h4 style='margin:-5px 0 5px 0;'>"+this.name+"</h4>"
+"<p style='font-size:13px'>"
+this.address
+"</p>"
+"</div>";
var infoWindow = new BMapGL.InfoWindow(opts); // 创建信息窗口对象
mk.addEventListener("click", function(e){
map.openInfoWindow(infoWindow, new_point); //开启信息窗口
});
}
});
},
getLatLen(){
var map = new BMapGL.Map("allmap");
map.centerAndZoom(new BMapGL.Point(116.331398,39.897445),16);
map.enableScrollWheelZoom(true);
var geolocation = new BMapGL.Geolocation();
var geoc = new BMapGL.Geocoder();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMapGL.Marker(r.point);//创建标注
map.addOverlay(mk);
map.panTo(r.point);
//点击标注获取位置信息
this.nowLat = r.point.lat
this.nowLng = r.point.lng
uni.setStorageSync("nowLat",this.nowLat)
uni.setStorageSync("nowLng",this.nowLng)
var opts = {
width : 200, // 信息窗口宽度
height: 50, // 信息窗口高度
title : '我的位置' , // 信息窗口标题
}
var infoWindow = {}
geoc.getLocation(r.point, function(rs){
var addComp = rs.address;
uni.setStorageSync("nowAddress",addComp)
infoWindow = new BMapGL.InfoWindow(addComp, opts); // 创建信息窗口对象
})
mk.addEventListener("click", function(e){
var pt = e.srcElement.latLng;
map.openInfoWindow(infoWindow, r.point); //开启信息窗口
this.nowAddress = infoWindow.content
});
} else {
console.log('failed' + this.getStatus());
}
});
},
百度地图就可以显示在项目中:
到达某个地方的路线,如果有需要的话会在下一篇文章中发出:
4428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
