vue+go实现地理位置实现（经度，纬度入库）

冷不防 2022-02-12 11:53 182阅读 0赞

**首先具备好的vue、go已安装好**

## 一、vue ##

1、进入vue根目录，cmd命令窗口启动服务：npm run dev  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70]  
2）这是获取百度的地理位置(我命名是Map.vue页面)

<template>
    
    	<div id="div">
    		<form action="http://www.beego.hk/mapadd" method="post">//这是一个添加地址，跳转到go的一个添加模块中
    			店名：<input type="text" name="seller"><br />
    			号码：<input type="text" name="tel"><br />
    			
    			         
    			         
    			要查询的地址：<input id="text_" type="text" placeholder="请输入位置" />
    			
    			<input type="button" value="查询" v-on:click="searchByStationName();" /><br />
    			经   ：<input type="text" name="longitude" id="lngs" :value="lng"><br />
    			纬   ：<input type="text" name="latitude" id="lats" :value="lat"><br />
    			<input type="submit" value="添加">
    			<div id="container"></div>
    		</form>
    	</div>
    </template>
    
    <script>
    	export default { 
    		name: 'index',
    		data() { 
    			return { 
    				location: [
    					lng => '',
    					lat => ''
    				],
    				val: ''
    			}
    		},
    		mounted() { 
    			this.setmap();
    			this.index();
    		},
    		methods: { 
    			setmap: function() { 
    				var map = new BMap.Map('container', { 
    					enableMapClick: true
    				}); // 创建Map实例
    				map.centerAndZoom(new BMap.Point(116.413387, 39.910924), 11); // 初始化地图,设置中心点坐标和地图级别
    				//添加地图类型控件
    				map.addControl(new BMap.MapTypeControl({ 
    					mapTypes: [
    						BMAP_NORMAL_MAP,
    						BMAP_HYBRID_MAP
    					]
    				}));
    				map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
    				map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    				const _this = this
    				map.addEventListener('click', function(e) { 
    					_this.location.lng = parseFloat(e.point.lng).toFixed(3)
    					_this.location.lat = parseFloat(e.point.lat).toFixed(3)
    					alert(_this.location.lng + "," + _this.location.lat);
    				})
    			},
    			searchByStationName: function() { 
    				var map = new BMap.Map('container', { 
    					enableMapClick: true
    				}); // 创建Map实例
    				map.clearOverlays(); //清空原来的标注
    				var localSearch = new BMap.LocalSearch(map);
    				localSearch.enableAutoViewport(); //允许自动调节窗体大小
    				var keyword = document.getElementById("text_").value;
    				localSearch.setSearchCompleteCallback(function(searchResult) { 
    					var poi = searchResult.getPoi(0);
    					// alert(poi.address); document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
    					map.centerAndZoom(poi.point, 13);
    					var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
    					map.addOverlay(marker);
    					document.getElementById("lngs").value = poi.point.lng;
    					document.getElementById("lats").value = poi.point.lat;
    					marker.addEventListener("click", function() { 
    						this.openInfoWindow(infoWindow);
    					});
    					marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    				});
    				localSearch.search(keyword);
    			},
    			index: function() { 
    				$.ajax({ 
    					url: "",
    					dataType: "json",
    					type: "get",
    					success: function(date) { 
    						date.forEach(function(v) { 
    							$('#sheng').append("<option value='" + v.Id + "'>" + v.Name + "</option>");
    						});
    					}
    				})
    			}
    		},
    		shi: function() { 
    			alert(1);
    		}
    	}
    	
    </script>
    
    <style>
    	#container { 
    		position: absolute;
    		margin-top: 30px;
    		width: 730px;
    		height: 590px;
    		top: 50;
    		border: 1px solid gray;
    		overflow: hidden;
    	}
    
    	#text_ { 
    		margin-right: 100px;
    	}
    
    	#div { 
    		width: 730px;
    		margin: auto;
    	}
    </style>
    
    **可以直接拿来用**

3）项目build/webpack.base.conf.js里面加入：

externals: {
    "BMap": "BMap"
    },

4）访问你的vue页面  
这是你在输入位置，点击查询就可以获取的地理位置以及经度、纬度。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 1]

## 二、go ##

这样就完成了一个vue前台的地理位置，后期我们可以利用go语音对form数据进行入库。  
1）同样进入src/你的框架名，cmd命令窗口启动服务：bee run  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 2]  
2）修改配置文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 3]  
3）创建一个go文件（我创建的是以MapController.go命名的文件）

package controllers
    import (
    	"fmt"
    	"github.com/astaxie/beego/orm"
    	"github.com/astaxie/beego"
    )
    type MapController struct { 
    	beego.Controller
    }
    type Info struct { 
    	Id        int
    	Seller    string
    	Tel       string
    	Longitude string
    	Latitude  string
    }
    func (c *MapController) MapList() { //展示
    	o := orm.NewOrm()
    	var indexs []Info
    	num, err := o.Raw("select id,seller,tel,longitude,latitude from map").QueryRows(&indexs)
    	if err == nil { 
    		fmt.Println(num)
    		fmt.Println(indexs)
    		c.Data["json"] = indexs//转为json格式
    		c.ServeJSON()//返回一个json数据成功/失败
    	} else { 
    		fmt.Println("查询报错")
    	}
    }
    func (c *MapController) MapAdd() { //添加（注意：这是vue表单提交的添加地址）
    	type JSONStruct struct { 
    		Code int
    		Msg  string
    	}
    	seller := c.GetString("seller")//字段
    	tel := c.GetString("tel")
    	longitude := c.GetString("longitude")
    	latitude := c.GetString("latitude")
    	o := orm.NewOrm()
    	result, _ := o.Raw("insert into map (`id`,`seller`,`tel`,`longitude`,`latitude`) values (null,?,?,?,?)", seller, tel, longitude, latitude).Exec()//你要的字段
    	if result == nil { 
    		mystruct := &JSONStruct{ 201, "失败"}
    		c.Data["json"] = mystruct
    		c.ServeJSON()
    	} else { 
    		mystruct := &JSONStruct{ 200, "ok"}
    		c.Data["json"] = mystruct
    		c.ServeJSON()
    		num, _ := result.LastInsertId()
    		fmt.Println(num)
    	}
    }

4）访问的路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 4]  
直接访问即可  
完事！！！！！！！  
有问题 @我

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70]: /images/20220212/4625739c59d24246b0daf19ba26a465d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 1]: /images/20220212/0831c2a6e0c644edbb5865bff8c27279.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 2]: /images/20220212/151f74a89bdc49d088fe680c812feb3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 3]: /images/20220212/74445df188504f98837b7d864537c1a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI0MzA3MA_size_16_color_FFFFFF_t_70 4]: /images/20220212/57adddcc62ad4a349420d60d6f66f3a9.png