申请腾讯key 然后给yourkey
在这里插入代码片<template><el-form:model="editForm":rules="rules"label-position="left"label-width="160px"ref="editForm"><el-form-item label="商户名称" prop="name"><el-input type="text" class="site" v-model="editForm.name"></el-input></el-form-item><el-form-item label="商户电话号" prop="telephone"><el-input type="text" class="site" v-model="editForm.telephone"></el-input></el-form-item><el-form-item label="商户电话号" prop="cellphone"><el-input type="text" class="site" v-model="editForm.cellphone"></el-input></el-form-item><el-form-item label="商户描述" prop="description"><el-input type="text" class="site" v-model="editForm.description"></el-input></el-form-item><el-form-item label="商户位置" prop="location"><el-input type="text" class="site" v-model="editForm.location"></el-input></el-form-item><el-form-item label="纬度" prop="latitude"><el-input type="text" class="site" v-model="editForm.latitude"></el-input></el-form-item><el-form-item label="经度" prop="longitude"><el-input type="text" class="site" v-model="editForm.longitude"></el-input></el-form-item><el-form-item label="选择经纬度" ><div id="continue" style="width:1000px;height:661px;position:relative;margin:0px auto;"><div style="height:53px;"><div class="search"><div class="search_c"><input type="text" class="search_t" /></div><div id="btn_search" class="btn">搜索</div></div><div class="poi"><div class="poi_note">当前坐标：</div><input type="text" id="poi_cur" /><div class="poi_note">当前地址：</div><input type="text" id="addr_cur" /></div></div><div id="main"><div id="tooles"><div id="cur_city" @click="curCity"><strong>北京市</strong><span class="change_city">[<span style="text-decoration:underline;">更换城市</span>]<span id="level">当前缩放等级：10</span></span><div id="city" class="hide"><h3 class="city_class">热门城市<span class="close">X</span></h3><div class="city_container"><span class="city_name">北京</span><span class="city_name">深圳</span><span class="city_name">上海</span><span class="city_name">香港</span><span class="city_name">澳门</span><span class="city_name">广州</span><span class="city_name">天津</span><span class="city_name">重庆</span><span class="city_name">杭州</span><span class="city_name">成都</span><span class="city_name">武汉</span><span class="city_name">青岛</span></div><h3 class="city_class">全国城市</h3><div class="city_container"><div class="city_container_left">直辖市</div><div class="city_container_right"><span class="city_name">北京</span><span class="city_name">上海</span><span class="city_name">天津</span><span class="city_name">重庆</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">内蒙古</span></div><div class="city_container_right"><span class="city_name">呼和浩特</span><span class="city_name">包头</span><span class="city_name">乌海</span><span class="city_name">赤峰</span><span class="city_name">通辽</span><span class="city_name">鄂尔多斯</span><span class="city_name">呼伦贝尔</span><span class="city_name">巴彦淖尔</span><span class="city_name">乌兰察布</span><span class="city_name">兴安盟</span><span class="city_name">锡林郭勒盟</span><span class="city_name">阿拉善盟</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">山西</span></div><div class="city_container_right"><span class="city_name">太原</span><span class="city_name">大同</span><span class="city_name">阳泉</span><span class="city_name">长治</span><span class="city_name">晋城</span><span class="city_name">朔州</span><span class="city_name">晋中</span><span class="city_name">运城</span><span class="city_name">忻州</span><span class="city_name">临汾</span><span class="city_name">吕梁</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">陕西</span></div><div class="city_container_right"><span class="city_name">西安</span><span class="city_name">铜川</span><span class="city_name">宝鸡</span><span class="city_name">咸阳</span><span class="city_name">渭南</span><span class="city_name">延安</span><span class="city_name">汉中</span><span class="city_name">榆林</span><span class="city_name">安康</span><span class="city_name">商洛</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">河北</span></div><div class="city_container_right"><span class="city_name">石家庄</span><span class="city_name">唐山</span><span class="city_name">秦皇岛</span><span class="city_name">邯郸</span><span class="city_name">邢台</span><span class="city_name">保定</span><span class="city_name">张家口</span><span class="city_name">承德</span><span class="city_name">沧州</span><span class="city_name">廊坊</span><span class="city_name">衡水</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">辽宁</span></div><div class="city_container_right"><span class="city_name">沈阳</span><span class="city_name">大连</span><span class="city_name">鞍山</span><span class="city_name">抚顺</span><span class="city_name">本溪</span><span class="city_name">丹东</span><span class="city_name">锦州</span><span class="city_name">营口</span><span class="city_name">阜新</span><span class="city_name">辽阳</span><span class="city_name">盘锦</span><span class="city_name">铁岭</span><span class="city_name">朝阳</span><span class="city_name">葫芦岛</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">吉林</span></div><div class="city_container_right"><span class="city_name">长春</span><span class="city_name">吉林</span><span class="city_name">四平</span><span class="city_name">辽源</span><span class="city_name">通化</span><span class="city_name">白山</span><span class="city_name">松原</span><span class="city_name">白城</span><span class="city_name">延边</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">黑龙江</span></div><div class="city_container_right"><span class="city_name">哈尔滨</span><span class="city_name">齐齐哈尔</span><span class="city_name">鸡西</span><span class="city_name">鹤岗</span><span class="city_name">双鸭山</span><span class="city_name">大庆</span><span class="city_name">伊春</span><span class="city_name">牡丹江</span><span class="city_name">佳木斯</span><span class="city_name">七台河</span><span class="city_name">黑河</span><span class="city_name">绥化</span><span class="city_name">大兴安岭</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">江苏</span></div><div class="city_container_right"><span class="city_name">南京</span><span class="city_name">无锡</span><span class="city_name">徐州</span><span class="city_name">常州</span><span class="city_name">苏州</span><span class="city_name">南通</span><span class="city_name">连云港</span><span class="city_name">淮安</span><span class="city_name">盐城</span><span class="city_name">扬州</span><span class="city_name">镇江</span><span class="city_name">泰州</span><span class="city_name">宿迁</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">安徽</span></div><div class="city_container_right"><span class="city_name">合肥</span><span class="city_name">蚌埠</span><span class="city_name">芜湖</span><span class="city_name">淮南</span><span class="city_name">马鞍山</span><span class="city_name">淮北</span><span class="city_name">铜陵</span><span class="city_name">安庆</span><span class="city_name">黄山</span><span class="city_name">阜阳</span><span class="city_name">宿州</span><span class="city_name">滁州</span><span class="city_name">六安</span><span class="city_name">宣城</span><span class="city_name">池州</span><span class="city_name">亳州</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">山东</span></div><div class="city_container_right"><span class="city_name">济南</span><span class="city_name">青岛</span><span class="city_name">淄博</span><span class="city_name">枣庄</span><span class="city_name">东营</span><span class="city_name">潍坊</span><span class="city_name">烟台</span><span class="city_name">威海</span><span class="city_name">济宁</span><span class="city_name">泰安</span><span class="city_name">日照</span><span class="city_name">莱芜</span><span class="city_name">临沂</span><span class="city_name">德州</span><span class="city_name">聊城</span><span class="city_name">滨州</span><span class="city_name">菏泽</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">浙江</span></div><div class="city_container_right"><span class="city_name">杭州</span><span class="city_name">宁波</span><span class="city_name">温州</span><span class="city_name">嘉兴</span><span class="city_name">绍兴</span><span class="city_name">金华</span><span class="city_name">衢州</span><span class="city_name">舟山</span><span class="city_name">台州</span><span class="city_name">丽水</span><span class="city_name">湖州</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">江西</span></div><div class="city_container_right"><span class="city_name">南昌</span><span class="city_name">景德镇</span><span class="city_name">萍乡</span><span class="city_name">九江</span><span class="city_name">新余</span><span class="city_name">鹰潭</span><span class="city_name">赣州</span><span class="city_name">吉安</span><span class="city_name">宜春</span><span class="city_name">抚州</span><span class="city_name">上饶</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">福建</span></div><div class="city_container_right"><span class="city_name">福州</span><span class="city_name">厦门</span><span class="city_name">莆田</span><span class="city_name">三明</span><span class="city_name">泉州</span><span class="city_name">漳州</span><span class="city_name">南平</span><span class="city_name">龙岩</span><span class="city_name">宁德</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">湖南</span></div><div class="city_container_right"><span class="city_name">长沙</span><span class="city_name">株洲</span><span class="city_name">湘潭</span><span class="city_name">衡阳</span><span class="city_name">邵阳</span><span class="city_name">岳阳</span><span class="city_name">常德</span><span class="city_name">张家界</span><span class="city_name">益阳</span><span class="city_name">郴州</span><span class="city_name">永州</span><span class="city_name">怀化</span><span class="city_name">娄底</span><span class="city_name">湘西</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">湖北</span></div><div class="city_container_right"><span class="city_name">武汉</span><span class="city_name">黄石</span><span class="city_name">襄樊</span><span class="city_name">十堰</span><span class="city_name">宜昌</span><span class="city_name">荆门</span><span class="city_name">鄂州</span><span class="city_name">孝感</span><span class="city_name">荆州</span><span class="city_name">黄冈</span><span class="city_name">咸宁</span><span class="city_name">随州</span><span class="city_name">恩施</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">河南</span></div><div class="city_container_right"><span class="city_name">郑州</span><span class="city_name">开封</span><span class="city_name">洛阳</span><span class="city_name">平顶山</span><span class="city_name">焦作</span><span class="city_name">鹤壁</span><span class="city_name">新乡</span><span class="city_name">安阳</span><span class="city_name">濮阳</span><span class="city_name">许昌</span><span class="city_name">漯河</span><span class="city_name">三门峡</span><span class="city_name">南阳</span><span class="city_name">商丘</span><span class="city_name">信阳</span><span class="city_name">周口</span><span class="city_name">驻马店</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">海南</span></div><div class="city_container_right"><span class="city_name">海口</span><span class="city_name">三亚</span><span class="city_name">三沙</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">广东</span></div><div class="city_container_right"><span class="city_name">广州</span><span class="city_name">深圳</span><span class="city_name">珠海</span><span class="city_name">汕头</span><span class="city_name">韶关</span><span class="city_name">佛山</span><span class="city_name">江门</span><span class="city_name">湛江</span><span class="city_name">茂名</span><span class="city_name">东沙群岛</span><span class="city_name">肇庆</span><span class="city_name">惠州</span><span class="city_name">梅州</span><span class="city_name">汕尾</span><span class="city_name">河源</span><span class="city_name">阳江</span><span class="city_name">清远</span><span class="city_name">东莞</span><span class="city_name">中山</span><span class="city_name">潮州</span><span class="city_name">揭阳</span><span class="city_name">云浮</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">广西</span></div><div class="city_container_right"><span class="city_name">南宁</span><span class="city_name">柳州</span><span class="city_name">桂林</span><span class="city_name">梧州</span><span class="city_name">北海</span><span class="city_name">防城港</span><span class="city_name">钦州</span><span class="city_name">贵港</span><span class="city_name">玉林</span><span class="city_name">百色</span><span class="city_name">贺州</span><span class="city_name">河池</span><span class="city_name">来宾</span><span class="city_name">崇左</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">贵州</span></div><div class="city_container_right"><span class="city_name">贵阳</span><span class="city_name">遵义</span><span class="city_name">安顺</span><span class="city_name">铜仁</span><span class="city_name">毕节</span><span class="city_name">六盘水</span><span class="city_name">黔西南</span><span class="city_name">黔东南</span><span class="city_name">黔南</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">四川</span></div><div class="city_container_right"><span class="city_name">成都</span><span class="city_name">自贡</span><span class="city_name">攀枝花</span><span class="city_name">泸州</span><span class="city_name">德阳</span><span class="city_name">绵阳</span><span class="city_name">广元</span><span class="city_name">遂宁</span><span class="city_name">内江</span><span class="city_name">乐山</span><span class="city_name">南充</span><span class="city_name">宜宾</span><span class="city_name">广安</span><span class="city_name">达州</span><span class="city_name">眉山</span><span class="city_name">雅安</span><span class="city_name">巴中</span><span class="city_name">资阳</span><span class="city_name">阿坝</span><span class="city_name">甘孜</span><span class="city_name">凉山</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">云南</span></div><div class="city_container_right"><span class="city_name">昆明</span><span class="city_name">保山</span><span class="city_name">昭通</span><span class="city_name">丽江</span><span class="city_name">普洱</span><span class="city_name">临沧</span><span class="city_name">曲靖</span><span class="city_name">玉溪</span><span class="city_name">文山</span><span class="city_name">西双版纳</span><span class="city_name">楚雄</span><span class="city_name">红河</span><span class="city_name">德宏</span><span class="city_name">大理</span><span class="city_name">怒江</span><span class="city_name">迪庆</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">甘肃</span></div><div class="city_container_right"><span class="city_name">兰州</span><span class="city_name">嘉峪关</span><span class="city_name">金昌</span><span class="city_name">白银</span><span class="city_name">天水</span><span class="city_name">酒泉</span><span class="city_name">张掖</span><span class="city_name">武威</span><span class="city_name">定西</span><span class="city_name">陇南</span><span class="city_name">平凉</span><span class="city_name">庆阳</span><span class="city_name">临夏</span><span class="city_name">甘南</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">宁夏</span></div><div class="city_container_right"><span class="city_name">银川</span><span class="city_name">石嘴山</span><span class="city_name">吴忠</span><span class="city_name">固原</span><span class="city_name">中卫</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">青海</span></div><div class="city_container_right"><span class="city_name">西宁</span><span class="city_name">玉树</span><span class="city_name">果洛</span><span class="city_name">海东</span><span class="city_name">海西</span><span class="city_name">黄南</span><span class="city_name">海北</span><span class="city_name">海南</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">西藏</span></div><div class="city_container_right"><span class="city_name">拉萨</span><span class="city_name">那曲</span><span class="city_name">昌都</span><span class="city_name">山南</span><span class="city_name">日喀则</span><span class="city_name">阿里</span><span class="city_name">林芝</span></div></div><div style="clear:both"></div><div class="city_container"><div class="city_container_left"><span class="style_color">新疆</span></div><div class="city_container_right"><span class="city_name">乌鲁木齐</span><span class="city_name">克拉玛依</span><span class="city_name">吐鲁番</span><span class="city_name">哈密</span><span class="city_name">博尔塔拉</span><span class="city_name">巴音郭楞</span><span class="city_name">克孜勒苏</span><span class="city_name">和田</span><span class="city_name">阿克苏</span><span class="city_name">喀什</span><span class="city_name">塔城</span><span class="city_name">伊犁</span><span class="city_name">昌吉</span><span class="city_name">阿勒泰</span></div></div><div style="clear:both"></div></div></div></div><div id="bside_left"><div id="txt_pannel"><h3>功能简介：</h3><p>1、支持地址 精确/模糊 查询；</p><p>2、支持POI点坐标显示；</p><p>3、坐标鼠标跟随显示；</p><h3>使用说明：</h3><p>在搜索框搜索关键词后，地图上会显示相应poi点，同时左侧显示对应该点的信息，点击某点或某信息，右上角会显示相应该点的坐标和地址。</p></div></div><div id="bside_rgiht"><div id="container"></div></div></div></div></el-form-item><el-form-item label="商户logo"><img :src=" 'data:image/jpeg;base64,'+base64 " class="sizeImg"><el-uploadaction:auto-upload="false"ref="uploadssss"list-type="picture-card":on-change="handlePictureCardPreview":limit="1":on-remove="handleRemove":class="{hide:hideUpload}"><i class="el-icon-plus"></i></el-upload></el-form-item><el-button type="primary" @click="editSubmit('editForm')" class="butt">提交</el-button></el-form></template><script>import { TMap } from '@/common/map'import config from "../../common/config";import $ from "jquery"import 'jquery-ui/ui/widgets/autocomplete'export default{data() {return {hideUpload:false,rules: {name: [{required: true, //是否必填message: "商户名称不能为空", //规则trigger: "blur" //何事件触发}],cellphone: [{required: true, //是否必填message: "商户手机号不能为空", //规则trigger: "blur" //何事件触发},{pattern: /0?(13|14|15|17|18|19)[0-9]{9}/,message: "商户手机号格式不对",trigger: "blur"}],telephone: [{required: true, //是否必填message: "商户店铺电话号不能为空", //规则trigger: "blur" //何事件触发},{pattern: /^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/,message: "商户店铺电话号格式不对",trigger: "blur"}],description: [{required: true, //是否必填message: "商户描述不能为空", //规则trigger: "blur" //何事件触发}],location: [{required: true, //是否必填message: "商户位置不能为空", //规则trigger: "blur" //何事件触发}],longitude: [{required: true, //是否必填message: "经度不能为空", //规则trigger: "blur" //何事件触发}],latitude: [{required: true, //是否必填message: "纬度不能为空", //规则trigger: "blur" //何事件触发}],},searchService:[],markers:[],city:"",location:"",latitude:0,longitude:0,addForm: {telephone : '',description : '',latitude : '',longitude : '',location : '',name: "",image: "", //base64leaderRate: "",description: "",cellphone:"",}, editForm: {id : "",telephone : '',description : '',latitude : '',longitude : '',location : '',name: "",image: "", //base64leaderRate: "",description: "",cellphone:"",},list:[],id:"",row:{},base64:"",subfix:"",}},mounted() {this.init();this.row=this.$route.query.rows;this.detail();},methods:{setAnchor(marker, flag) {var left = marker.index * 27;if (flag == true) {var anchor = new qq.maps.Point(10, 30),origin = new qq.maps.Point(left, 0),size = new qq.maps.Size(27, 33),icon = new qq.maps.MarkerImage("../../../static/images/marker10.png",size,origin,anchor);marker.setIcon(icon);} else {var anchor = new qq.maps.Point(10, 30),origin = new qq.maps.Point(left, 35),size = new qq.maps.Size(27, 33),icon = new qq.maps.MarkerImage("../../../static/images/marker10.png",size,origin,anchor);marker.setIcon(icon);}},setCurrent(arr, index, isMarker) {if (isMarker) {each(markerArray, function(n, ele) {if (n == index) {setAnchor(ele, false);ele.setZIndex(10);} else {if (!ele.isClicked) {setAnchor(ele, true);ele.setZIndex(9);}}});} else {each(markerArray, function(n, ele) {if (n == index) {ele.div.style.background = "#DBE4F2";} else {if (!ele.div.isClicked) {ele.div.style.background = "#fff";}}});}},setFlagClicked(arr, index) {each(markerArray, function(n, ele) {if (n == index) {ele.isClicked = true;ele.div.isClicked = true;var str ='<div style="width:250px;">' +ele.div.children[1].innerHTML.toString() +"</div>";var latLng = ele.getPosition();document.getElementById("poi_cur").value =latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);} else {ele.isClicked = false;ele.div.isClicked = false;}});},curCity(e) {var isNoValue = false;var city = document.getElementById("city");var e = e || window.event,target = e.target || e.srcElement;if (target.innerHTML == "更换城市") {city.style.display = "block";if (isNoValue) {bside.innerHTML = "";each(markerArray, function(n, ele) {ele.setMap(null);});markerArray.length = 0;}}},// key(e) {// if (event.keyCode == 13) {//btnSearch.click();//return false;// }// },init() {var url4;$(".search_t").autocomplete({source:function(request,response){url4 = encodeURI("http://apis./ws/place/v1/suggestion/?keyword=" + request.term + "®ion=" + curCity.children[0].innerHTML + "&key=yourkey=?");$.getJSON(url4,function(result){response($.map(result.data,function(item){return({label:item.title})}));});}});city.onclick = function(e) {var url2;var e = e || window.event,target = e.target || e.srcElement;if (target.className == "close") {city.style.display = "none";}if (target.className == "city_name") {curCity.children[0].innerHTML = target.innerHTML + "市";url2 = encodeURI("http://apis./ws/geocoder/v1/?region=" +curCity.children[0].innerHTML +"&address=" +curCity.children[0].innerHTML +"&key=yourkey=?");$.getJSON(url2, function(result) {map.setCenter(new qq.maps.LatLng(result.result.location.lat,result.result.location.lng));map.setZoom(10);});city.style.display = "none";}};var container = document.getElementById("container");var map = new qq.maps.Map(container, {zoom: 10}),label = new qq.maps.Label({map: map,offset: new qq.maps.Size(15, -12),draggable: false,clickable: false}),markerArray = [],curCity = document.getElementById("cur_city"),btnSearch = document.getElementById("btn_search"),bside = document.getElementById("bside_left"),url,query_city,cityservice = new qq.maps.CityService({complete: function(result) {curCity.children[0].innerHTML = result.detail.name;map.setCenter(result.detail.latLng);}});cityservice.searchLocalCity();map.setOptions({draggableCursor: "crosshair"});$(container).mouseenter(function() {label.setMap(map);});$(container).mouseleave(function() {label.setMap(null);});qq.maps.event.addListener(map, "mousemove", function(e) {var latlng = e.latLng;label.setPosition(latlng);label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));});var url3;var that=this;qq.maps.event.addListener(map, "click", function(e) {that.addForm.longitude=e.latLng.getLng();that.addForm.latitude=e.latLng.getLat();document.getElementById("poi_cur").value =e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6);url3 = encodeURI("http://apis./ws/geocoder/v1/?location=" +e.latLng.getLat() +"," +e.latLng.getLng() +"&key=yourkey=?");$.getJSON(url3, function(result) {if (result.result != undefined) {document.getElementById("addr_cur").value = result.result.address;} else {document.getElementById("addr_cur").value = "";}});});qq.maps.event.addListener(map, "zoom_changed", function() {document.getElementById("level").innerHTML ="当前缩放等级：" + map.getZoom();});var listener_arr = [];var isNoValue = false;qq.maps.event.addDomListener(btnSearch, "click", function() {var value = this.parentNode.getElementsByTagName("input")[0].value;var latlngBounds = new qq.maps.LatLngBounds();for (var i = 0, l = listener_arr.length; i < l; i++) {qq.maps.event.removeListener(listener_arr[i]);}listener_arr.length = 0;query_city = curCity.children[0].innerHTML;url = encodeURI("http://apis./ws/place/v1/search?keyword=" +value +"&boundary=region(" +query_city +",0)&page_size=9&page_index=1&key=yourkey&output=jsonp&&callback=?");$.getJSON(url, function(result) {if (result.count) {this.isNoValue = false;bside.innerHTML = "";each(markerArray, function(n, ele) {ele.setMap(null);});markerArray.length = 0;each(result.data, function(n, ele) {var latlng = new qq.maps.LatLng(ele.location.lat,ele.location.lng);latlngBounds.extend(latlng);var left = n * 27;var marker = new qq.maps.Marker({map: map,position: latlng,zIndex: 10});marker.index = n;marker.isClicked = false;setAnchor(marker, true);markerArray.push(marker);var listener1 = qq.maps.event.addDomListener(marker,"mouseover",function() {var n = this.index;setCurrent(markerArray, n, false);setCurrent(markerArray, n, true);label.setContent(this.position.getLat().toFixed(6) +"," +this.position.getLng().toFixed(6));label.setPosition(this.position);label.setOptions({offset: new qq.maps.Size(15, -20)});});listener_arr.push(listener1);var listener2 = qq.maps.event.addDomListener(marker,"mouseout",function() {var n = this.index;setCurrent(markerArray, n, false);setCurrent(markerArray, n, true);label.setOptions({offset: new qq.maps.Size(15, -12)});});listener_arr.push(listener2);var listener3 = qq.maps.event.addDomListener(marker,"click",function() {var n = this.index;setFlagClicked(markerArray, n);setCurrent(markerArray, n, false);setCurrent(markerArray, n, true);document.getElementById("addr_cur").value = bside.childNodes[n].childNodes[1].childNodes[1].innerHTML.substring(3);});listener_arr.push(listener3);map.fitBounds(latlngBounds);var div = document.createElement("div");div.className = "info_list";var order = document.createElement("div");var leftn = -54 - 17 * n;order.style.cssText ="width:17px;height:17px;margin:3px 3px 0px 0px;float:left;background:url(../../../static/images/marker_n.png) " +leftn +"px 0px";div.appendChild(order);var pannel = document.createElement("div");pannel.style.cssText = "width:200px;float:left;";div.appendChild(pannel);var name = document.createElement("p");name.style.cssText = "margin:0px;color:#0000CC";name.innerHTML = ele.title;pannel.appendChild(name);var address = document.createElement("p");address.style.cssText = "margin:0px;";address.innerHTML = "地址：" + ele.address;pannel.appendChild(address);if (ele.tel != undefined) {var phone = document.createElement("p");phone.style.cssText = "margin:0px;";phone.innerHTML = "电话：" + ele.tel;pannel.appendChild(phone);}var position = document.createElement("p");position.style.cssText = "margin:0px;";position.innerHTML ="坐标：" +ele.location.lat.toFixed(6) +"，" +ele.location.lng.toFixed(6);pannel.appendChild(position);bside.appendChild(div);div.style.height = pannel.offsetHeight + "px";div.isClicked = false;div.index = n;marker.div = div;div.marker = marker;});$("#bside_left").delegate(".info_list", "mouseover", function(e) {var n = this.index;setCurrent(markerArray, n, false);setCurrent(markerArray, n, true);});$("#bside_left").delegate(".info_list", "mouseout", function() {each(markerArray, function(n, ele) {if (!ele.isClicked) {setAnchor(ele, true);ele.div.style.background = "#fff";}});});$("#bside_left").delegate(".info_list", "click", function(e) {var n = this.index;setFlagClicked(markerArray, n);setCurrent(markerArray, n, false);setCurrent(markerArray, n, true);map.setCenter(markerArray[n].position);document.getElementById("addr_cur").value = this.childNodes[1].childNodes[1].innerHTML.substring(3);});} else {bside.innerHTML = "";each(markerArray, function(n, ele) {ele.setMap(null);});markerArray.length = 0;var novalue = document.createElement("div");novalue.id = "no_value";novalue.innerHTML = "对不起，没有搜索到你要找的结果!";bside.appendChild(novalue);this.isNoValue = true;}});});function setAnchor(marker, flag) {var left = marker.index * 27;if (flag == true) {var anchor = new qq.maps.Point(10, 30),origin = new qq.maps.Point(left, 0),size = new qq.maps.Size(27, 33),icon = new qq.maps.MarkerImage("../../../static/images/marker10.png",size,origin,anchor);marker.setIcon(icon);} else {var anchor = new qq.maps.Point(10, 30),origin = new qq.maps.Point(left, 35),size = new qq.maps.Size(27, 33),icon = new qq.maps.MarkerImage("../../../static/images/marker10.png",size,origin,anchor);marker.setIcon(icon);}}function setCurrent(arr, index, isMarker) {if (isMarker) {each(markerArray, function(n, ele) {if (n == index) {setAnchor(ele, false);ele.setZIndex(10);} else {if (!ele.isClicked) {setAnchor(ele, true);ele.setZIndex(9);}}});} else {each(markerArray, function(n, ele) {if (n == index) {ele.div.style.background = "#DBE4F2";} else {if (!ele.div.isClicked) {ele.div.style.background = "#fff";}}});}}function setFlagClicked(arr, index) {each(markerArray, function(n, ele) {if (n == index) {ele.isClicked = true;ele.div.isClicked = true;var str ='<div style="width:250px;">' +ele.div.children[1].innerHTML.toString() +"</div>";var latLng = ele.getPosition();document.getElementById("poi_cur").value =latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);} else {ele.isClicked = false;ele.div.isClicked = false;}});}function each(obj, fn) {for (var n = 0, l = obj.length; n < l; n++) {fn.call(obj[n], n, obj[n]);}}},detail(row){this.detaildia=true;this.$axios({method: "post",url: `${config.host}/admin/retailer/detail`,data: {content: {id:this.id,}}}).then(res => {this.gridLoading = false;if (res.data.code == "0000") {this.list=res.data.data;this.edit();}});},edit() {this.editForm.id = this.list.id;this.editForm.name = this.list.name;this.editForm.telephone=this.list.telephone;this.editForm.latitude=this.list.latitude;this.editForm.longitude=this.list.longitude;this.editForm.location =this.list.location;this.base64 = this.list.image;this.editForm.description = this.list.description;this.editForm.cellphone=this.list.cellphone;this.hideUpload = false;},editSubmit(formName) {this.$refs.uploadssss.clearFiles();this.$refs[formName].validate(valid => {if (valid) {if (this.base64 == "") {this.$message({message: "请上传图片",type: "error"});return;}this.$axios({method: "post",url: `${config.host}/admin/retailer/update`,data: {content: {id: this.editForm.id,telephone:this.editForm.telephone,name: this.editForm.name,image: this.base64,cellphone:this.editForm.cellphone,latitude:this.editForm.latitude,longitude:this.editForm.longitude,location:this.editForm.location,description: this.editForm.description,subfix: this.subfix,}}}).then(res => {if ("0000" == res.data.code) {this.editDialogVisible = false;this.bindGrid();this.$message({message: "修改记录成功",type: "success"});} else {this.$message({message: "修改记录失败",type: "success"});}});} else {return false;}});},handleRemove(file, fileList) {this.hideUpload = fileList.length >= 1;console.log(file, fileList);},handlePictureCardPreview(file, fileList) {this.hideUpload = fileList.length >= 1;var subfixs = [".png", ".jpg", ".jpeg", ".bmp", ".gif"];var subfix = file.raw.name.toLowerCase().substring(file.raw.name.lastIndexOf("."));if (subfixs.indexOf(subfix) > -1) {this.subfix = subfix;var reader = new FileReader();reader.onload = () => {this.base64 = reader.result.split(",")[1];};reader.readAsDataURL(file.raw);}},},created(){this.id=this.$route.query.id;}}</script><style scoped>.sizeImg {width: 4rem;height: 4rem;}.hide .el-upload--picture-card {display: none;}.site{width: 80%;padding: .5rem 0 .5rem 0;}#atlas {min-width: 600px;min-height: 500px;width: 50%;margin: 10px 20px;}.el-dialog{width: 100%;top: 0 !important;}.el-form{display: flex;justify-content: center;flex-direction: column;margin-left: 29rem;}.el-input__inner{border: none ;border-bottom: solid 1px #C2CAD8;font-size:28px;height: 42px;outline: none;}.el-form-item__label{font-size: 24px !important;}.el-button{width: 100px;height: 50px;margin-left: 50rem;}#main {height: 573px;width: 1000px;margin: 0px auto;border: 1px solid #5688cb;border-top: 0px;}#tooles {height: 42px;background: #5688cb;position: relative;z-index: 100;color: white;}#bside_left {width: 260px;height: 510px;padding: 10px 0px 10px 10px;float: left;overflow: auto;}#cur_city,#no_value {height: 20px;position: absolute;top: 3px;left: 10px;}#cur_city .change_city {margin-left: 5px;cursor: pointer;}#level {margin-left: 20px;}.logo_img {width: 172px;height: 23px;}.search {width: 280px;height: 53px;padding-left: 10px;float: left;margin-left: 15px;margin-right: 30px;}.search_t {width: 200px;height: 18px;padding: 3px;margin-top: 13px;line-height: 20px;}.search_c {width: 220px;height: 40px;float: left;}.btn,.btn_active {width: 49px;height: 24px;line-height: 24px;font-size: 14px;float: left;margin-top: 14px;text-align: center;cursor: pointer;}.poi {width:620px;height: 41;padding-top: 12px;float: left;position: relative;}.poi_note {width: 80px;line-height: 26px;float: left;}#poi_cur {width: 160px;height: 22px;margin-right: 10px;margin-top: 3px;line-height: 26px;float: left;text-align: center;}#addr_cur {width: 260px;height: 22px;margin-right: 5px;margin-top: 3px;line-height: 26px;float: left;text-align: center;}.btn_copy {width: 49px;height: 24px;float: left;}.already {width: 52px;line-height: 26px;padding-left: 5px;float: left;color: red;display: none;}.info_list {margin-bottom: 5px;cursor: pointer;}#txt_pannel {height: 500px;}#city {width: 356px;height: 433px;padding: 10px;border: 2px solid #d6d6d6;position: absolute;left: 44px;top: 20px;z-index: 999;background: #fff;overflow: auto;color: black;}#city .city_class {font-size: 12px;background: #fff;}#city .city_container {margin-top: 10px;margin-bottom: 10px;background: #fff;}#city .city_container_left {width: 48px;float: left;}#city .city_container_right {width: 289px;float: left;}#city .close {width: 20px;height: 20px;display: inline-block;font-size: 20px;font-weight: normal;cursor: pointer;}#city .city_name {line-height: 20px;margin-left: 5px;color: #2f82c4;cursor: pointer;display: inline-block;font-size: 12px;}#curCity {margin-right: 5px;}.hide {display: none;}#bside_rgiht {width: 631px;height: 530px;margin-left: 10px;border-left: 1px solid #5688cb;float: left;font-size: 12px;}#container {width: 621px;height: 520px;border: 5px solid #fff;}#no_value {color: red;position: relative;width: 200px;}.butt{margin-top: 2rem;}.hide .el-upload--picture-card {display: none;}</style>```
