{"id":8490,"date":"2021-06-08T14:45:25","date_gmt":"2021-06-08T06:45:25","guid":{"rendered":"https:\/\/sdeno.com\/?p=8490"},"modified":"2021-12-23T17:10:46","modified_gmt":"2021-12-23T09:10:46","slug":"vue-%e4%bd%bf%e7%94%a8%e9%ab%98%e5%be%b7%e5%9c%b0%e5%9b%bevue-amap%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=8490","title":{"rendered":"vue \u4f7f\u7528\u9ad8\u5fb7\u5730\u56fevue-amap\u7ec4\u4ef6"},"content":{"rendered":"

\u65b9\u6cd5\u4e00\uff1a\u901a\u7528\u65b9\u6cd5\u4e0d\u7528\u533a\u5206vue2\u548cvue3<\/span><\/p>\n

1\uff0c\u4fee\u6539public\/index.html\uff0c\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9<\/p>\n

<script type=\"text\/javascript\">\n    window._AMapSecurityConfig = {\n        securityJsCode:'\u586b\u5199\u4f60\u7684\u5b89\u5168\u7801',\n    }\n<\/script><\/pre>\n
<script src=\"https:\/\/webapi.amap.com\/loader.js\"><\/script><\/pre>\n
2\uff0c\u521b\u5efaMapContainer.vue\u7ec4\u4ef6\uff0c\u4ee5\u4e0b\u5185\u5bb9<\/p>\n
<template>\n  <div class=\"box\">\n    <div\n        id=\"container\"\n        style=\"width:500px; height:300px\"\n    ><\/div>\n  <\/div>\n<\/template>\n\n<script>\n\nexport default {\n  mounted () {\n    AMapLoader.load({ \/\/\u9996\u6b21\u8c03\u7528 load\n      key:'\u4f60\u7684key',\/\/\u9996\u6b21load key\u4e3a\u5fc5\u586b\n      version:'1.4.5', \/\/\u5fc5\u987b\u75281.4.x\u7248\u672c\n      plugins:['AMap.Scale']\n    }).then((AMap)=>{\n      var map = new AMap.Map('container');\n      map.addControl(new AMap.Scale())\n\n\n      var options = {\n        'showButton': true,\/\/\u662f\u5426\u663e\u793a\u5b9a\u4f4d\u6309\u94ae\n        'buttonPosition': 'LB',\/\/\u5b9a\u4f4d\u6309\u94ae\u7684\u4f4d\u7f6e\n        \/* LT LB RT RB *\/\n        'buttonOffset': new AMap.Pixel(10, 20),\/\/\u5b9a\u4f4d\u6309\u94ae\u8ddd\u79bb\u5bf9\u5e94\u89d2\u843d\u7684\u8ddd\u79bb\n        'showMarker': true,\/\/\u662f\u5426\u663e\u793a\u5b9a\u4f4d\u70b9\n        'markerOptions':{\/\/\u81ea\u5b9a\u4e49\u5b9a\u4f4d\u70b9\u6837\u5f0f\uff0c\u540cMarker\u7684Options\n          'offset': new AMap.Pixel(-18, -36),\n          'content':'<img src=\"https:\/\/a.amap.com\/jsapi_demos\/static\/resource\/img\/user.png\" style=\"width:36px;height:36px\"\/>'\n        },\n        'showCircle': true,\/\/\u662f\u5426\u663e\u793a\u5b9a\u4f4d\u7cbe\u5ea6\u5708\n        'circleOptions': {\/\/\u5b9a\u4f4d\u7cbe\u5ea6\u5708\u7684\u6837\u5f0f\n          'strokeColor': '#0093FF',\n          'noSelect': true,\n          'strokeOpacity': 0.5,\n          'strokeWeight': 1,\n          'fillColor': '#02B0FF',\n          'fillOpacity': 0.25\n        }\n      }\n      AMap.plugin([\"AMap.Geolocation\"], function() {\n        var geolocation = new AMap.Geolocation(options);\n        map.addControl(geolocation);\n        geolocation.getCurrentPosition()\n      });\n\n\n\n      AMap.plugin(['AMap.ToolBar'],\n          function(){\n            var toolopt = {\n              offset :new AMap.Pixel(10,10),\/\/\u76f8\u5bf9\u4e8e\u5730\u56fe\u5bb9\u5668\u5de6\u4e0a\u89d2\u7684\u504f\u79fb\u91cf\uff0c\u6b63\u6570\u4ee3\u8868\u5411\u53f3\u4e0b\u504f\u79fb\u3002\u9ed8\u8ba4\u4e3aAMap.Pixel(10,10)\n              \/*\n               *\u63a7\u4ef6\u505c\u9760\u4f4d\u7f6e\n               *LT:\u5de6\u4e0a\u89d2;\n               *RT:\u53f3\u4e0a\u89d2;\n               *LB:\u5de6\u4e0b\u89d2;\n               *RB:\u53f3\u4e0b\u89d2;\n               *\u9ed8\u8ba4\u4f4d\u7f6e\uff1aLT\n               *\/\n              position : 'LT',\n              ruler : true,\/\/\u6807\u5c3a\u952e\u76d8\u662f\u5426\u53ef\u89c1\uff0c\u9ed8\u8ba4\u4e3atrue\n              noIpLocate : false,\/\/\u5b9a\u4f4d\u5931\u8d25\u540e\uff0c\u662f\u5426\u5f00\u542fIP\u5b9a\u4f4d\uff0c\u9ed8\u8ba4\u4e3afalse\n              locate : true,\/\/\u662f\u5426\u663e\u793a\u5b9a\u4f4d\u6309\u94ae\uff0c\u9ed8\u8ba4\u4e3afalse\n              liteStyle : false,\/\/\u662f\u5426\u4f7f\u7528\u7cbe\u7b80\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u4e3afalse\n              direction : false,\/\/\u65b9\u5411\u952e\u76d8\u662f\u5426\u53ef\u89c1\uff0c\u9ed8\u8ba4\u4e3atrue\n              autoPosition : true,\/\/\u662f\u5426\u81ea\u52a8\u5b9a\u4f4d\uff0c\u5373\u5730\u56fe\u521d\u59cb\u5316\u52a0\u8f7d\u5b8c\u6210\u540e\uff0c\u662f\u5426\u81ea\u52a8\u5b9a\u4f4d\u7684\u7528\u6237\u6240\u5728\u5730\uff0c\u5728\u652f\u6301HTML5\u7684\u6d4f\u89c8\u5668\u4e2d\u6709\u6548\uff0c\u9ed8\u8ba4\u4e3afalse\n              locationMarker : AMap.Marker({map: map}),\n              \/**\n               *\u662f\u5426\u4f7f\u7528\u9ad8\u5fb7\u5b9a\u4f4dsdk\u7528\u6765\u8f85\u52a9\u4f18\u5316\u5b9a\u4f4d\u6548\u679c\uff0c\u9ed8\u8ba4\uff1afalse.\n               *\u4ec5\u4f9b\u5728\u4f7f\u7528\u4e86\u9ad8\u5fb7\u5b9a\u4f4dsdk\u7684APP\u4e2d\uff0c\u5d4c\u5165webview\u9875\u9762\u65f6\u4f7f\u7528\n               *\u6ce8\uff1a\u5982\u679c\u8981\u4f7f\u7528\u8f85\u52a9\u5b9a\u4f4d\u7684\u529f\u80fd\uff0c\u9664\u4e86\u9700\u8981\u5c06useNative\u5c5e\u6027\u8bbe\u7f6e\u4e3atrue\u4ee5\u5916\uff0c\n               *\u8fd8\u9700\u8981\u8c03\u7528\u9ad8\u5fb7\u5b9a\u4f4didk\u4e2d\uff0cAMapLocationClient\u7c7b\u7684startAssistantLocation()\u65b9\u6cd5\u5f00\u542f\u8f85\u52a9H5\u5b9a\u4f4d\u529f\u80fd\uff1b\n               *\u4e0d\u7528\u65f6\uff0c\u53ef\u4ee5\u8c03\u7528stopAssistantLocation()\u65b9\u6cd5\u505c\u6b62\u8f85\u52a9H5\u5b9a\u4f4d\u529f\u80fd\u3002\u5177\u4f53\u7528\u6cd5\u53ef\u53c2\u8003\u5b9a\u4f4dSDK\u7684\u53c2\u8003\u624b\u518c\n               *\/\n              useNative : false\n            }\n            var toolbar  = new AMap.ToolBar(toolopt);\n            \/\/toolbar.hide();\/\/\u9690\u85cftoolbar\n\n            map.addControl(toolbar);\n            \/\/\u542f\u52a8\u76d1\u542c\n            toolbar.on('location',function(){\n              alert(toolbar.getLocation());\n            })\n          }\n      );\n\n\n\n      map.plugin([\"AMap.OverView\"],function(){\n        var view = new AMap.OverView({\n          tileLayer:new AMap.TileLayer({\n            \/\/\u663e\u793a\u7684\u662fgoogle\u4e0a\u663e\u793a\u7684\u56fe\u5c42\n            tileUrl:\"http:\/\/mt{1,2,3,0}.google.cn\/vt\/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil\"\/\/\u56fe\u5757\u53d6\u56fe\u5730\u5740\n          }),\n          isOpen:true,\n          visible:true\n        });\n        console.log(view.getTileLayer());\n        map.addControl(view);\n      });\n\n\n\n\n\n      map.add(new AMap.Marker({\n        position:map.getCenter()\n      }));\n    }).catch((e)=>{\n      console.error(e);\n    });\n\n  },\n  methods: {\n\n\n\n  }\n}\n<\/script><\/pre>\n
3\uff0c\u5728\u4f60\u9700\u8981\u7684\u5730\u65b9\u5f15\u5165<\/p>\n
<MapContainer><\/MapContainer>\n\nimport MapContainer from \"@\/components\/MapContainer.vue\"\n\nexport default {\n\u00a0 \u00a0name: \"indexpage\",\n   components: {\n\u00a0 \u00a0 \u00a0 MapContainer\n   }\n}<\/pre>\n
\u4fee\u6539\u9ad8\u5fb7\u5207\u7247\u5730\u56fe\/\u74e6\u7247\u56fe<\/span><\/p>\n
var key = 'xxxx'\nvar xyzTileLayer = new AMap.TileLayer({\n\/\/ \u5929\u5730\u56fe\u5e95\u56fe\u56fe\u5757\u53d6\u56fe\u5730\u5740\ngetTileUrl: `http:\/\/t{0,1,2,3,4,5,6,7}.tianditu.gov.cn\/DataServer?T=vec_w&tk=${key}&x=[x]&y=[y]&l=[z]`,\nzIndex: 1\n})\n\n\nvar wordTileLayer = new AMap.TileLayer({\n\/\/ \u5929\u5730\u56fe\u6587\u5b57\u6807\u6ce8\u56fe\u5757\u53d6\u56fe\u5730\u5740\ngetTileUrl: `http:\/\/t{0,1,2,3,4,5,6,7}.tianditu.gov.cn\/DataServer?T=cva_w&tk=${key}&x=[x]&y=[y]&l=[z]`,\nzIndex: 2\n})\n\nvar map = new AMap.Map('container', {\n  \/\/ resizeEnable: true,\n  \/\/ center: [120.18870707737302, 30.2356591501443],\n  \/\/ zoom: 17,\n  layers: [\n    xyzTileLayer,\n    wordTileLayer\n  ],\n});<\/pre>\n
\u5b9a\u4f4d\u6848\u4f8b\uff1ahttps:\/\/sdeno.com\/map.html<\/a><\/p>\n
\u62d6\u62fd\u9009\u4e2d\u5730\u5740\uff1ahttps:\/\/sdeno.com\/zp\/map2.html<\/a><\/p>\n
\u6587\u6863\uff1a<\/p>\n
https:\/\/elemefe.github.io\/vue-amap\/#\/zh-cn\/introduction\/install<\/a><\/p>\n
https:\/\/www.wenjiangs.com\/doc\/mdxkhhtr<\/a><\/p>\n
\u65b9\u6cd5\u4e8c\uff1a<\/span><\/p>\n
 npm install -S vue-amap<\/pre>\n
\u7f16\u8f91\u00a0main.js<\/p>\n
import VueAMap from 'vue-amap'; \/\/\u6ce8\u610f\u4e0d\u8981\u548c AMap\u539f\u59cb\u540d\u79f0\u8986\u76d6\nVue.use(VueAMap);\n\/\/ \u521d\u59cb\u5316vue-amap\nVueAMap.initAMapApiLoader({\n\/\/ \u9ad8\u5fb7\u7684key\nkey: 'you key',\n\/\/ \u63d2\u4ef6\u96c6\u5408\nplugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],\nv: '1.4.4'\n\n});<\/pre>\n
demo1<\/span><\/p>\n
map.vue\u6587\u4ef6<\/p>\n
<template>\n    <div class=\"_map\">\n        <div class=\"amap-page-container\">\n            <el-amap-search-box class=\"search-box\" :search-option=\"searchOption\" :on-search-result=\"onSearchResult\" ><\/el-amap-search-box>\n            <el-amap ref=\"map\"  vid=\"amapDemo\" :plugin=\"plugin\"  :zoom=\"zoom\" :center=\"center\" class=\"amap-demo\" :events=\"events\">\n                <el-amap-marker vid=\"component-marker\" :position=\"makerConf.position\" :content=\"makerConf.content\"  ><\/el-amap-marker>\n            <\/el-amap>\n        <\/div>\n        <div class=\"adrs\">\n            <ul>\n                <li class=\"\" v-for=\"(item,index) in list\" :key=\"index\" :class=\"currIndex == index ? 'active':''\"  @click=\"select(item,index)\">\n                    <p class=\"address\">{{item.address}}<\/p>\n                    <p class=\"nm\">{{item.name}}<\/p>\n                <\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n<\/template>\n\n<style>\n    .amap-page-container{\n        height: 300px;\n        position: relative;\n    }\n    .search-box {\n        position: absolute !important;\n        top: 25px;\n        left: 20px;\n        z-index: 200 !important;\n    }\n    .amap-demo {\n        height: 300px;\n    }\n    .amap-logo {\n        display: none;\n    }\n    .amap-copyright {\n        bottom:-100px;\n        display: none;\n    }\n    .amap-scalecontrol{\n        bottom: 4px !important;\n    }\n    .amap-geolocation-con{\n        bottom: 30px !important;\n        z-index: 199 !important;\n    }\n    ul li.active{\n        color: deeppink;\n    }\n<\/style>\n\n<script>\n\n\n    export default {\n        name: 'amap-page',\n        components: {},\n        data() {\n            var me = this;\n            me.city = me.city || '\u6b66\u6c49';\n            return {\n                list:[],\n                currIndex:0,\n                zoom: 16,\n                center: [114.397169, 30.50576],\n                events:{\n                    init: (o) => {\n                        o.setCity(me.city,result => {\n                            console.log(\"----------setCity\",result);\n                            if(result && result.length > 0){\n                                me.zoom = 16;\n                                me.makerConf.position = result;\n                                me.getList(result);\n                            }\n                        });\n                        \/\/\u53bb\u6389logo\n                        document.getElementsByClassName(\"amap-logo\")[0].style.display = \"none\";\n                    },\n                    \"dragend\":function(e){\n                        \/\/console.log(\"dragging\",e,this.getCenter());\n                        var point = this.getCenter();\n                        var pos = [point.lng,point.lat];\n                        me.makerConf.position =  [point.lng,point.lat];\n                        me.getList(pos);\n                    }\n                },\n                makerConf: {\n                    position:  [114.397169, 30.50576],\n                    content:\"\"\n                },\n                searchOption: {\n                    city: me.city,\n                    citylimit: true\n                },\n                plugin:[\n                    'ToolBar',\n                    'Scale',\n                    {\n                        pName: 'Geolocation',\n                        events: {\n                            init(o) {\n\n                            },\n                            complete:function(result){\n                                \/\/\u5b9a\u4f4d\u6210\u529f\n                                var address = result.formattedAddress\n                                var point = result.position;\n                                var obj = {\n                                    address:address,\n                                    name:\"\",\n                                    location:point\n                                }\n                                me.list = [obj];\n                                me.makerConf.position =  [point.lng,point.lat];\n                            },\n                            error:function(){\n\n                            }\n                        }\n                    }\n                ]\n            };\n        },\n        created(){\n            var me = this;\n\n        },\n        mounted(){\n\n        },\n        methods: {\n            select:function(item,index){\n                var me = this;\n                me.currIndex = index;\n                var point = item.location;\n                me.makerConf.position =  [point.lng,point.lat];\n                me.center = [point.lng,point.lat];\n\n            },\n            \/\/this.$refs.map.$getCenter()\n            getList:function(result){\n                \/\/\u83b7\u53d6\u5217\u8868\n                var me = this;\n                me.$Geocoder({\n                    lnglatXY:result,\n                    success:function(res){\n                        if(res.regeocode && res.regeocode.pois){\n                            me.list = res.regeocode.pois;\n                        }else{\n                            me.list = [];\n                        }\n                    },\n                    error:function(res){\n                        me.list = [];\n                    }\n                });\n\n            },\n            onSearchResult(pois) {\n                \/\/\u641c\u7d22\n                let latSum = 0;\n                let lngSum = 0;\n                var me = this;\n\n                var mymap = me.$refs.map.$getInstance();\n\n                if (pois && pois.length > 0) {\n\n                    \/\/\u5982\u679c\u957f\u5ea6\u4e3a1\u5219\u65e0\u9700\u8f6c\u5316\n                    var poi = pois[0];\n                    var lng = poi[\"lng\"];\n                    var lat = poi[\"lat\"];\n                    me.center = [lng, lat];\n                    me.makerConf.position  = [lng, lat];\n                    \/\/me.makerConf.content = poi.name;\n                    me.list = pois;\n                }else{\n                    me.list = [];\n                }\n            },\n\n            $Geocoder(options){\n                \/\/\u5c06\u5750\u6807\u70b9\u8f6c\u5316\u4e3a\uff0c\u8be6\u7ec6\u5730\u5740\n                options = options || {};\n                if(AMap){\n                    AMap.plugin(['AMap.Geocoder'], () => {\n                        const geocoder = new AMap.Geocoder({\n                            radius: options.radius || 1000,\n                            extensions: options.extensions || \"all\"\n                        })\n                        var  lnglatXY = options.lnglatXY || [114.397169, 30.50576]; \/\/\u5df2\u77e5\u70b9\u5750\u6807\n                        geocoder.getAddress(lnglatXY, function(status, result) {\n                            if (status === 'complete' && result.info === 'OK') {\n                                options.success && options.success(result);\n                            }else{\n                                options.error && options.error(status,result);\n                            }\n                        });\n                    });\n\n                }\n\n            }\n        },\n        \"watch\":{\n            list:function(){\n                this.currIndex = 0;\n            }\n        }\n\n    };\n\n    \/*\n      me.$Geocoder({\n                    lnglatXY:[center.lng, center.lat],\n                    success:function(res){\n                        console.log(res);\n                    }\n        });\n     *\n     * *\/\n<\/script><\/pre>\n
https:\/\/www.cnblogs.com\/muamaker\/p\/9543453.html<\/a><\/p>\n
demo2<\/span><\/p>\n
\/\/\u7f16\u8f91main.js<\/p>\n
import AMap from 'vue-amap'\n\nVue.use(AMap)\nAMap.initAMapApiLoader({\n  key: 'e5ea8ec2f20fb3d3e86b8a37a072923e',\n  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',\n    'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor',\n    'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.Geocoder', AMap.Map],\n  v: '1.4.15',\n  uiVersion: '1.0'\n})<\/pre>\n
\u968f\u4fbf\u4e00\u4e2a\u9875\u9762<\/p>\n
ssp-intoEvent<\/a><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u65b9\u6cd5\u4e00\uff1a\u901a\u7528\u65b9\u6cd5\u4e0d\u7528\u533a\u5206vue2\u548cvue3 1\uff0c\u4fee\u6539public\/index.html\uff0c\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9 < […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-8490","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8490"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/8490\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}