效果：
增加坐标，插入数据库
用的是tp框架
地图显示代码：html（这里用的tp后台，在下面你要弄一下）
<!--头部开始--><link rel="stylesheet" href="/static/index/css/nav.css"><script src="/jquery/1.9.0/jquery.js"></script><!--导航开始-->{include file="public/nav" /}<title>百度插架</title><script src="scripts/jquery-1.9.1.js" type="text/javascript"></script><script type="text/javascript" src="http://api./api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script><script type="text/javascript"src="http://api./library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script><link rel="stylesheet" href="http://api./library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /><style type="text/css">.image {width: 47px;height: 48px;position: absolute;border-radius: 30px;}.head {margin-left: 50px;}.map {width: 70%;height: 535px;margin-left: 20%;margin-top: 5%;}.map-a {position: absolute;margin-top: 360px;margin-left: 26px;}</style></head><body><a class="map-a" href="{:url('index/map/add')}">增加地址</a><!-- 内容开始 --><div class="map" id="map"></div><!-- 内容结束 --><script type="text/javascript">$.ajax({url: "{:url('index/Map/map')}",type: "post",dataType: "json",success: function (data) {console.log(data[0]);markerArr = data;if (data[0]) {centrenoe = markerArr[0].longitude;} else {centrenoe = 114.076751;}if (data[0]) {centretwo = markerArr[0].latitude;} else {centretwo = 35.387645;}},error: function (data) {alert('错误');}});function map_init() {var map = new BMap.Map("map"); // 创建Map实例var point = new BMap.Point(centrenoe, centretwo); //地图中心点map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。map.enableScrollWheelZoom(true); //启用滚轮放大缩小//地图、卫星、混合模式切换map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));//向地图中添加缩放控件var ctrlNav = new window.BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(ctrlNav);//向地图中添加缩略图控件var ctrlOve = new window.BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,isOpen: 1});map.addControl(ctrlOve);//向地图中添加比例尺控件var ctrlSca = new window.BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrlSca);var point = new Array(); //存放标注点经纬信息的数组var marker = new Array(); //存放标注点对象的数组var info = new Array(); //存放提示信息窗口对象的数组var searchInfoWindow = new Array(); //存放检索信息窗口对象的数组for (var i = 0; i < markerArr.length; i++) {var p0 = markerArr[i].point.split(",")[0]; //var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记map.addOverlay(marker[i]);marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//显示marker的title，marker多的话可以注释掉// var label = new window.BMap.Label(markerArr[i].title, {// offset: new window.BMap.Size(20, -10)// });// marker[i].setLabel(label);// 创建信息窗口对象info[i] = "<p style='font-size:12px;lineheight:1.8em;margin-top:-10px'>" +"</br>地址：" +markerArr[i].address + "<i class='head'></i>" + "头像" + "<img class='image' src=" + markerArr[i].img + " >" +"</br>电话：" + markerArr[i].tel + "</p>";//创建百度样式检索信息窗口对象 searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {title: markerArr[i].title, //标题width: 290, //宽度height: 55, //高度panel: "panel", //检索结果面板enableAutoPan: true, //自动平移searchTypes: [BMAPLIB_TAB_SEARCH, //周边检索BMAPLIB_TAB_TO_HERE, //到这里去BMAPLIB_TAB_FROM_HERE //从这里出发]});//添加点击事件marker[i].addEventListener("click",(function (k) {// js 闭包return function () {//将被点击marker置为中心//map.centerAndZoom(point[k], 18);//在marker上打开检索信息窗口searchInfoWindow[k].open(marker[k]);}})(i));}}//异步调用百度jsfunction map_load() {var load = document.createElement("script");load.src = "http://api./api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";document.body.appendChild(load);}window.onload = map_load;</script>{include file="public/tail" /}
地图显示对应的控制器：
<?phpnamespace app\index\controller;use think\Controller;use think\Session;use think\Db;use think\Request;header( 'Content-Type:text/html; charset=utf-8' );class Map extends Controller{//公共部分public function index(){if ( !Session::has( 'name' ) ) {$this->error( '你为进行登录', 'index/Login/index' );exit;}//给用户读取出来，然后加权限$user = Db::name( 'jurisdiction' )->alias( 'a' )->join( 'user w', 'a.userid = w.id', 'RIGHT' )->select();$this->assign( 'user', $user );$res = controller( 'nav' );$ress = $res->index();$this->assign( 'res', $ress );return $this->fetch( 'index' );}//增加地图坐标public function add(){if ( !Session::has( 'name' ) ) {$this->error( '你为进行登录', 'index/Login/index' );exit;}//给用户读取出来，然后加权限$user = Db::name( 'jurisdiction' )->alias( 'a' )->join( 'user w', 'a.userid = w.id', 'RIGHT' )->select();$this->assign( 'user', $user );$res = controller( 'nav' );$ress = $res->index();$this->assign( 'res', $ress );//坐标读取开始return $this->fetch( 'add' );}//增加数据开始public function increase(){//图片上传开始 // img$picture = '';if ( $_FILES['img']['name'] == '' ) {//未上传图片默认图片$picture = '/static/index/img/morentouxiang.jpg';} else {$file = request()->file( 'img' );//tp5写法获取图片信息$info = $file->move( ROOT_PATH . '/public/static/upimg/' );if ( $info ) {$Nmae = $info->getSaveName();//获取临时名字$site = str_replace( '\\', '/', $Nmae );$newaddress = '/static/upimg/' . $site;$picture = $newaddress;} else {// 上传失败获取错误信息echo $file->getError();}}$data = array('longitude' => input( 'longitude' ),'latitude' => input( 'latitude' ),'point' => input( 'point' ),'name' => input( 'name' ),'title' => input( 'title' ),'tel' => input( 'tel' ),'address' => input( 'address' ),'userid' => input( 'userid' ),'img' => $picture,);$insert = Db::name( 'map' )->insert( $data );if ( $insert ) {$this->success( '坐标插入成功', 'index/map/index' );} else {$this->errorr( '网络错误' );}}//读取经纬度public function map(){$userid = session( 'userid' );$map = Db::name( 'map' )->where( 'userid', $userid )->select();return json( $map );}//测试使用public function maps() {if ( !Session::has( 'name' ) ) {$this->error( '你为进行登录', 'index/Login/index' );exit;}//给用户读取出来，然后加权限$user = Db::name( 'jurisdiction' )->alias( 'a' )->join( 'user w', 'a.userid = w.id', 'RIGHT' )->select();$this->assign( 'user', $user );$res = controller( 'nav' );$ress = $res->index();$this->assign( 'res', $ress );//坐标读取开始return $this->fetch( 'maps' );}}
这个控制包括了增加和读取。
地图插入坐标html：
<!--头部开始-->{include file="public/head" /}<!-- css样式文件 --><style type="text/css">body,html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";overflow: hidden;}#map {height: 80%;width: 80%;overflow: hidden; margin-left: 200px;margin-top: 100px;}#r-result {width: 100%;font-size: 14px;position: absolute;top: 10px;left: 400px}#address {width: 250px;}</style>{include file="public/nav" /}<!-- 搜索显示框 --><div id="r-result"><form action="{:url('index/map/increase')}" method="post" enctype="multipart/form-data">标题：<input type="text" name="title" required="required" id="">备注人名：<input type="text" name="name" required="required" id="">电话：<input type="text" name="tel" required="required" id="">选择的详细地址：<input type="text" placeholder="会自动选择" required="required" readonly name="address" id="address"><br><br>图片：<input type="file" name="img" id="">地址: <input id="cityName" type="text" /><input type="button" value="搜索" onclick="theLocation()" />经度:<input type="text" readonly placeholder="会自动选择" required="required" name="longitude" id="lng" />纬度：<input type="text" readonly placeholder="会自动选择" required="required" name="latitude" id="lat" /><input type="hidden" name="point" id="point"><button onclick="submits()" type="submit">提交</button></form></div><script type="text/javascript" src="http://api./api?v=2.0&ak=33Q6v8ztfiZudBD2FxplnPZkKHjk4d0B"></script><div id='map'></div><!-- js开始 --><script type="text/javascript">var map = new BMap.Map("map");var geoc = new BMap.Geocoder(); //地址解析对象 var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point();//默认什么都没有map.centerAndZoom(point, 12); // 中心点 geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);} else {alert('failed' + this.getStatus());}}, {enableHighAccuracy: true})map.addEventListener("click", showInfo);//清除标识 function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注 function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图时间处理 function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = e.point.lat;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;document.getElementById('address').value = address;});addMarker(e.point);}// 创建位置检索、周边检索和范围检索var local = new BMap.LocalSearch(map, {renderOptions: {map: map}});// 发起检索function theLocation() {var city = document.getElementById("cityName").value;if (city != "") {local.search(city);}};//提交function submits() {var longitude = $("#lng").val();var latitude = $("#lat").val();console.log(latitude);$("#point").val(longitude + "," + latitude);}</script><!-- js结束 -->{include file="public/tail" /}
控制器在上方；
源码下载：（账户admin密码1234556）
链接：/share/init?surl=GH1s51flkWTboZerVRrDcw
提取码：4cms
记得更改数据库名字！！
