今天老板给任务，根据给出的demo，写一个响应式的百度地图，并接入后台数据，在地图上显示几个商家的点。点击点出现商家信息。因为逻辑不用自己写，还是比较简单的，但也花了不少时间。
一，引入百度地图API文件，密钥（没有就先注册一个），要注意的是，文件不能本地打开，要线上打开，否则是不会显示地图的；
二，给地图写一个容器
<div id="allmap" class="allmap"></div>
三，获取后台数据，创建地图，添加控件
$.ajax({
url: '/home/index/getxy',
type: 'post',
dataType: 'json',
success: function (res) {
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 20);
if(!flag){
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
map.addControl(top_left_navigation)
var top_right_navigation = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
type: BMAP_NAVIGATION_CONTROL_SMALL
}); //右上角
map.addControl(top_right_navigation);
map.enableScrollWheelZoom(true);
}
四，使用后台数据将每一个商家点都打印出来
var markers = [];
var point = [];
for (var i = 0; i < scope.length; i++) {
var p0 = scope[i]['longitude']; //经度
var p1 = scope[i]['latitude']; // 纬度
point[i] = new BMap.Point(p0, p1);
map.panTo(point[1]);
markers[i] = new BMap.Marker(point[i]);
map.addOverlay(markers[i]); // 将标注添加到地图中
// map.panTo(point[i]);
}
五，点击每个地图上商家的点，显示商家信息
var opts = {
width: 250, // 信息窗口宽度
height: 30, // 信息窗口高度
title: "", // 信息窗口标题
enableMessage: true//设置允许信息窗发送短息
};
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
function openLink(content, point) {
var url = "www.baidu.com";
point.addEventListener("click", function (url) {
window.open(url);
}
);
}
//自动打开信息窗口
function autoOpenInfo(content, e) {
var point= new BMap.Point(p0, p1);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
map.panTo(point);
}
function openInfo(content, e) {
var p = e.target;
console.log(p)
console.log(p.getPosition());
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
map.panTo(point);
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>地图</title>
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="{$Think.AMUI}js/jquery.min.js"></script>
<style>
@media only screen and (min-width: 960px) {
.allmap{
width: 70%;
height: 800px;
margin: 0 auto;
font-family: '微软雅黑';
border: solid 1px;
}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
.allmap{
width: 90%;
height: 400px;
margin: 0 auto;
font-family: '微软雅黑';
border: solid 1px;
}
}
</style>
</head>
<body>
<div id="allmap" class="allmap"></div>
<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
var flag = agent.match(/(iphone|ipad|android|Touch)/i);
// 用经纬度设置地图中心点
function setCoordinate() {
$.ajax({
url: '/home/index/getxy',
type: 'post',
dataType: 'json',
success: function (res) {
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 20);
if(!flag){
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
map.addControl(top_left_navigation)
var top_right_navigation = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
type: BMAP_NAVIGATION_CONTROL_SMALL
}); //右上角
map.addControl(top_right_navigation);
map.enableScrollWheelZoom(true);
}
var scope = res.data.scope;
// //本地坐标
// map.clearOverlays();
// var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
// var marker = new BMap.Marker(new_point, {
// // 指定Marker的icon属性为Symbol
// icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
// scale: 2,//图标缩放大小
// fillColor: "orange",//填充颜色
// fillOpacity: 0.8//填充透明度
// })
// }); // 创建标注
var markers = [];
var point = [];
for (var i = 0; i < scope.length; i++) {
var p0 = scope[i]['longitude']; //经度
var p1 = scope[i]['latitude']; // 纬度
point[i] = new BMap.Point(p0, p1);
map.panTo(point[1]);
markers[i] = new BMap.Marker(point[i]);
map.addOverlay(markers[i]); // 将标注添加到地图中
// map.panTo(point[i]);
addClickHandler('商家名称：' + scope[i]['name'], markers[i]); //设置点击响应事件
autoOpenInfo('商家名称：' + scope[i]['name'], markers[i])
}
var opts = {
width: 250, // 信息窗口宽度
height: 30, // 信息窗口高度
title: "", // 信息窗口标题
enableMessage: true//设置允许信息窗发送短息
};
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
function openLink(content, point) {
var url = "www.baidu.com";
point.addEventListener("click", function (url) {
window.open(url);
}
);
}
//自动打开信息窗口
function autoOpenInfo(content, e) {
// var p = e.target;
// console.log(p)
// console.log(p.getPosition());
// var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var point= new BMap.Point(p0, p1);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
map.panTo(point);
}
function openInfo(content, e) {
var p = e.target;
console.log(p)
console.log(p.getPosition());
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
map.panTo(point);
}
}
})
}
setCoordinate();
</script>
</body>
</html>
写得不咋滴，等明天老板回来看下怎么改
还有Ajax好像在静态html里是没用的还是怎么样，说要在vue和node的脚手架的项目环境才有用？
网友评论