騰訊API展示地圖


 首先,需要引入js文件:<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>

        var markersArray = [];
        $scope.latitude = 36.71;
       $scope.longitude = 119.14;
        var myLatlng = new qq.maps.LatLng($scope.latitude, $scope.longitude);
        var myOptions = {
            zoom: 15,
            center: myLatlng,
            panControl: false,
            zoomControl: false,
            //設置控件的地圖類型和位置
            mapTypeControlOptions: {
                //設置控件的地圖類型ID,ROADMAP顯示普通街道地圖,SATELLITE顯示衛星圖像,HYBRID顯示衛星圖像上的主要街道透明層
                mapTypeIds: [],
                //設置控件位置相對上方中間位置對齊
                position: qq.maps.ControlPosition.TOP_CENTER
            }
        }
        var myOptions1 = {
            zoom: 15,
            center: myLatlng,
            panControl: false,
            zoomControl: false,
            //設置控件的地圖類型和位置
            mapTypeControlOptions: {
                //設置控件的地圖類型ID,ROADMAP顯示普通街道地圖,SATELLITE顯示衛星圖像,HYBRID顯示衛星圖像上的主要街道透明層
                mapTypeIds: [],
                //設置控件位置相對上方中間位置對齊
                position: qq.maps.ControlPosition.TOP_CENTER
            }
        }
        var map = new qq.maps.Map(document.getElementById("container"), myOptions);

        var anchor = new qq.maps.Point(15, 33),
            size = new qq.maps.Size(139,  151),
            scaleSize = new qq.maps.Size(30 ,  33),
            origin = new qq.maps.Point(0, 0),
            icon = new qq.maps.MarkerImage(
                "./style/images/mydw.png",
                size,
                origin,
                anchor,
                scaleSize
            );
        var marker = new qq.maps.Marker({
            map: map,
            position: myLatlng,

        });
        marker.setIcon(icon);
        //刪除覆蓋物
        function clearOverlays(markersArray) {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }

        var info = new qq.maps.InfoWindow({
            map: map
        });
        marker.setZIndex(30);
        // 調用定位信息
        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                map.setCenter(result.detail.location);
                // city.value = result.detail.address.substring(2);
                /*獲取地址*/
                $scope.longitude = result.detail.location.lng == undefined ? "" : result.detail.location.lng;
                $scope.latitude = result.detail.location.lat == undefined ? "" : result.detail.location.lat;
                
                $scope.province = result.detail.addressComponents.province == undefined ? "" : result.detail.addressComponents.province;
                $scope.city = result.detail.addressComponents.city == undefined ? "" : result.detail.addressComponents.city;
                $scope.district = result.detail.addressComponents.district == undefined ? "" : result.detail.addressComponents.district;
                $scope.town = result.detail.addressComponents.town == undefined ? "" : result.detail.addressComponents.town;
                $scope.street = result.detail.addressComponents.street == undefined ? "" : result.detail.addressComponents.street;
                $scope.streetNumber = result.detail.addressComponents.streetNumber == undefined ? "" : result.detail.addressComponents.streetNumber;
                $scope.addressComponents = $scope.province + $scope.city + $scope.district + $scope.town + $scope.street + $scope.streetNumber;
            }
        });
        // 顯示地址
        function geocoder_latlng() {
            //獲取經緯度信息
            var lat = myLatlng.lat;
            var lng = myLatlng.lng;
            // //設置經緯度信息
            var latLng = new qq.maps.LatLng(lat, lng);
            //調用城市經緯度查詢接口實現經緯查詢
            geocoder.getAddress(latLng);
        }
        geocoder_latlng();
        
        $scope.searchKeyword = function() {
            clearOverlays(markersArray);
            //對指定地址進行解析
            geocoder.getLocation($scope.search);
        }

 

 這段代碼既可以獲取到該經緯度下的位置,還可以獲取到該經緯度下的具體地址

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM